入門Principle一周，致力于把適合用Principle實(shí)現(xiàn)的（簡單大方有用的）動(dòng)效上手做一遍，弄清實(shí)現(xiàn)的原理步驟，以及為何要這樣呈現(xiàn)。一個(gè)經(jīng)典耐用的動(dòng)效一定有它吸引人的地方。

不得不說，只有親自做了才能看清那些程序運(yùn)轉(zhuǎn)中跳動(dòng)的微小細(xì)節(jié)，很精致，很美。

卡片下落效果常見于社交、新聞?lì)恆pp，在進(jìn)入頁面時(shí)用漸入的卡片視圖展示主要內(nèi)容。

側(cè)滑菜單來源于Google原生控件Drawer Layout（抽屜式布局），點(diǎn)擊右上角hanburger菜單圖標(biāo)，菜單右推進(jìn)入頁面。

整體效果如下：

為方便演示，畫板間全部用auto跳轉(zhuǎn)方式顯示為自動(dòng)播放。

第一個(gè)畫板為空白，但實(shí)際包含即將掉落的全部圖層，這些圖層透明度為0%。

這說明一點(diǎn)：Principle中，只要是有動(dòng)畫效果的圖層都需要在上一畫板中“隱身”出現(xiàn)。如果上一狀態(tài)中沒有，圖層會(huì)突兀地顯現(xiàn)。

卡片掉落動(dòng)畫

在Animate動(dòng)畫中，首先掉落title和icon，然后從上到下依次掉落卡片，Y變化為Spring彈跳效果，所有卡片在0.3s內(nèi)增加同一幅度?？ㄆg錯(cuò)開大約0.1s的時(shí)間。

菜單側(cè)移效果

首先明確一點(diǎn)，Principle中，不同artboard里相同名稱的圖層被看做同一物體，在動(dòng)作中自動(dòng)過渡為動(dòng)畫。而artboard 1中的所有控件做右移很麻煩，因此把它截為圖片進(jìn)行右移。但圖片和原先圖層不是同一物體，不能過渡為動(dòng)畫，所以在中間插一幀，把與圖層一模一樣的圖片放在其中。這樣，跳轉(zhuǎn)到側(cè)移的畫板時(shí)就可以自然右移了。

側(cè)和卡片掉落一樣，側(cè)移菜單中的A,B,C,D,E從先到后在Y上變化。原先的menu icon中兩橫分別做45°和135°的旋轉(zhuǎn)，變?yōu)椴藛沃械腸ancel icon。圖片除了X軸的變化外，scale也變小為0.7。

最后一幀，畫板左移覆蓋菜單，整個(gè)動(dòng)畫就完成了。

看得再多不如動(dòng)手一試，

原型請(qǐng)見：

鏈接: https://pan.baidu.com/s/1o8ynvia?

密碼: 6nse