1. Principle中對象的四個交互屬性

物件的交互屬性，包括4個狀態(tài)，橫軸縱軸都可以調節(jié)。如圖：

Static（靜止的，靜態(tài)的）：這個是所有物件的默認狀態(tài)，這個物件是不能被移動的。

Drag（拖動）：例如做懸浮窗

Scroll（滾動）：我們看到的大部分頁面都是Scroll組件，例如瀑布流的頁面，有了scroll才有了我們“刷”手機的的動作。

Page（翻頁）：這個概念不是很好理解，暫且理解成翻頁吧，有了這個交互的概念，我們可以容易的做到下面的效果：

2. Principle動畫觸發(fā)條件

講在前面，點擊事件的邏輯分析，我們在PC上使用鼠標時，鼠標的一個點擊會被分解成多個動作，

①鼠標按下

②鼠標抬起，

 

這樣完成了一次鼠標點擊的動作，除此之外還有

③鼠標移動，

④在3Dtouch中還有用力按壓，增加了壓力感應；

鼠標懸浮在某物體上方，（移動端不存在）

鼠標移出某物體上方，（移動端不存在）

以上，多個動作的組合就形成了多種交互方式，也就是我們要學習的動畫觸發(fā)條件。

Principle將所有的動畫觸發(fā)條件都集合到了??閃電按鈕中：

Principle的強大也表現(xiàn)在這里，這樣的設計可以讓系統(tǒng)做到：用戶在同一個控件上執(zhí)行不同的操作后，出現(xiàn)不同的動畫效果或跳轉到不同的頁面。

下面我們來講解一下每個按鈕的意思，字面可以理解的我就不解釋了。

1. Tap（點擊）：①鼠標按下；②鼠標抬起；

2. Long Press（長按）：交互代碼：① ① ②  ??能理解把

3. Scroll Begin（滾動開始）：①按下；③移動；

4. Scroll Release（滾動釋放）：③移動；②抬起；

5. Scroll End（滾動結束）：這里要區(qū)別一下4.滾動釋放，這個滾動是物件滾動完畢，不是操作的結束，例如我們快速滾動一個頁面，松手后，頁面還會繼續(xù)滑動，頁面結束后才會觸發(fā)的事件。

6. Drag Begin（開始拖拽）：①按下 ③移動，這個跟3.滾動開始是一個交互動作，區(qū)別就在于交互動作施加的對象上了。對象是Drag屬性就適用Drag，是Scroll就是Scroll。

7. Drag End（拖拽結束）：③移動 ②抬起。同樣區(qū)別于4.滾動釋放

8. Touch Down（按下）：①按下，使用場景：例如按下某個按鈕后，按鈕的樣式變成被按下樣式。

9. Touch Up（抬起）：③抬起，使用場景同上，按鈕按下后松手，顯示一個回彈樣式。

10. Hover Inside（鼠標在某圖層內）

11. Hover Outside（鼠標在某圖層外）

個人覺得上面兩個觸發(fā)條件并不適用移動端的交互，應用的時候大家也可以使用

 

12. Auto（自動）：這個命令相當于在某個物件（圖層）上寫了自動執(zhí)行的腳本，配合時間軸的使用，可以完成倒計時類的功能，是一個常用的觸發(fā)條件。

3. 動畫的分解

我們平時看到的絕大部分動畫都是可以分解成一系列簡單動畫的。

動作包括：

• 出現(xiàn)

• 消失

• 位移（priciple只有兩個軸，要三維動畫的同學可以借助一些陰影變化去完成自己的創(chuàng)意）

• 旋轉（只有兩個軸，要實現(xiàn)三維的旋轉很難，可以借助變形效果來實現(xiàn)，但是很難像AE那樣天生就帶三軸那么容易操作）

• 變形

• 縮放

• 透明度變化

• 陰影變化

具體實現(xiàn)以上動作我們可以調節(jié)以下的參數(shù)來完成那些關鍵動作。

這里補充一下，Principle的補間動畫是基于圖層名稱一樣的條件下，兩個畫板間在跳轉時，只有同樣名稱的圖層才會實現(xiàn)補間動畫！

A畫板向B畫板跳轉時，A畫板中獨有的圖層會做消失動作，B畫板中獨有的圖層會做出現(xiàn)動作，并且都是瞬時動作。

分享到這里，掌握之前所有的知識點，我們其實可以完成我們所有想要的效果了

4. 符合現(xiàn)實物理世界的動畫

節(jié)奏的不同

節(jié)奏的不同體現(xiàn)在速度的不同，看看下面這個曲線，就是調節(jié)速度的曲線，曲線的斜率代表物體運動的速度。

Principle自帶了一些運動速度曲線供我們使用，我們也可以根據(jù)自己的需求去調節(jié)斜率。

物理世界中的運動很多帶有加速度，我們盡量調節(jié)的我們的圖層在運動過程中符合人們平時的認知世界，

例如一個彈跳動作，在最高點的速度應該為0，在最低點的速度應該最大，過程中的應該是一個勻加速運動。

一個物體的從移動到停止，最好也是速度慢慢減到0，這樣會讓我們的動畫變得很真實。

今天的分享包括交互動作的講解和動畫制作的理論，希望對大家有所幫助。