當前位置: 首頁 > 設計資訊 > 設計教程 > 正文

掌握了這一個小的案例,舉一反三可以做出十幾種不同的動效效果

2018-07-17 1578 0

首先新手朋友們不要誤解了,產(chǎn)品中的動效是用來表意的。給用戶傳遞信息。今天的動效包括我搜集的案例只是跟大家分享以及解析。動效的使用范圍已經(jīng)不單單在app中。閃屏,h5,電子海報,邀請卡,攝影作品,簡歷設計等等。甚至是跨界的融合。


 

principle的教程跟下面的案例要區(qū)分開,聲明下案例除了部分自己臨摹的大多是從principle動效網(wǎng)站跟dribbble采集下來的個人認為比較優(yōu)秀的作品。看案例為了增長見識,了解規(guī)律。很多案例無法用一款軟件實現(xiàn)~要注意配合


 

在實際落地產(chǎn)品中的動效考慮用戶體驗是不會有浮夸的效果的。至少國內(nèi)現(xiàn)在的上線產(chǎn)品都比較中國中矩。但是不排除未來隨著移動設備的升級甚至蛻變,有可能往所謂“浮夸”方向的發(fā)展趨勢,那可能是新的互聯(lián)網(wǎng)時代。


 

本次principle教程只是簡單的頁面切換,雖然方法簡單但是利用的好足以做出酷炫的啟動頁了。要讓大家學到到不單單是一個軟件的技法。希望大家能仔細看文案,能在對動效的理解或創(chuàng)意上起到一丁點小作用。下周會分享我在一些落地產(chǎn)品中的動效應用。principle晉階篇。敬請期待~


 

b8bc58204ed5a84a0e282b35a9e1.jpg


 

b5985820533ca84a0e282be74a4d.jpg


 

文章開頭提到了  以下大部分案例來源自principle動效網(wǎng),dribbble、behance等。

個人原創(chuàng)動作品效連接https://www.zcool.com.cn/work/ZMTg0NDY0NDg=.html

0b1e582048c7a84a0e282b2a815d.jpg

 這個交互用hype3 。PR沒有y軸的概念。無法做出3d透視效果.非要強硬做不是沒可能,配合ps邊角定位,把卡片修成兩張,命一樣的名字,可以做。


 

這個交互用hype3同樣簡單。,ae也可以實現(xiàn)卡片折紙的的效果。pr做不出折紙效果,控制animate的數(shù)值可以做模仿但是沒有y軸還是很麻煩,只建議大家學習它的運動規(guī)律。關于animate的重點過段時間整理教程再跟大家分享。


 

典型的pr動效。界面元素類似keynote的神奇移動。通過控制老司機就可以簡單實現(xiàn)。


 

這個動效可以借助gif圖或者視頻。比如從ae里做好mov的笑demo插入到pr中。單純用pr做是沒法出現(xiàn)融合的效果。


 

這個利用今天的知識完全可以實現(xiàn)~方法一樣具體怎么做要同學們開動腦筋~~

哈哈 是不是似曾相似,沒錯今天的教程是依據(jù)這個動效給大家做的演示~
 


 

卡片移動 列表緩慢進程,都需要控制animate軸。

后面的動效基本跟前面的類似。方法不一。一款好的動效實現(xiàn)起來有多種方式。

material design風格的界面 他的動效也是為了表意。貼合自然界的運動規(guī)律。這個動效中要注意緩動處理。

同樣神奇移動~

修建路徑~使用軟件ae

在pr中有個auto的畫板跳轉(zhuǎn)方式。就是自動的意思。通過控制animate軸讓兩個或兩個以上的頁面進行不停的自動切換。他們之間圖形的變化會產(chǎn)生自動的補間。類似于flash中的傳統(tǒng)補間。

水波紋的緩動在ae里相對更容易實現(xiàn)。注意編輯速度圖表,控制速度不要太強硬。

同樣路徑動畫在ae中相對簡單。


 


24
評論區(qū)(0)
正在加載評論...