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

 

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

 

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

 

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

 

 

 

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

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

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

 

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

 

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

 

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

 

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

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

 

卡片移動 列表緩慢進(jìn)程，都需要控制animate軸。

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

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

同樣神奇移動～

修建路徑～使用軟件ae

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

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

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