The Fundamentals of User Interface Animation

Presented by Joshua Oluwagbemiga at the usable meetup.

Transcript

1. UI Animations The Fundamentals of by Joshua Oluwagbemiga @joaccord
2. Principles are the underlying premises and rules of function giving rise to any number of techniques. These elements remain consistent, no matter what is happening. FOOD FOR THOUGHT Tyler Waye @joaccord
3. This is the implementation of motion in order to enhance the overall presentation and interactivity of a product. WHAT IS UI ANIMATION Corey Devine, Oho @joaccord
4. Motion helps make the UI expressive and easy to use. WHAT IS UI ANIMATION Google Design, material.io @joaccord Informative Focused Expressive
5. The Timeline @joaccord FUNDAMENTAL
6. The timeline contains the animation controls, organises elements in a project and animates them using keyframes. TIMELINE @joaccord
7. General Anatomy TIMELINE @joaccord 0s 1s 0.5s Circle Square
8. A keyframe is a location on the timeline that holds property information of an element. TIMELINE @joaccord
9. Properties are object parameters that can be animated. TIMELINE @joaccord Position-X Property: 100px - 700px Size Property: 60px - 180px
10. Property Examples TIMELINE @joaccord Position Scale / Size Rotation Color Border Radius Opacity
11. Speed & Timing @joaccord FUNDAMENTAL
12. This refers to how fast or how slow specific UI transitions should happen. Speed adjustments make transitions responsive and smooth. SPEED & TIMING @joaccord
13. The Curve or Graph Editor SPEED & TIMING @joaccord Y Position Time Linear Ease
14. Understanding motion curves SPEED & TIMING @joaccord Progression Time 0s 1s 0% 100%
15. Linear Motion SPEED & TIMING @joaccord Y Position Time 0s 1s 0px 200px Linear
16. Bézier motion curves SPEED & TIMING @joaccord Y Position Time 0s 1s 0px 200px Ease Both
17. Easing @joaccord FUNDAMENTAL
18. This is a way to adjust an animation’s rate of change. Easing allows transitioning elements to speed up and slow down, rather than moving at a constant rate. EASING @joaccord Google Design, material.io
19. Linear vs Easing EASING @joaccord Linear Ease ! !
20. Linear vs Easing - Example EASING
21. The Ease EASING @joaccord Y Position Time 0s 1s 0% 100%
22. Ease In EASING @joaccord Y Position Time 0s 1s 0% 100%
23. Ease Out EASING @joaccord Y Position Time 0s 1s 0% 100%
24. Ease In Ease Out EASING @joaccord Y Position Time 0s 1s 0% 100%
25. Thank You @joaccord