淘先锋技术网

首页 1 2 3 4 5 6 7

一、过程简介

这里首先你需要会普通的用代码做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 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);
}