unity DOtween制作连续动画和部分小坑

快来打我* 2023-09-27 09:36 121阅读 0赞

一、过程简介

这里首先你需要会普通的用代码做Dotween的动画，这里我们只需要学习如何组合起来。

原理：DOtween里面带了一个功能叫做队列，可以连续做动画，需要写代码。

基本过程：

1.它和平时声明其他东西一样，别人是Int i；这个是Sequence sequence；名称也是可以和i一样，可以自己起的。

2.和数组一样，需要先初始化一下，于是就有了sequence = DOTween.Sequence();

3.你需要往里面添加你想要添加的动画。

二、动画添加方式

<一>、普通连续动画（放大图片；缩小图片；再放大图片）

基本逻辑：

1.创建一个队列

2.在队列里按照顺序列出想要连续播放的动画

制作过程：

//先创建一个队列        
    Sequence sequence = DOTween.Sequence();
    //在队列里按顺序加入想要播放的动画
    sequence.Append(_transform.DOScale(new Vector3(1.2f,1.2f,1.2f),0.8f));//放大图片
    sequence.Append(_transform.DOScale(new Vector3(1f, 1f, 1f), 0.5f));//缩小图片
    sequence.Append(_transform.DOScale(new Vector3(1.2f,1.2f,1.2f),0.8f));//再放大图片

<二>、常用功能（等待、循环播放）

如果说我们动画和动画之间需要等待：

（放大图片；在这等一秒再放下一个；缩小图片；在这等两秒在放下一个；再放大图片）

这个插件也带了一个专用的代码：sequence.AppendInterval();

那么代码将会变成：

如果我们希望这个队列不停地循环播放，我们也可以设置；

//先创建一个队列        
    Sequence sequence = DOTween.Sequence();
    //在队列里按顺序加入想要播放的动画
    sequence.Append(_transform.DOScale(new Vector3(1.2f,1.2f,1.2f),0.8f));//放大图片
    sequence.AppendInterval(1);
    sequence.Append(_transform.DOScale(new Vector3(1f, 1f, 1f), 0.5f));//缩小图片
    sequence.AppendInterval(2);
    sequence.Append(_transform.DOScale(new Vector3(1.2f,1.2f,1.2f),0.8f));//再放大图片
    //这个队列循环播放
    sequence.SetLoops(-1);

<三>、组合使用（等待、循环播放）

技巧：如果我们希望每次播完这一套动画；等5秒再播放下一次

可以在开头或者结尾直接写上等待时间，就可以做到啦。

//先创建一个队列        
    Sequence sequence = DOTween.Sequence();
    //在队列里按顺序加入想要播放的动画
    sequence.Append(_transform.DOScale(new Vector3(1.2f,1.2f,1.2f),0.8f));//放大图片
    sequence.AppendInterval(1);
    sequence.Append(_transform.DOScale(new Vector3(1f, 1f, 1f), 0.5f));//缩小图片
    sequence.AppendInterval(2);
    sequence.Append(_transform.DOScale(new Vector3(1.2f,1.2f,1.2f),0.8f));//再放大图片
    sequence.AppendInterval(5); //希望等待五秒再重播
    //这个队列循环播放
    sequence.SetLoops(-1);//这里也可以不写-1，写其他数字就是循环播放几次以后就不播了

三、队列常用方法

<一>、同时进行两个动画

以上的连续动画是第一个放完播放第二个，有时候我们希望两个动画同时播放

