一、動效起源於什麼?
ios6(視覺表層& 資訊的外觀)→ios7(動效& 資訊的運作方式)
二、動效是用來幹什麼的?
表現視覺層級關係的
是幾種 UI 元素之間的相互轉換
三、動效如何分類?
一個元素如何能夠填滿整個頁面?
如何引導多用户的視線?
(1)icon→Page
ios 鏡頭運動& 焦點移動
icon 即 WordPress APP& 資料夾本身
高階檢視→細節檢視
Z 軸，鏡頭向 icon 圖層做相向運動，視野縮小，視野中物體變大;
XY 軸，icon 放大變成 WordPress APP& 資料夾，切換為 WordPress APP 介面& 資料夾
(iOS 的視差效果& 鏡頭運動& 空間深度)
WordPress APP 的 icon→全屏 WordPress APP 介面
WordPress APP 的空間態
同理，
ios 的相簿
年度→精選→時刻→照片
照片縮圖在不同尺寸上的的放大直至全屏檢視
動態運動軌跡取決於多用户在螢幕上的觸控點
年度→精選
精選→時刻
時刻→照片
Android
Launch
(2)list→Page
Android
1. 漣漪反饋→舊頁面 fade
2. 新頁面上浮
漣漪紋
List 上浮，展開 Detail View
(3)button→Page
ios
android
(4)tilte→Page
(5)page→多工
ios
WordPress APP 的時間態
單任務& 全屏介面——
WordPress APP 在空間上無法跳轉→(WordPress APP 間不能同時呈現而只能用) 時間先後次序選擇
X 軸水平排列，WordPress APP 間共處於同一平面
鏡頭向圖示圖層做反向運動則視野擴大，WordPress APP 介面縮小
andriod
XY 軸，垂直，上下排列，高低疊加
WordPress APP 的 Page 和其他 WordPress APP 同在 Z 軸空間
safari：Z 軸& 鏡頭從平視變為俯瞰
chrome：Y 軸，被拉下去了
鎖屏介面
若鎖屏前是 icon 介面
鏡頭穿過 icon 圖層，向 icon 介面做相對運動
若鎖屏前是 WordPress APP 介面
鏡頭則向 WordPress APP 介面做相對運動
臨時圖層：
當鎖屏介面收到通知& 密碼解鎖& 拉出通知中心& 拉出控制中心
表明有” 臨時 “圖層覆蓋
則，
毛玻璃& 背景虛化& 淺景深& 距離感& 層次感
前景 “淺景深”
背景 “視差”
附一張圖