第3天——動畫的基本邏輯
第三天
今天的分享包含四部分：
1.Principle中對象的四個交互屬性
2.Principle動畫觸發條件
3.動畫的分解
4.符合現實物理世界的動畫
本次的課程理論知識比較多，可能會略顯枯燥，但是做什麼都要是要有堅實的理論基礎的，這樣才能最大化的發揮軟體性能，做出更加酷炫的動畫，下面我們開始今天的課程。
1.Principle中對象的四個交互屬性
物件的交互屬性，包括4個狀態，橫軸縱軸都可以調節。如圖：
Static（靜止的，靜態的）
這個是所有物件的默認狀態，這個物件是不能被移動的。
Drag（拖動）
例如做懸浮窗
Scroll（滾動）
我們看到的大部分頁面都是Scroll組件，例如瀑布流的頁面，有了scroll才有了我們「刷」手機的的動作。
Page（翻頁）
這個概念不是很好理解，暫且理解成翻頁吧，有了這個交互的概念，我們可以容易的做到下面的效果：
2.Principle動畫觸發條件
講在前面，點擊事件的邏輯分析，我們在PC上使用滑鼠時，滑鼠的一個點擊會被分解成多個動作，
滑鼠按下
滑鼠抬起，
這樣完成了一次滑鼠點擊的動作，除此之外還有
滑鼠移動，
在3Dtouch中還有用力按壓，增加了壓力感應；
滑鼠懸浮在某物體上方，（移動端不存在）
滑鼠移出某物體上方，（移動端不存在）
以上，多個動作的組合就形成了多種交互方式，也就是我們要學習的動畫觸發條件。
Principle將所有的動畫觸發條件都集合到了閃電按鈕中：
Principle的強大也表現在這裡，這樣的設計可以讓系統做到：用戶在同一個控制項上執行不同的操作後，出現不同的動畫效果或跳轉到不同的頁面。
下面我們來講解一下每個按鈕的意思，字面可以理解的我就不解釋了。
1 Tap（點擊）
滑鼠按下+滑鼠抬起
2 Long Press（長按）
交互代碼：++能理解把
3 Scroll Begin（滾動開始）
按下+移動
4 Scroll Release（滾動釋放）
移動+抬起
5 Scroll End（滾動結束）
這裡要區別一下4 滾動釋放，這個滾動是物件滾動完畢，不是操作的結束，例如我們快速滾動一個頁面，鬆手後，頁面還會繼續滑動，頁面結束後才會觸發的事件。
6 Drag Begin（開始拖拽）
按下+移動，這個跟三、滾動開始是一個交互動作，區別就在於交互動作施加的對象上了。對象是Drag屬性就適用Drag，是Scroll就是Scroll。
7 Drag End（拖拽結束）
移動+抬起。同樣區別於四、滾動釋放
8 Touch Down（按下）
按下，使用場景：例如按下某個按鈕後，按鈕的樣式變成被按下樣式。
9 Touch Up（抬起）
抬起，使用場景同上，按鈕按下後鬆手，顯示一個回彈樣式。
10 Hover Inside（滑鼠在某圖層內）
11 Hover Outside（滑鼠在某圖層外）
個人覺得上面兩個觸發條件並不適用移動端的交互，應用的時候大家也可以使用
12 Auto（自動）
這個命令相當於在某個物件（圖層）上寫了自動執行的腳本，配合時間軸的使用，可以完成倒計時類的功能，是一個常用的觸發條件。
三.動畫的分解
我們平時看到的絕大部分動畫都是可以分解成一系列簡單動畫的。
動作包括：
出現
消失
位移（priciple只有兩個軸，要三維動畫的同學可以藉助一些陰影變化去完成自己的創意）
旋轉（只有兩個軸，要實現三維的旋轉很難，可以藉助變形效果來實現，但是很難像AE那樣天生就帶三軸那麼容易操作）
變形
縮放
透明度變化
陰影變化
具體實現以上動作我們可以調節以下的參數來完成那些關鍵動作。
這裡補充一下，Principle的補間動畫是基於圖層名稱一樣的條件下，兩個畫板間在跳轉時，只有同樣名稱的圖層才會實現補間動畫！
A畫板向B畫板跳轉時，A畫板中獨有的圖層會做消失動作，B畫板中獨有的圖層會做出現動作，並且都是瞬時動作。
分享到這裡，掌握之前所有的知識點，我們其實可以完成我們所有想要的效果了
容我賣個萌
4,符合現實物理世界的動畫
我們之前講到的所有的補間動畫都是系統來幫我們做的，動作的快慢／節奏都是系統自帶的，這部分其實也是我們可以調節的。
節奏的不同
節奏的不同體現在速度的不同，看看下面這個曲線，就是調節速度的曲線，曲線的斜率代表物體運動的速度。
Principle自帶了一些運動速度曲線供我們使用，我們也可以根據自己的需求去調節斜率。
物理世界中的運動很多帶有加速度，我們盡量調節的我們的圖層在運動過程中符合人們平時的認知世界，
例如一個彈跳動作，在最高點的速度應該為0，在最低點的速度應該最大，過程中的應該是一個勻加速運動。
一個物體的從移動到停止，最好也是速度慢慢減到0，這樣會讓我們的動畫變得很真實。
今天的分享包括交互動作的講解和動畫製作的理論，希望對大家有所幫助。
有什麼疑問歡迎留言，歡迎關注，謝謝。
※如何使用華碩門店寶進行商品入庫和商品出庫
※我的第一篇10000＋文章：我的溫柔，不動聲色
※瀟瀟近體詩作品
※宋代磁州窯梅瓶拍賣市場行情如何
※誰都不想接 奧運該咋整？
TAG:公眾號 |