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

 

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

 

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

 

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

 

 

 

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

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

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

 

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

 

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

 

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

 

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

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

 

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

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

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

同樣神奇移動(dòng)～

修建路徑～使用軟件ae

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

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

同樣路徑動(dòng)畫在ae中相對(duì)簡(jiǎn)單。