首先新手朋友們不要誤解了，產(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晉階篇。敬請期待～
文章開頭提到了 以下大部分案例來源自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的畫板跳轉(zhuǎn)方式。就是自動的意思。通過控制animate軸讓兩個或兩個以上的頁面進行不停的自動切換。他們之間圖形的變化會產(chǎn)生自動的補間。類似于flash中的傳統(tǒng)補間。
水波紋的緩動在ae里相對更容易實現(xiàn)。注意編輯速度圖表，控制速度不要太強硬。
同樣路徑動畫在ae中相對簡單。
