本次教程是principle的晉階篇！

或者說是動(dòng)效demo的教程更貼切。因?yàn)樵趯?shí)現(xiàn)一款動(dòng)效的時(shí)候常常用到的不止一款軟件。今天的案例三合一，用到了AE PS等軟件配合principle去實(shí)現(xiàn)交互動(dòng)效。我認(rèn)為教程文章跟去網(wǎng)上自己看教程的區(qū)別在于?？梢苑窒砦业慕?jīng)驗(yàn)，思考，而不是單純教給大家一些軟件的操作，那樣做出來文章毫無疑義。希望特別是新手，能夠舉一反三做出自己的原創(chuàng)。但是在原創(chuàng)之前你需要大量瀏覽。需要理解動(dòng)效的規(guī)律。運(yùn)動(dòng)的曲線。你需要知道現(xiàn)在最好的動(dòng)效做成什么樣。在ui中的動(dòng)效，要盡量遵從ios跟Android的規(guī)范.

這個(gè)案例需要注意錄屏?xí)r的細(xì)節(jié)，畫板調(diào)大點(diǎn)，背景調(diào)成白色。錄制的時(shí)候不要錄制到卡片到邊緣，不然會(huì)出現(xiàn)穿幫。利用app實(shí)時(shí)預(yù)覽pp的動(dòng)效并且可以高保真交互。在進(jìn)入燈頁面的時(shí)候給燈圖片本身一個(gè)可以拖拽屬性（drag）跟調(diào)解頁面切換的屬性（page）一樣。

懸浮demo。

這個(gè)動(dòng)效利用drivers滑動(dòng)老司機(jī)切換頁面。切換的同時(shí)背景顏色有變化。如文章初篇中講到到頁面切換。

在配合tap點(diǎn)擊事件跳轉(zhuǎn)到其它頁面。頁面切換后手表有個(gè)旋轉(zhuǎn)跟位移的變化。神奇移動(dòng)。

這個(gè)動(dòng)效在進(jìn)入數(shù)據(jù)頁面的時(shí)候，圖表從右邊到左自動(dòng)進(jìn)場的一個(gè)demo，用到的是pp中的auto，頁面自動(dòng)跳轉(zhuǎn)。把圖表做的很長，這時(shí)候畫板就起到了一個(gè)蒙板的作用。就形成了這種障眼法。

很多同學(xué)說炫酷的動(dòng)效為什么在應(yīng)用中見不到。這不就是模擬的探探的交互嗎。利用dervers老司機(jī)切換頁面，切換的時(shí)候卡片旋轉(zhuǎn)，位移。其它元素透明度跟位置的變化讓整個(gè)交互豐富與和諧。

tap點(diǎn)擊，圖片放大 位移。

這個(gè)跟上面類似探探的案例相同。只不過把老司機(jī)橫向移動(dòng)改成了縱向，那么給元素在drivers軸上添加效果的時(shí)候就不是x屬性了，應(yīng)該是y。還是那句話，舉一反三～帶著思考去創(chuàng)新吧。