1.
백성
욱
Behind Scene of
Delightful Experience

2.
Seamless User Experience
• 12 Principle of Animation
• Easing and Timing
Modern UI 4 Patterns
• Launch Animation
• Loading Animation
• UIViewController Animation
• Interrupt an Animation
Agenda

3.
Seamless User eXperience

4.
예제 이미지 예제 이미지

5.
Frame, Timing and Easing

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

11.
Easing and Timing

12.
Easing Function
Animation의 Timing과 Easing 특성 이해하고 사용하기

13.
Easing Function
Animation의 Timing과 Easing 특성 이해하고 사용하기

14.
Easing Function
View가 나타날 때는?
Ease Out
[150 - 350 ms]
View가 사라지는 경우는?
Linear or Ease In
[100 - 150 ms]
Timing 가이드
UI Component:
150 - 350ms
화면전환:
350 - 1000ms
일반적으로 사용하는 규칙

15.
Modern UI

16.
[1 / 4] Launch Animation

17.
[1 / 4] Launch Animation
Core Animation
• UIBezierPath
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 36" version="1.1" height="36px">
<defs>
<linearGradient id="a" x2="50%" x1="50%" y2="100%">
<stop stop-color="#F88A36" offset="0"/>
<stop stop-color="#FD2020" offset="1"/>
</linearGradient>
</defs>
<path d="m29.885 33.047c-4.667 2.696-11.084 2.973-17.54 0.206-5.2273-2.224-9.5646-6.117-12.345-
10.565 1.3346 1.112 2.8916 2.002 4.5598 2.78 6.6672 3.125 13.333 2.911 18.024 0.008-0.003-0.003-0.005-0.005-
0.007-0.008-6.673-5.116-12.345-11.789-16.571-17.238-0.8901-0.8898-1.5574-2.002-2.2247-3.0029 5.1159 4.671
13.235 10.565 16.126 12.234-6.116-6.451-11.566-14.458-11.344-14.236 9.676 9.787 18.685 15.348 18.685 15.348
0.298 0.168 0.528 0.308 0.713 0.433 0.195-0.496 0.366-1.011 0.51-1.545 1.557-5.672-0.222-12.123-4.115-17.461
9.008 5.4495 14.347 15.681 12.122 24.245-0.058 0.231-0.121 0.459-0.189 0.683 0.026 0.031 0.052 0.063 0.078

18.
Cubic Bezier Curve
Timing Function, CGPath 등 Animation에 다양하게 활용
Bezier Curve (Control Point에 따라 Cubic / Quadratic 으로 분류됨)

19.
[1 / 4] Launch Animation
Core Animation
• UIBezierPath
• CoreAnimation
• strokeEnd, colors, fillColor, opacity
• Clipping
CAAnimationGroup
CABasicAnimation "fillColor"
beginTime CACurrentMediaTime + 2

20.
[1 / 4] Launch Animation
Core Animation
• UIBezierPath
• CoreAnimation
• strokeEnd, colors, fillColor, opacity
• Clipping

21.
[2 / 4] Loading Animation

22.
[2 / 4] Loading Animation
Core Animation
• Gradient Layer
locations
Gradient의 각 Color의 위치 값을 세팅

23.
[2 / 4] Loading Animation
Core Animation
• Gradient Layer
locations
Gradient의 각 Color의 위치 값을 세팅

24.
[2 / 4] Loading Animation
Core Animation
• Gradient Layer
Gradient의 방향을 좌 -> 우 로 변경
Animation 반복 효과

25.
[3 / 4] UIViewController Animation
UIViewControllerAnimatedTransitioning

26.
[3 / 4] UIViewController Animation
UIViewControllerAnimatedTransitioning
forPresented
forDismissed

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