The document discusses advanced animation techniques in iOS, focusing on Core Animation, UIView animations, and UIViewPropertyAnimator. It includes code snippets for creating animations using CABasicAnimation, CAKeyframeAnimation, and working with shapes using CAShapeLayer. Additionally, it highlights the use of Lottie and JSON-based animations along with the importance of user interactions in creating smooth transitions.

1. 1

2. 2
Animations
ON iOS

3. 3
• Animations
• CoreAnimation: control, shape layer
• UIViewPropertyAnimator
• Advanced Animations
• Transitions

4. 4

5. 5
• Wrong password
• Launch
• Open Settings App
• Bluetooth
• Switch Off/On
• Back

6. 6
0 100
view.frame.origin.x = 100

7. 7
0 100
view.frame.origin.x = 100

8. 8
0 100
view.frame.origin.x = 100 || time = 1.5

9. 9
0 100
view.frame.origin.x = 100 || time = 2.5
view.frame.origin.x = 100 || time = 2.5 || curve = .easeIn

10. 10
Timer.scheduledTimer(withTimeInterval: 1 / 60, repeats: true)
{ (_) in
self.applyAnimationStep()
}

11. 11
Timer.scheduledTimer(withTimeInterval: 1 / 60, repeats: true)
{ (_) in
self.applyAnimationStep()
}
displayLink = CADisplayLink(target: self, selector:
#selector(applyAnimationStep))
displayLink.add(to: RunLoop.current, forMode:
RunLoopMode.defaultRunLoopMode)

12. 12
Advanced Graphics and Animations for iOS Apps

13. 13

14. 14
CoreAnimation Timer-Based
• Optimization
• UIKit based
• Custom property animation
• State observing (< iOS10)
• Custom timing function (hi,
speed 👋 )

15. 15
CoreAnimation Timer-Based
• CoreAnimation
• UIView animations
• UIViewPropertyAnimator (iOS 10+)
• CADisplayLink
• POP
• All other external frameworks

16. 16
CoreAnimation

17. 17
Alexander Zimin – Анимация в iOS

18. 18
• Work with CALayer’s
• Shared for iOS/macOS
• Unfamiliar syntax
• Powerfull

19. 19
let animation = CABasicAnimation(keyPath: "position.x")
animation.duration = 1
animation.fromValue = animationView.layer.position.x
animation.toValue = 50
animationView.layer.add(animation, forKey: "name")
animationView.layer.position.x = 50

20. 20
let animation = CABasicAnimation(keyPath: "position.x")
animation.duration = 1
animation.fromValue = animationView.layer.position.x
animation.toValue = 50
animationView.layer.add(animation, forKey: "name")
animationView.layer.position.x = 50

21. 21
Presentation Layer Modal Layer

22. 22
0 100

23. 23
0 100

24. 24
0 100
view.frame.origin.x = 100

25. 25
• CABasicAnimation
• CAKeyframeAnimation
• CAAnimationGroup
• CASpringAnimation (iOS 9+)

26. 26
• bounds
• contents
• masksToBounds
• shadowColor
Animatable Properties (not all)

27. 27
Control animation

28. 28

29. 29
animation = CABasicAnimation(keyPath: "position.y")
animation.duration = 2
animation.fromValue = label.layer.position.y
animation.toValue = 30
label.layer.add(animation, forKey: "animation2")
label.layer.speed = 0
label.layer.position.y = 30

30. 30
label.layer.timeOffset = value * animation.duration
value from 0 to 1

31. 31
CAShapeLayer

32. 32

33. 33
shapeLayer = CAShapeLayer()
animation = CABasicAnimation(keyPath: "path")
animation.fromValue = firstPath.cgPath
animation.toValue = secondPath.cgPath

34. 34
shapeLayer = CAShapeLayer()
animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = 0
animation.toValue = 1

35. 35

36. 36
let firstPath = UIBezierPath(
roundedRect: CGRect(x: 100, y: 100, width: 100, height: 100),
byRoundingCorners: [.bottomRight, .topRight],
cornerRadii: CGSize(width: 30, height: 30)
)
let secondPath = UIBezierPath(
rect: CGRect(x: 100, y: 100, width: 100, height: 100)
)

37. 37
let firstPath = UIBezierPath(
roundedRect: CGRect(x: 100, y: 100, width: 100, height: 100),
byRoundingCorners: [.bottomRight, .topRight],
cornerRadii: CGSize(width: 30, height: 30)
)
let secondPath = UIBezierPath(
rect: CGRect(x: 100, y: 100, width: 100, height: 100)
)

38. 38

39. 39

40. 40
let firstPath = UIBezierPath()
firstPath.move(to: CGPoint(x: 0, y: 0))
firstPath.addLine(to: CGPoint(x: 60, y: 0))
firstPath.addQuadCurve(to: CGPoint(x: 100, y: 40), controlPoint:
CGPoint(x: 100, y: 0))
firstPath.addLine(to: CGPoint(x: 100, y: 60))
firstPath.addQuadCurve(to: CGPoint(x: 60, y: 100), controlPoint:
CGPoint(x: 100, y: 100))
firstPath.addLine(to: CGPoint(x: 0, y: 100))
firstPath.addLine(to: CGPoint(x: 0, y: 0))

41. let firstPath = UIBezierPath()
firstPath.move(to: CGPoint(x: 0, y: 0))
firstPath.addLine(to: CGPoint(x: 60, y: 0))
firstPath.addQuadCurve(to: CGPoint(x: 100, y: 40), controlPoint:
CGPoint(x: 100, y: 0))
firstPath.addLine(to: CGPoint(x: 100, y: 60))
firstPath.addQuadCurve(to: CGPoint(x: 60, y: 100), controlPoint:
CGPoint(x: 100, y: 100))
firstPath.addLine(to: CGPoint(x: 0, y: 100))
firstPath.addLine(to: CGPoint(x: 0, y: 0))
41

42. 42

43. 43
let secondPath = UIBezierPath()
secondPath.move(to: CGPoint(x: 0, y: 0))
secondPath.addLine(to: CGPoint(x: 100, y: 0))
secondPath.addLine(to: CGPoint(x: 100, y: 0))
secondPath.addLine(to: CGPoint(x: 100, y: 100))
secondPath.addLine(to: CGPoint(x: 100, y: 100))
secondPath.addLine(to: CGPoint(x: 0, y: 100))
secondPath.addLine(to: CGPoint(x: 0, y: 0))

44. 44
let secondPath = UIBezierPath()
secondPath.move(to: CGPoint(x: 0, y: 0))
secondPath.addLine(to: CGPoint(x: 100, y: 0))
secondPath.addLine(to: CGPoint(x: 100, y: 0))
secondPath.addLine(to: CGPoint(x: 100, y: 100))
secondPath.addLine(to: CGPoint(x: 100, y: 100))
secondPath.addLine(to: CGPoint(x: 0, y: 100))
secondPath.addLine(to: CGPoint(x: 0, y: 0))

45. 45

46. 46

47. 47
No such property

48. 48

49. 49

50. 50
let differenceInSize = label.font.pointSize /
anotherLabel.font.pointSize
self.anotherLabel.transform = CGAffineTransform(scaleX:
differenceInSize, y: differenceInSize)
self.anotherLabel.center = self.label.center
self.label.alpha = 1
self.anotherLabel.alpha = 0

51. 51
let differenceInSize = label.font.pointSize /
anotherLabel.font.pointSize
self.anotherLabel.transform = CGAffineTransform(scaleX:
differenceInSize, y: differenceInSize)
self.anotherLabel.center = self.label.center
self.label.alpha = 1
self.anotherLabel.alpha = 0
a a

52. 52
let differenceInSize = label.font.pointSize /
anotherLabel.font.pointSize
self.anotherLabel.transform = CGAffineTransform(scaleX:
differenceInSize, y: differenceInSize)
self.anotherLabel.center = self.label.center
self.label.alpha = 1
self.anotherLabel.alpha = 0

53. 53
propertyAnimation = UIViewPropertyAnimator(duration: 0.5,
curve: .easeIn) {
self.label.alpha = 0
self.anotherLabel.alpha = 1
self.label.center.y = 50
self.anotherLabel.center.y = 50
self.label.transform = CGAffineTransform(scaleX: 1 /
differenceInSize, y: 1 / differenceInSize)
self.anotherLabel.transform = CGAffineTransform.identity
}

54. 54
UIViewPropertyAnimator

55. 55
propertyAnimation = UIViewPropertyAnimator(
duration: 1,
curve: .easeIn,
animations: {
self.view.alpha = 0
}
)
propertyAnimation.startAnimation()

56. 56
• var isReversed: Bool { get set }
• var fractionComplete: CGFloat { get set }
• func continueAnimation(
withTimingParameters parameters:
UITimingCurveProvider?,
durationFactor: CGFloat)

57. 57
🕵

58. 58
class ObservableLayer: CALayer {
override func add(_ anim: CAAnimation, forKey key: String?) {
print(anim, key)
super.add(anim, forKey: key)
}
}

59. 59
animation = UIViewPropertyAnimator(duration: 2,
curve: .linear, animations: nil)
animation.addAnimations {
self.animationView.alpha = 0.2
}
animation.startAnimation()
animation.fractionComplete = 0.2
On Start
On Touch

60. 60
On Start

61. 61
<CABasicAnimation:0x610000024220; toValue =
0.20000000298023224; removedOnCompletion = 0;
delegate = <UIViewAnimationState:
0x7fe69e0094e0>; fillMode = both; timingFunction
= linear; duration = 2; fromValue = 1; keyPath =
opacity>
1
opacity

62. 62
opacity = 1 -> 0.2
duration = 2
timingFunction = linear
<CABasicAnimation:0x610000024220; toValue =
0.20000000298023224; removedOnCompletion = 0;
delegate = <UIViewAnimationState:
0x7fe69e0094e0>; fillMode = both; timingFunction
= linear; duration = 2; fromValue = 1; keyPath =
opacity>
1
opacity

63. 63
<CABasicAnimation:0x610000027340;
removedOnCompletion = 0; delegate =
<UIViewAnimationState: 0x7fe69e0094e0>; fillMode
= both; timingFunction = linear; duration = 2;
toValue = 100; fromValue = 0.0; keyPath =
uiFractionalProgress>
2
UIPacingAnimationForAnimatorsKey

64. 64
<CABasicAnimation:0x610000027340;
removedOnCompletion = 0; delegate =
<UIViewAnimationState: 0x7fe69e0094e0>; fillMode
= both; timingFunction = linear; duration = 2;
toValue = 100; fromValue = 0.0; keyPath =
uiFractionalProgress>
2
UIPacingAnimationForAnimatorsKey
uiFractionalProgress = 0 -> 100
duration = 2
timingFunction = linear
(lldb) po self.presentation()?.value(forKey:
"uiFractionalProgress")
▿ Optional<Any>

65. 65
On Touch

66. 66
UIPacingAnimationForAnimatorsKey
2 x3
opacity
1 x3

67. 67
UIPacingAnimationForAnimatorsKey
2 x3
opacity
1 x3
• speed = 0
on 4 first
• beginTime = -0.398438
on 2 last

68. 68
• By changing fractionComplete you
spamming new CABasicAnimation objects

69. 69
Advanced Animations

70. 70
• Receipt:
• Good Designer 👑
• AfterEffects
• Lottie + bodymovin
• Done 🎉

71. 71

72. 72

73. 73

74. 74

75. 75
bodymovin

76. 76
bodymovin

77. 77

78. 78
animationView = LOTAnimationView(name: "animation")
self.view.addSubview(animationView)
animationView.play()
animationView.animationProgress = CGFloat(sender.value)

79. 79

80. 80
animationView = LOTAnimationView(json: json)

81. 81
let filepath = Bundle.main.path(forResource: "animation", ofType: "json")!
var contents = try! String(contentsOfFile: filepath)
contents = contents.replacingOccurrences(
of: "[0.6790901,0.178386,0.178386,1]",
with: “[0,0.9,0,1]"
)
contents = contents.replacingOccurrences(
of: "[0.6784314,0.1764706,0.1764706,1]",
with: “[0,0.9,0,1]"
)
let data = contents.data(using: .utf8)!
let json = try! JSONSerialization.jsonObject(
with: data,
options: []
) as? [String: Any]
animationView = LOTAnimationView(json: json)

82. 82
let filepath = Bundle.main.path(forResource: "animation", ofType: "json")!
var contents = try! String(contentsOfFile: filepath)
contents = contents.replacingOccurrences(
of: "[0.6790901,0.178386,0.178386,1]",
with: “[0,0.9,0,1]"
)
contents = contents.replacingOccurrences(
of: "[0.6784314,0.1764706,0.1764706,1]",
with: “[0,0.9,0,1]"
)
let data = contents.data(using: .utf8)!
let json = try! JSONSerialization.jsonObject(
with: data,
options: []
) as? [String: Any]
animationView = LOTAnimationView(json: json)

83. 83
let filepath = Bundle.main.path(forResource: "animation", ofType: "json")!
var contents = try! String(contentsOfFile: filepath)
contents = contents.replacingOccurrences(
of: "[0.6790901,0.178386,0.178386,1]",
with: “[0,0.9,0,1]"
)
contents = contents.replacingOccurrences(
of: "[0.6784314,0.1764706,0.1764706,1]",
with: “[0,0.9,0,1]"
)
let data = contents.data(using: .utf8)!
let json = try! JSONSerialization.jsonObject(
with: data,
options: []
) as? [String: Any]
animationView = LOTAnimationView(json: json)
Mutating Phase

84. 84
let filepath = Bundle.main.path(forResource: "animation", ofType: "json")!
var contents = try! String(contentsOfFile: filepath)
contents = contents.replacingOccurrences(
of: "[0.6790901,0.178386,0.178386,1]",
with: “[0,0.9,0,1]"
)
contents = contents.replacingOccurrences(
of: "[0.6784314,0.1764706,0.1764706,1]",
with: “[0,0.9,0,1]"
)
let data = contents.data(using: .utf8)!
let json = try! JSONSerialization.jsonObject(
with: data,
options: []
) as? [String: Any]
animationView = LOTAnimationView(json: json)

85. 85

86. 86

87. 87
• JSON
• Size (in both ways)
• Mutatablity
• Control
• Speed
• Progress
• Completion
• All AfterEffects magic

88. 88
So

89. 89
• Use CAShapeLayers
• Combine multiply layers:
• Use alpha/scale/mask/…
• Use time-based animations

90. 90
Transitions

91. 91
Alexander Zimin – UIViewController, откройся!

92. 92
UIPercentDrivenInteractiveTransition

93. 93
• Avoid time-based animations 🚀
• Implement user interactions (it’s easy 😉)
• Create delegate for your custom
animations on VCs 🔊
• Check github.com/azimin/AZTransitions 👍

94. 94
• Offscreen rendering

95. 95
@ZiminAlex