昨天晚上看B站后臺，看到那個點(diǎn)贊、收藏統(tǒng)計的圖表，嘗試做了一下，效果如下圖：

今天跟大家分享一下制作思路。

1、新建一個圓形形狀命名為"Fav_circle"，不要填充，描邊120，給圓形畫一個蒙版，后面要給描邊做動畫，描邊會向內(nèi)向外增大，?畫蒙版可以遮住向內(nèi)增加的部分，形成上面gif所示的向外增大的效果。

再給"Fav_circle"添加一個修建路徑，先不用調(diào)整其參數(shù)。

2、ctrl+d復(fù)制一層，改其顏色，將其命名為“Like_circle”，調(diào)整其start為60，調(diào)整"Fav_circle"的end為60。

3、給兩個圖層分別添加“Simple choker”簡單阻塞效果， Choke Matte設(shè)為2，這樣兩個圖形之間就會產(chǎn)生一點(diǎn)間距。

經(jīng)過前面3步，你應(yīng)該得到如下圖所示的圖形。

4、接下來就是給描邊（stroke width）、描邊顏色（color）做關(guān)鍵幀動畫。k幀有點(diǎn)麻煩，我就不說了，大家可以自己嘗試，或者下載原文件查看。

5、將點(diǎn)贊跟收藏的數(shù)據(jù)通過一個slider control關(guān)聯(lián)起來。

新建一個空圖層，命名為“percent_control”，將“Fav_cicle”的end綁定到“percent_control”，
將“Like_circle”的star綁定到“Fav_cicle”的end上，這樣兩個圖所占百分百就關(guān)聯(lián)起來了。

看到這里你也可能有點(diǎn)懵，可以下載工程文件看一下，再回來看就比較容易理解了。
其實(shí)到這一步這個效果到關(guān)鍵部分已經(jīng)完成了，剩下到就是畫個鼠標(biāo)K幀模擬鼠標(biāo)進(jìn)入、移出到效果。
圖中收藏60%黑色塊跟著鼠標(biāo)移動，只需將鼠標(biāo)作為其父級即可。

這個例子中還使用了comp()跨合成獲取數(shù)據(jù)，如果你對表達(dá)式不熟，還是值得一看的。

這個教程寫的有點(diǎn)簡單，主要講了幾個關(guān)鍵的部分，其他k幀的地方文字寫，將是一篇很長很長的文章，估計也沒幾個人有耐心看下去。
大家下載原文件自己學(xué)習(xí)吧， 如果你用的是中文版， 注意添加Slider Control這里， 你打開工程肯會報錯。

如果有問題可以留言或者進(jìn)QQ群交流。

工程文件下載地址：
鏈接:?https://pan.baidu.com/s/1Z-WhRdnVS--ZZYuhAKyKJw?

提取碼: z4bn?

大家要覺得有幫助到你，可以點(diǎn)個贊支持一下，謝謝。