6. 12 Principle of Animation
1981년 The Illusion of Life: Disney Animation
Ollie Johnston Frank Thomas
https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation
7. 4 Principle of Animation
[1/ 4] Straight ahead action and pose to pose
https://www.creativebloq.com/advice/understand-the-12-principles-of-animation
8. 4 Principle of Animation
[2/ 4] Slow in slow out
https://www.creativebloq.com/advice/understand-the-12-principles-of-animation
9. 4 Principle of Animation
[3/ 4] Timing
https://www.creativebloq.com/advice/understand-the-12-principles-of-animation
10. 4 Principle of Animation
[4/ 4] Secondary Action
https://www.creativebloq.com/advice/understand-the-12-principles-of-animation
14. Easing Function
View가 나타날 때는?
Ease Out
[150 - 350 ms]
View가 사라지는 경우는?
Linear or Ease In
[100 - 150 ms]
Timing 가이드
UI Component:
150 - 350ms
화면전환:
350 - 1000ms
일반적으로 사용하는 규칙
27. [4 / 4] Interrupt an Animation
UIPropertyAnimator
iOS 10 이상 사용 가능
reverse Animation
pause, continue
WWDC 2017
Advances in UIKit
Animations and Transitions
28. [4 / 4] Interrupt an Animation
UIPropertyAnimator
fractionComplete
- 0: Start Animation, 1: End Animation
WWDC 2017
Advances in UIKit
Animations and Transitions
continueAnimation
- timing과 durationFactor 변경 가능
29. Reference
Sites
Google Fundamentals Design and UX
Apple Core Animation Guide
Disney 12 Principle Animations
https://easings.net
Books
Raywenderlich iOS Animation Book
iOS Core Animation: Advanced Techniques
Youtube
Coding Math
WWDC
2017 Advances in UIKit Animations and Transitions