unity UGUI + DOTween + lua（xlua）实现跑马灯效果

1、引言

上一篇我们给出了cocos的跑马灯实现方法，这里借助上一篇来用unity实现跑马灯效果，具体原理参照上一篇内容，这里是传送门跑马灯原理分析。

2、实现过程

具体实现包括以下步骤。

2.1、制作预制体

这里的素材只需要一张图就可以了。我也上传了吧，需要尝试的同学，可以拿去试一试。在这里插入图片描述
有了背景，我们就可以开始了！

首先我们先创建空物体，修改名字为ScrollMsgForm，做如图设置
添加背景，创建Img!如图所示
添加遮罩，创建空物体，添加组件Image（必须添加，不然mask不起作用）和组件Mask，做不显示遮罩图，如图
添加文本，添加文本时最好勾选富文本，便于在程序中控制文本的颜色，同时要添加组件Content size Fitter，Content size Fitter组件可以使文本自适应字体的大小和宽高。

好了，完成这些预制体就制作好了，下面可以动手写代码了。

2.2、代码实现

具体实现如下所示

ScrollMsgForm = class("ScrollMsgForm") -- 滚动消息类
LuaFormManager.formClassDict["ScrollMsgForm"] = ScrollMsgForm

local GameEntry = CS.XinYue.GameEntry
local cs_coroutine = require "cs_coroutine"
local Vector3 = CS.UnityEngine.Vector3

function ScrollMsgForm:ctor( transform,objs )
    print("ScrollMsgForm:ctor")
    self.msgInfoArr = {}
    self.transform = transform
    self.msgTxt = transform:Find("MsgBg/MsgMask/Text"):GetComponent("Text")
    self.mskTrans = self.msgTxt.transform.parent
    
    self.sizeDeltaParentX = self.mskTrans:GetComponent("RectTransform").sizeDelta.x / 2
    
    self.oriTxtVector3 = Vector3(self.sizeDeltaParentX,self.msgTxt.transform.localPosition.y,self.msgTxt.transform.localPosition.z)
    self.msgTxt.transform.localPosition = self.oriTxtVector3
    self.msgTxt.text = ""
end

function ScrollMsgForm:OnOpen(msgInfo)
     print("ScrollMsgForm:OnOpen")
     
     if msgInfo == nil or next(msgInfo) == nil then return end
     self:scrollMsg(msgInfo[1])
end

function ScrollMsgForm:scrollMsg(msgInfo)
     print("ScrollMsgForm:scrollMsg, msgInfo =",msgInfo)
     if msgInfo == nil then
         return
     end
     self.msgInfoArr[#self.msgInfoArr + 1] = msgInfo
     -- 如果正在滚动直插入数据就可以了，不需要重复执行下面的语句
     if CS.DG.Tweening.DOTween.IsTweening(self.msgTxt.transform) then 
         return
     end
     
     local msgTxtWidth
     local moveDistance
     local moveDuration -- 滚动时间
     local function strtScrollMsg()
          if #self.msgInfoArr > 0 then
              local msgContent = self.msgInfoArr[1]
              table.remove(self.msgInfoArr,1) -- 移除这条滚动的消息
              
              cs_coroutine.start(function ()
                   self.msgTxt.text = msgContent
                   -- 这里等待一帧是为了让msgTxtWidth 得到的值为当前文本的长度，否则得到的值是上一次文本的长度
                   coroutine.yield(CS.UnityEngine.WaitForEndOfFrame())
                   
                   msgTxtWidth = self.msgTxt.transform:GetComponent("RectTransform").sizeDelta.x
                   -- 滚动距离就是最终的相对坐标
                   moveDistance = msgTxtWidth + self.sizeDeltaParentX  -- 滚动距离为文本宽度+遮罩长度的一半（跟锚点有关）
                   moveDuration = moveDistance / 100
                   
                   -- 这里的设置的缓动函数SetEase为线性，是为了让文本的移动速度恒定，否则会出现前面快，结束时慢的现象，否则体验不好
                   self.msgTxt.transform:DOLocalMoveX(-moveDistance,moveDuration):SetEase(CS.DG.Tweening.Ease.Linear):OnComplete(function()
                         self.msgTxt.text = ""
                         self.msgTxt.transform.localPosition = self.oriTxtVector3
                         strtScrollMsg()
                   end)
              end)
         else	   -- 滚动完成后关闭
              GameEntry.UI:CloseUIForm("ScrollMsgForm")
         end
    end
    
    strtScrollMsg()
end

function ScrollMsgForm:OnClose()
    self = ScrollMsgForm
    if CS.DG.Tweening.DOTween.IsTweening(self.msgTxt.transform) then -- 关闭时要停止动作，同时清空消息队列
        CS.DG.Tweening.DOTween.Kill(self.msgTxt.transform.name)
    end
    self.msgInfoArr = {}
end

2.3、效果展现

使用时，只需要，传入参数就可以了

GameEntry.UI:OpenUIForm(“ScrollMsgForm”,{content})

在这里插入图片描述

3、结束语

The End
好了，今天的分享就到这里，如有不足之处，还望大家及时指正，随时欢迎探讨交流！！！

喜欢的朋友们，请帮顶、点赞、评论！您的肯定是我写作的不竭动力！