全篇1400字左右，預(yù)計閱讀時間為3分鐘

為什么要學(xué)習(xí)動效？

UI的崗位需求需要復(fù)合型人才，UI崗位除了本職崗位的視覺部分，上面承接交互設(shè)計，下面承接開發(fā)。承上啟下，都很有必要將高保真動起來。且動效的引入會提高提案通過率。

交互崗位特有的“講故事”陳述特點，用動畫把各個頁面邏輯串聯(lián)起來，可進行最小產(chǎn)品開發(fā)測試以及小范圍的可用性測試等。最后，基于情感化設(shè)計，在交互設(shè)計中運用動效，達到優(yōu)化用戶體驗的目的。

最后可以預(yù)防老年癡呆和增加邏輯思維，作用和打麻雀是一樣的效果。畢竟據(jù)研究表明，人的腦細胞是死一個少一個，如果不用盡豈不是浪費。

先看看Principle可以做什么

Principle的好在哪？

首先，Principle和keynote和AE的思路很像，全程區(qū)域可視化的操作，而不是背后一堆代碼來實現(xiàn)。

其次，操作界面和sketch很像，且支持OG和Sketch素材的復(fù)制粘貼。

再次，Principle基于蘋果的Core Animation，也就是說做出的動畫，動畫參數(shù)開發(fā)可以很容易調(diào)出來。

再再次，可以在PC、Phone上面實時預(yù)覽，動畫可以直接輸出視頻、gif

哪些人適合學(xué)習(xí)？

1. 不會Javas cript/Coffees cript的人 所以可以忽略掉學(xué)習(xí)Framer Studio

2. 會些AE的人，但是又覺得炫技不能進行動畫交互

3. 覺得flinto不夠用的人

4. 覺得Proto pie太復(fù)雜的人

5. 。。。

Principle的核心要素有哪些？

要素就四點：

1.事件Events

2.動畫Animation

3.連續(xù)的交互Continued Interactions

4.聯(lián)動Drivers

事件

事件觸發(fā)器是用于不同畫板之間的轉(zhuǎn)場，有點擊、長按、滾動開始、滾動釋放、滾動結(jié)束、拖拽開始結(jié)束、按下、抬起、鼠標(biāo)劃入畫出、自動幾種形式。

動畫

當(dāng)觸發(fā)事件發(fā)生時 (必須是兩個畫板圖層之間)，Principle會自動創(chuàng)建兩個畫布之間都用的圖層之間的逐幀的補間動畫，逐幀的實現(xiàn)屬性間的變化。時間軸面板可以調(diào)節(jié)屬性的快慢、錯幀等。(點擊畫板上方的箭頭可以調(diào)出動畫面板)

連續(xù)的交互

是指單個畫板內(nèi)的三種交互形式，拖拽(drag)、滾動(scroll)、翻頁(pages)，可用范圍都有X軸、Y軸選擇

聯(lián)動

聯(lián)動是在一個類似時間軸(是以距離為計量單位的軸，和時間軸以時間為計量單位類似)上面用關(guān)鍵幀來鏈接不同的圖層之間的屬性變化，可以聯(lián)動控制角度、透明度、倒角、長、寬、位置、邊、陰影等

聯(lián)動必須需要聯(lián)動源，連續(xù)的交互里面的三種交互形式作為聯(lián)動源，才可以觸發(fā)聯(lián)動

有什么技巧嗎?

  1. 從Sketch導(dǎo)入的圖層如果是用了Mask是會被合并成位圖的，可以用群組的方式解決

  2. 復(fù)用的組件可以在圖層后面加 * ，這樣導(dǎo)入到Principle里面會自動轉(zhuǎn)為位圖

    

3. 導(dǎo)入到Principle時選擇的x1、x2、x3做動畫的時候沒有影響，但是在手機里面預(yù)覽如果倍率不對會出現(xiàn)模糊

4. Sketch導(dǎo)入Principle要求兩個軟件都是打開狀態(tài)，默認(rèn)導(dǎo)入Sketch打開置于最頂層的文件

5. 添加觸發(fā)事件時(閃電標(biāo)志，然后拖出的箭頭)，指向自己所在的Artboard，將快速復(fù)制一個自己所在的Artboard

6. 按住Command，出現(xiàn)旋轉(zhuǎn)標(biāo)志就可以旋轉(zhuǎn)圖層

7. 調(diào)節(jié)左側(cè)面變的屬性的時候，下面的輸入框可以拖動改變數(shù)值

8. 聯(lián)動和動畫的區(qū)別是，一個調(diào)節(jié)位置然后屬性變化，一個是調(diào)節(jié)時間的先后順序以及快慢，以及動畫曲線

9. 聯(lián)動調(diào)節(jié)的時候，時間軸一定要復(fù)原，不然預(yù)覽的時候回出錯

10. 輸出的動畫可以放在ps里面加到UI樣機輸出預(yù)覽圖

有些什么學(xué)習(xí)資源？

1. 中文版Principle學(xué)習(xí)文檔 、

http://principleux.com/principle-chinese-document/#Drivers

2. Dribbble 上面的案例

https://dribbble.com/search?q=Principle

3.官方模板庫

http://principletemplates.com/

4.源文件資源包(超過200個源文件)

鏈接：https://pan.baidu.com/s/1URh7qV9xW7AHWA_7cVseEw

密碼：464n

5. B站視頻教學(xué)

https://search.bilibili.com/all?keyword=Principle&from_source=banner_search

學(xué)習(xí)還需要什么工具條件？

1.最好安裝Sketch，并盡可能的了解，因為Principle直接導(dǎo)入Sketch素材，甚至可以直接粘貼復(fù)制

2. Mac系統(tǒng)的Preview，可以將Gif分拆成每幀頁面，這樣學(xué)習(xí)別人動畫的時候可以用到，細致到每一幀，才能體會動畫的精妙。Dribbble上很多大人甚至?xí)ò胩靵碚{(diào)整動畫。Windows系統(tǒng)推薦使用 愛奇藝的圖片查看器，也可以分拆

3. 需要Mac系統(tǒng)的機子，或者系統(tǒng)(黑蘋果，可以在win下用虛擬機安裝，或者直接安裝(有需要的同學(xué)可以私信))

4. 沒有軟件的同學(xué)可以到 xclient.info 這個網(wǎng)站很多好軟件下載。

下期通過分拆步驟講解如何用Principle做下面這個動畫

附件包含 Sketch文件以及Principle源文件，可下載研究，謝謝！