方法：sequence.Join(）

详细解释：这个代码的意思是和上一个代码一起播放，所以它是上一行开始，它就开始

需求：放大图片的同时，图片消失

//先创建一个队列        
    Sequence sequence = DOTween.Sequence();
    //在队列里按顺序加入想要播放的动画
    sequence.Append(_transform.DOScale(new Vector3(1.2f,1.2f,1.2f),0.8f));//放大图片
    sequence.Join(_transform.GetComponent<CanvasGroup>().DOFade(0, 1));   //图片消失

<二>、动画执行到某一步，执行一个方法

这里以按钮为例，经常需要按钮放大、跳转页面、按钮再缩小

分析：“跳到下一个界面”是一个方法，不是一个动画了

总结：队列里放方法的代码为sequence.AppendCallback(方法名称）；

详解：下面提供四种写法

如果方法为（纯方法）
    void Apple(){}
    //队列为        
    Sequence sequence = DOTween.Sequence();
    sequence.AppendCallback(Apple);
    
    如果方法为（带了参数）
    void Apple(int a){}
    //队列为
    int b = 5;        
    Sequence sequence = DOTween.Sequence();
    sequence.AppendCallback(()=>Apple(b));
    
    如果方法为（只有一行，想直接写）
    Transform c;
    c.gameObject.SetActive(false);
    //队列为
    Sequence sequence = DOTween.Sequence();
    sequence.AppendCallback(() => c.gameObject.SetActive(false));
    
    如果方法为（有好多行，但也想直接写）
    Transform c;
    c.gameObject.SetActive(false);
    c.gameObject.SetActive(true);
    c.gameObject.SetActive(false);
    
    //队列为
    Sequence sequence = DOTween.Sequence();
    sequence.AppendCallback(() => 
    {c.gameObject.SetActive(false);
    c.gameObject.SetActive(true);
    c.gameObject.SetActive(false);});
    //这里可以继续往下面加

注：这些方法都是在上一个动画完成才执行的，如果你问，如果希望和动画同时进行怎么办？那你可以把方法放在动画上面，动画用Join。

四、sequence的方法

<一>、常用方法

上面是写好了一个动画，第一步干什么，第二步干什么，下面来控制这个动画。

sequence.Play();    //动画播放
            sequence.Pause();   //动画暂停
            sequence.Restart(); //动画重播
            sequence.Rewind();   //动画回到开始
            sequence.Kill();     //删除动画

以上等（写的不全）都是可以应用的

但是，sequence.AppendCallback，这个里面我们是放的方法，所以，一旦这个方法被执行，是没办法用动画的形式暂停或者停止的这个方法的。

sequence.AppendCallback(() => transform.DOScale(0, 1).SetLoops(-1));

以上例：虽然我写的是一个动画，但是是用方法的形式去写的，那么后面无论你清除，重播还是删除sequence还是对这个队列做其他操作也好，transform.DOScale(0, 1).SetLoops(-1)，这个行为是没办法通过sequence消除了。

<二>、使用备注

你创建的动画是默认自动播放的，同时也是默认播放完自动删除上面的动画的，所以如果你希望重复使用的的动画，你就不能让他们把它删了。在创建动画的时候，就要把自动删除这个功能关掉，代码如下。

sequence.SetAutoKill(false);

五、一些小坑

小坑一：

//有时候当fade和scale，放在一起执行时，必须把fade放在前面才行，原因不明
    sequence.Append(puzzle_now.GetComponent<CanvasGroup>().DOFade(0, 0.5f));
    sequence.Join(puzzle_now.transform.DOScale(new Vector3(2f, 2f, 2f), 0.5f));

小坑二：

//这个代码执行失败
    sequence.AppendCallback(() => picNext.GetComponent<Image>().fillOrigin = 1);

小坑三：

用循环时，括号里面不能有太多索引

//这样写就可能失效
    for (int i = 0; i < contentsequenceNum; i++)
    {
    contentSequence[i].AppendCallback(() => secondaryInterfaceP.GetChild(i).GetComponent<CanvasGroup>().blocksRaycasts = false);
    }    
    
    //改成下面这样既可
    for (int i = 0; i < contentsequenceNum; i++)
    {
    Transform tran = secondaryInterfaceP.GetChild(i);
    contentSequence[i].AppendCallback(() => tran.GetComponent<CanvasGroup>().blocksRaycasts = false);
    }