unity之Dotween動畫實現依次顯示

推薦閱讀：

•  我的CSDN
•  我的博客園
•  QQ群：704621321
•  我的個人博客

前言

前面時間趕項目，現在到了優化的時間，各種功能修改，動畫特效增加，頭都大了。又到了自己最不擅長，最討厭的加動畫時間。雖然各種動畫看來讓人賞心悅目但是可能真的是不擅長的原因，總是拒它於千里之外。雖然內心是抗拒的，但，在其位，謀其職，逃不脫也躲不掉。算了，不吐槽了，擼起袖子就是干。這次要實現的動畫是：幾行文本，逐漸顯示。例如：第一行文本顯示后間隔x秒顯示第二行，第二行顯示后，間隔x秒顯示第三行...以此類推。

開始

首先將文字內容初始化並用順序表self.joinMe存儲起來。由於文本要顯示出來，那么初始狀態注定是要將其隱藏的。最終每行顯示的內容為XXX：XXX

local title = {
    [1] = "微信公眾號",[2] = "微信號",[3] = "QQ群[1]",[4] = "QQ群[2]",
    [5] = "接單賺錢群", [6] = "csdn" ,  
}
local name = {
    [1] = "愛上游戲開發",[2] = "codequeen",[3] = "704621321",[4] = "710234797",
    [5] = "234975680", [6] = "https://blog.csdn.net/shirln",
}
self.joinMe = {}
for i=1,6 do
    self.joinMe[i] = transform:Find("joinMe/"..i):GetComponent("Text") 
    self.joinMe[i].text = string.format("%s：%s",title[i],name[i])
    self.joinMe[i].gameObject:SetActive(false)
end

動畫

接下來就是實現動畫播放了

嘗試一

最開始的想法是使用for循環來添加動畫,如下：

local function playAnim(self)
    for i,v in ipairs(self.joinMe) do
        self.joinMe[i].gameObject.transform:DOScale(1, 1):SetDelay(0):OnComplete(
        function()
            self.joinMe[i].gameObject:SetActive(true)
        end)
    end
end

最終的效果是，肉眼可見的同時出現，思考一下，這是為什么？是的，因為這里for循環里是執行動畫，
它不會等動畫執行完再進行i+1，而是只要執行了動畫播放就回i+1循環。

嘗試二

后來我就想，要控制i的遞增，while可以實現該效果，如下：

local function playAnim(self)
    local index = 1
    while(index>7) do
        self.joinMe[index].transform:DOScale(1, 1):SetDelay(0):OnComplete(
        function()
            self.joinMe[index]:SetActive(true)
            index = index + 1
        end)
    end
end

最終的效果是，慘不忍睹的死循環。這里原因就更簡單了，動畫沒播放完，i不會遞增，
那么這時候就永遠滿足條件。那么就會造成死循環。

嘗試三

最終，為了達到動畫效果，只能采取這種笨得不能再笨得方法了：

local function playAnim(self)
    self.joinMe[1].transform:DOScale(1, 1):SetDelay(0):OnComplete(
    function()
        self.joinMe[1]:SetActive(true)
    end)
    self.joinMe[2].transform:DOScale(1, 1):SetDelay(0):OnComplete(
    function()
        self.joinMe[2]:SetActive(true)
    end)
    self.joinMe[3].transform:DOScale(1, 1):SetDelay(0):OnComplete(
    function()
        self.joinMe[3]:SetActive(true)
    end)
    self.joinMe[4].transform:DOScale(1, 1):SetDelay(0):OnComplete(
    function()
        self.joinMe[4]:SetActive(true)
    end)
    self.joinMe[5].transform:DOScale(1, 1):SetDelay(0):OnComplete(
    function()
        self.joinMe[5]:SetActive(true)
    end)
     self.joinMe[6].transform:DOScale(1, 1):SetDelay(0):OnComplete(
    function()
        self.joinMe[6]:SetActive(true)
    end)
    self.joinMe[7].transform:DOScale(1, 1):SetDelay(0):OnComplete(
    function()
        self.joinMe[7]:SetActive(true)
    end)
end

嘗試四

哎，方法三這個代碼看得我腦殼痛，不行，還是得優化一下，哦！以前不是學過遞歸方法嗎，也許可以呢，嘗試一下：

local function JoinMeAnim(self,index)
    self.joinMe[index].gameObject.transform:DOScale(1, 1):SetDelay(0):OnComplete(
    function()
        self.joinMe[index].gameObject:SetActive(true)
        index = index + 1
        JoinMeAnim(self,index)
    end)

嘿，居然可以了，小姐姐牛逼！！！此時內心突然開始為自己鼓掌了。

效果

說明

DOScale(參數1，參數2)：參數2是該動畫播放的時長：即，此動畫從開始播放到下動畫開始播放的時長。
SetDelay(參數)：參數代表該動畫延遲多長時間播放
通過說明可知，可以通過某些參數值來控制動畫時長。例如，上述代碼動畫播放過慢，我們可以通過調節上述參數達到下面效果。

總結

通過對以上四種方法的嘗試加分析，得出的結論是：
不可以采用：方法1，方法2
可以采用：方法3，方法4
推薦采用：方法4