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

 

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

 

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

 

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

 

 

 

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

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

 這個交互用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的畫板跳轉方式。就是自動的意思。通過控制animate軸讓兩個或兩個以上的頁面進行不停的自動切換。他們之間圖形的變化會產(chǎn)生自動的補間。類似于flash中的傳統(tǒng)補間。

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

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