JS Conf Youtube錄影

Animation purpose

• making context clear (突顯內容)
• displaying hierarchies (顯現重點為誰)
• making usage intuitive (讓使用更直觀)
• artificial shortening of waiting time (製造等待時間較短的假象)

Movement Should Be

• Natural (自然)
• Predictable (可預測)
• Comprehensive (廣泛??)

Animation

• Has to be restraint(不濫用)
• Tell a Story (必須有目的性)
• Single Movement (單一動畫執行,多個物件同時動畫,焦點被分散)
• Pick a Hero & Who's the sidekick(主角為誰)

Principle Benefit 規範的優點

• more structure (更結構化、目的性強烈)
• usability test (同樣的動畫有統一的規範)
• user centered (以使用者角度作為出發點)
• more interdisciplinary exchange (跨學科?)

Developer's Pitfall 開發陷阱

• Performance (效能問題)
• Critical Rendering Path 瀏覽器渲染流程(重繪重排問題)
• GSAP 進階 Animation 框架 (使用框架優化)

參考資料

Summer桑莫 Critical Rendering Path