目錄

前言

一、動畫預覽

二、動畫拆分

三、素材準備

四、曲線 OutCirc詳解

五、速度分類詳解

六、代碼

?七、組件和設置

八、作者的話

---

前言

我答應我的粉絲接下來更新Dotween系列，但是我一直沒想好，從哪里開始講。

Dotween的安裝我就跳過了，因為這個到處都有。

最后思考了一下，從常用案例開始講吧，對案例有需求的也可以寫在評論區中。

一、動畫預覽

一般定位點很喜歡用這個動畫（如圖1所示），但如果用視頻或者序列幀，有點大材小用了，靈活性都不太好，因此，這里用簡單的圖片來制作這個動畫。

二、動畫拆分

這是由兩個相同動畫的圈組成的，只不過他們一個慢了0.5秒開始播，所以單個圈的動畫（如圖2所示）。

?單個圓圈再拆分：

大小角度：如果把圓最大的時候當做1，它是從1/4的時候開始逐漸變大。

出現和消失角度：假設這個圓的動畫是1秒，前1/3秒在逐漸出現，然后花了1/4秒消失，余下的時間全黑，什么都看不見。

三、素材準備

只需要一個透明白色的圈（如圖3所示），你實在沒有，去PPT里畫一個？下面這個圖是不能用的哈，只是給你們示例一下啊。

四、曲線 OutCirc詳解

dotween里面的曲線有很多，但up認為，如果你沒有仔細觀察過，最后是不知道哪個用起來效果更好的，所以這里帶大家觀察一下這個曲線。

Circ:圓形曲線的緩動( sqrt(1-t^2)）

注釋：sqrt是根號的意思，這個公式其實是，圖像（如圖4所示）

這段有興趣的可以看一下：

把這個公式稍微變一下

1.把t變成x

2.變成等式

再變一下

是不是就很眼熟了，這是圓形公式，再去看他的英文Circ = Circle

是不是一切都說通了。

五、速度分類詳解

這里引用了以下兩個文章的內容，侵權立刪。

Unity Dotween插件的運動曲線（Ease）介紹Ease選項Ease效果示例以及C#修改動畫曲線功能_dotween ease-CSDN博客

Unity Dotween Ease曲線 圖表 效果展示_dotween曲線展示-CSDN博客

實際曲線圖像（如圖5所示）

一個好好的圓形圖像變成了這樣，是因為取的時間不是勻速的，有時候快有時候慢。
In: ???????????從0開始加速
Out: ????????減速到0
lnOut:??????前半段從0開始加速，后半段減速到0的緩動

實際動畫圖像

InCirc介紹（如圖6所示）：時間越來越快，變得越來越快，曲線比較接近圓弧

OutCirc介紹（如圖7所示）：時間越來越慢，變得越來越慢，曲線比較接近圓弧

InOutCirc介紹（如圖8所示）：先按InCirc運動，再按OutCirc運動，所以是慢-快-快-慢

六、代碼

按照之前動畫拆分，把每一步都做了

//找到設置大小的組件public RectTransform rect;//找到圖片private Image img;//記錄初始大小private Vector2 origSize;//動畫持續時間public float duration;//動畫延遲時間public float delay;void Start(){//圖片復制img = rect.GetComponent<Image>();//初始化透明度img.DOFade(0, 0);//記錄初始大小origSize = rect.sizeDelta;//設置初始大小為四分之一rect.sizeDelta = origSize / 4f;//執行動畫StartCoroutine(Delay());}IEnumerator Delay(){//動畫延遲幾秒執行yield return new WaitForSeconds(delay);//執行動畫Animate();}public void Animate(){//建立動畫隊列Sequence s = DOTween.Sequence();//加入動畫              讓圖片在duration秒內變回初始大小           //選擇OutCirc曲線s.Append(rect.DOSizeDelta(origSize, duration).SetEase(Ease.OutCirc));//和上面一起開始的動畫    把圖片透明度變成1，用1/3的總時長s.Join(img.DOFade(1, duration / 3));//和上面一起開始的動畫    把圖片透明度變成0，用1/4總時長，但需要延遲1/3的總時長再執行s.Join(img.DOFade(0, duration / 4).SetDelay(duration / 1.5f));//重復播放s.SetLoops(-1);}

?七、組件和設置

新建兩個圓圈，把之前準備的圖片放上去（如圖9所示）

再把前面寫的腳本掛上去。

Circle1腳本組件（如圖10所示）

Circle2腳本組件（如圖11所示）?

八、作者的話

?Dotween的基礎知識這里還是用了比較多的，如果大家在評論區有問題，我也可能專門寫一篇文章來講解這部分。感謝大家的支持，?( ′･?･` )比心~

?