一個簡單動效的活學活用

總聽見有人說:“做設(shè)計要學會活學活用”,但如何才能活學活用,這才是問題的關(guān)鍵!

所以今天菜心就來用一個簡單的水波紋動效和大家聊聊這個問題。

大綱如下:

1.水波紋的動效原理

2.我們學的不是水波紋

3.總結(jié)

1.水波紋的動效原理

之前我有發(fā)過一個水波紋擴散的動效:

但是沒有講解原理,今天我們先來說說這個動效的原理,如果你動效很厲害,可以直接跳過了。

做一個循環(huán)動效最關(guān)鍵的一點,就是開始和結(jié)束的狀態(tài)是一摸一樣的:

無論過程怎么變,你必須要保證這兩個狀態(tài)一樣,這樣才能無縫循環(huán)起來,這是第一個知識點。

那過程是如何變化的呢?

其實這個動效一共有四個圈,只是最開始的狀態(tài),最里面的小圈是全透明的:


為了讓大家更容易理解,我們把這四個圓圈用序號來表示,從里到外為1、2、3、4:



接下來我們就可以分析,這個動效過程發(fā)生了什么?其實很簡答,就是1變成了2,2變成了3,3變成了4,4變成了全透明。

也就是最后的狀態(tài),我們只能看見2、3、4了,而最開始的狀態(tài),我們也只能看見2、3、4(1是全透明的)。一個循環(huán)就這樣誕生了。

至于1如何變成2,2如何變成3?其實變化的屬性就只有大小和透明度,讓兩個圓的大小、透明度一樣就ok了。

當然,做這個動效,還是需要有一些動效軟件的基礎(chǔ)(如AE),如果不會的話可以先明白原理,留著以后備用!

2.我們學的不是水波紋

這一部思考其實挺重要的,如果我們僅僅把這種動效局限于水波紋的效果,那以后用到的可能性就會大大減少,所以我們可以進一步將這個動效提煉一個關(guān)鍵詞——擴散。

這樣,能夠用到擴散效果的地方就比較多了,例如,太陽光的擴散:


雷達信號的擴散:



魅族官網(wǎng)動效


再比如,水波紋擴散的效果不一定是圈圈,條形的波紋也一樣可以實現(xiàn):


動效的原理都是一樣的。

總結(jié)

如果我們只學案例的表面,那永遠都學不完,因為案例是無窮無盡的,但如果能思考總結(jié)案例背后的共性和原理,我們就可以舉一反三,這樣成長的速度必然會快出很多,而且這也是提高我們“透過現(xiàn)象看本質(zhì)”的一種正確鍛煉方法!

對嘛?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容