最近在工作上做了一個底部圖標——圈子：

點擊動效如下：

在整個制作的過程中總結了一些小經驗，今天分享給大家：

• 1.不能只是縱向形變
• 2.你的中心點別放錯了
• 3.為了生動，除了位移變化，長度也要變化
• 4.豐富更多的細節

1.不能只是縱向形變  

最開始中間的兩個圓形做的效果是這樣的:

總感覺不夠q彈，不夠自然，后來找了一下原因，原來是因為我的形變只有縱向的拉伸。我們隨便看兩幀的數值：

只有縱向也就是y軸數值在變化。

我們試想下，如果一個有彈力的物體被壓扁，除了高度變矮以外，是不是橫向也會變胖，所以只有縱向變化就不符合自然規律，所以才會看起來不自然。

于是我做了一些調整，除了縱向變化，橫向數字也隨之調整，調整后的效果如下：

為了讓大家更加清晰的看清效果，我們可以再看下兩個對比圖：

是不是后面的更加自然一些！

2.你的中心點別放錯了 

在每個圖層都會有中心錨點：

這個大家應該都知道，錨點為止不一樣，那形成的動效肯定也是不一樣的。

在k動畫之前，一定要想清楚物體的中心點應該放在那里，并不是所有的動畫中心點都是在物體中心的。

比如我們這個動畫，類似于你用手去按這個物體，然后物體下面是一個地面：

在你用力的時候，物體與地面接觸的地方成為受阻力的開始，也就是形變的開始，所以我們的中心點就應該是物體與地面接觸的地方：

我們可以看一下“錨點在物體中心”與“錨點在與地面接觸的地方”，二者的區別：

錨點在物體中心：

錨點在與地面接觸的地方：

很顯然，后者才符合單手指擠壓的現實規律，才能得到你想要的結果！

3.為了生動，除了位移變化，長度也要變化 

以前做的移動的動畫，基本就是位置有個回彈的動畫，比如下面這種：

這次這個線條有點不一樣，除了位移的上回彈，長度還會有微小變化，從短變長，再變短，我們可以看下有長度變化和沒長度變化的區別：

仔細觀察，你會發現，前者會更有細節，更Q彈！

4.豐富更多的細節 

做到這里，大概的效果是這樣的：

當然，還可以繼續想辦法豐富細節，比如那兩個小線條冒出來之前，先冒出來更小的線條，豐富層次：

這樣可以讓整體更加熱鬧，更加耐看一些。

總結 

以上就是這個小動效過程中的一些小思考，希望各位小伙伴可以活學活用，做出更好的作品，在視覺、體驗方面為自己所做的產品貢獻一份微薄之力！

轉載聲明：本文來源于網絡，不作任何商業用途