Доклад со встречи CocoaHeads MSK 27 февраля 2015 http://youtu.be/W6S7w_nlJ_w

1. Animation
Зимин Александр
iOS разработчик
UX дизайнер

2. Что будет сегодня

3. Что будет сегодня
• Core Animation

4. Что будет сегодня
• Core Animation
• CALayer

5. Что будет сегодня
• Core Animation
• CALayer
• CAMediaTiming

6. Что будет сегодня
• Core Animation
• CALayer
• CAMediaTiming
• CAShapeLayer

7. Что будет сегодня
• Core Animation
• CALayer
• CAMediaTiming
• CAShapeLayer
• UIView

8. Что будет сегодня
• Core Animation
• CALayer
• CAMediaTiming
• CAShapeLayer
• UIView
• Layout вместе с анимацией

9. Что будет сегодня
• Core Animation
• CALayer
• CAMediaTiming
• CAShapeLayer
• UIView
• Layout вместе с анимацией
• Сторонние библиотеки

10. Чего не будет сегодня

11. Чего не будет сегодня
• CATransition

12. Чего не будет сегодня
• CATransition
• CAActions

13. Чего не будет сегодня
• CATransition
• CAActions
• Animation Performance

14. Чего не будет сегодня
• CATransition
• CAActions
• Animation Performance
• Animation Profiler

15. Чего не будет сегодня
• CATransition
• CAActions
• Animation Performance
• Animation Profiler
• Анимирование с помощью drawRect:

16. Анимация

17. Анимация
• Все подвижное

18. Анимация
• Все подвижное
• Когда между пунктами A и B у нас есть шаги

19. Анимация

20. Анимация
• Индикатор работы

21. Анимация
• Индикатор работы
• Направление действий

22. Анимация
• Индикатор работы
• Направление действий
• Реалистичность и опыт использования

23. Анимация
• Индикатор работы
• Направление действий
• Реалистичность и опыт использования
• Подсказки

24. Анимация
• Индикатор работы
• Направление действий
• Реалистичность и опыт использования
• Подсказки
• Дополнительные действия

25. Иерархия

26. Иерархия
• UIScreen

27. Иерархия
• UIScreen
• UIWindow

28. Иерархия
• UIScreen
• UIWindow
• UIView

29. Иерархия
• UIScreen
• UIWindow
• UIView
• CALayer

30. UIView.alpha

31. UIView.alpha
var alpha: CGFloat {

32. UIView.alpha
var alpha: CGFloat {
set {

33. UIView.alpha
var alpha: CGFloat {
set {
self.layer.opacity = Float(alpha)

34. UIView.alpha
var alpha: CGFloat {
set {
self.layer.opacity = Float(alpha)
}

35. UIView.alpha
var alpha: CGFloat {
set {
self.layer.opacity = Float(alpha)
}
get {

36. UIView.alpha
var alpha: CGFloat {
set {
self.layer.opacity = Float(alpha)
}
get {
return CGFloat(self.layer.opacity)

37. UIView.alpha
var alpha: CGFloat {
set {
self.layer.opacity = Float(alpha)
}
get {
return CGFloat(self.layer.opacity)
}

38. UIView.alpha
var alpha: CGFloat {
set {
self.layer.opacity = Float(alpha)
}
get {
return CGFloat(self.layer.opacity)
}
}

39. CABasicAnimation

40. CABasicAnimation
• Берет свое начало (как и все классы анимации
для CALayer) от CAAnimation

41. CABasicAnimation
• Берет свое начало (как и все классы анимации
для CALayer) от CAAnimation
• Чтобы создать анимацию нужно:

42. CABasicAnimation
• Берет свое начало (как и все классы анимации
для CALayer) от CAAnimation
• Чтобы создать анимацию нужно:
• Создать объект CABasicAnimation

43. CABasicAnimation
• Берет свое начало (как и все классы анимации
для CALayer) от CAAnimation
• Чтобы создать анимацию нужно:
• Создать объект CABasicAnimation
• Задать нужные свойства

44. CABasicAnimation
• Берет свое начало (как и все классы анимации
для CALayer) от CAAnimation
• Чтобы создать анимацию нужно:
• Создать объект CABasicAnimation
• Задать нужные свойства
• Применить анимацию к CALayer

45. CALayer

46. CALayer
• Имеет 3 параллельных слоя

47. CALayer
• Имеет 3 параллельных слоя
• Model layer tree

48. CALayer
• Имеет 3 параллельных слоя
• Model layer tree
• Presentation tree

49. CALayer
• Имеет 3 параллельных слоя
• Model layer tree
• Presentation tree
• Render tree (Приватный)

50. CAKeyframeAnimation

51. CAKeyframeAnimation
• Используется для покадровой анимации

52. CAMediaTiming

53. CAMediaTiming
• Это протокол

54. CAMediaTiming
• Это протокол
• CAAnimation, CALayer реализуют его

55. CAMediaTiming
• Это протокол
• CAAnimation, CALayer реализуют его
• Содержит свойства для манипуляции со
временем выполнения анимации

56. CAMediaTiming

57. CAMediaTiming
• beginTime

58. CAMediaTiming
• beginTime
• duration

59. CAMediaTiming
• beginTime
• duration
• repeatCount

60. CAMediaTiming
• beginTime
• duration
• repeatCount
• repeatDuration

61. CAMediaTiming
• beginTime
• duration
• repeatCount
• repeatDuration
• autoreverses

62. CAMediaTiming
• beginTime
• duration
• repeatCount
• repeatDuration
• autoreverses
• fillMode

63. CAMediaTiming
• beginTime
• duration
• repeatCount
• repeatDuration
• autoreverses
• fillMode
• speed

64. CAMediaTiming
• beginTime
• duration
• repeatCount
• repeatDuration
• autoreverses
• fillMode
• speed
• timeOffset

65. 0s 1s 2s 3s 4s
duration = 1.5
duration = 1.5
beginTime = 1.0
duration = 1.5
beginTime = 1.0
fillMode = backwards
fillMode = forwards
autoreverses = YES
duration = 1.5
duration = 1.5
duration = 1.5
repeatCount = 2.0
duration = 2.0
repeatCount = 1.5
duration = 1.5
duration = 1.5
repeatDuration = 2.0
repeatDuration = 1.0
beginTime = 1.0
duration = 1.5
beingTime = -0.5
duration = 1.0
autoreverses = YES
duration = 3.0
speed = 2.0
duration = 1.5
speed = -1.0
duration = 3.0
timeOffset = 1.0
repeatCount = 2.0
CAMediaTiming cheat sheet
http://ronnqvi.st

66. CAMediaTimingFunction
cubic-bezier.com

67. Animation Groups
objc.io/issue-12/animations-explained.html#fnref1

68. Animation Groups
objc.io/issue-12/animations-explained.html#fnref1

69. CAShapeLayer

70. CAShapeLayer
• Содержит var path: CGPath!

71. CAShapeLayer
• Содержит var path: CGPath!
• Интересные для анимации свойства:

72. CAShapeLayer
• Содержит var path: CGPath!
• Интересные для анимации свойства:
• var strokeStart: CGFloat

73. CAShapeLayer
• Содержит var path: CGPath!
• Интересные для анимации свойства:
• var strokeStart: CGFloat
• var strokeEnd: CGFloat

74. CAShapeLayer

75. NSView

76. NSView
UIView.beginAnimations(nil, context: nil)

77. NSView
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(0.2)

78. NSView
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(0.2)
customView.alpha = 0.0

79. NSView
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(0.2)
customView.alpha = 0.0
UIView.commitAnimations()

80. NSView

81. NSView
UIView.animateWithDuration(0.2, animations: { () -> Void in

82. NSView
UIView.animateWithDuration(0.2, animations: { () -> Void in
self.customView.alpha = 0.0

83. NSView
UIView.animateWithDuration(0.2, animations: { () -> Void in
self.customView.alpha = 0.0
})

84. NSView и Layout

85. NSView и Layout
self.upConstraint.constant = 100

86. NSView и Layout
self.upConstraint.constant = 100
self.heightConstraint.constant *= 2

87. NSView и Layout
self.upConstraint.constant = 100
self.heightConstraint.constant *= 2

88. NSView и Layout
self.upConstraint.constant = 100
self.heightConstraint.constant *= 2
UIView.animateWithDuration(0.5, animations: { () -> Void in

89. NSView и Layout
self.upConstraint.constant = 100
self.heightConstraint.constant *= 2
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.view.layoutSubviews()

90. NSView и Layout
self.upConstraint.constant = 100
self.heightConstraint.constant *= 2
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.view.layoutSubviews()
})

91. Сторонние библиотеки

92. Сторонние библиотеки
• Pop (github.com/facebook/pop)

93. Сторонние библиотеки
• Pop (github.com/facebook/pop)
• RBBAnimation (github.com/robb/RBBAnimation)

94. RBBAnimation

95. RBBAnimation
• Плюсы:

96. RBBAnimation
• Плюсы:
• Простая в использовании

97. RBBAnimation
• Плюсы:
• Простая в использовании
• Простая для изучения

98. RBBAnimation
• Плюсы:
• Простая в использовании
• Простая для изучения
• Имеет пару тайм функций

99. RBBAnimation
• Плюсы:
• Простая в использовании
• Простая для изучения
• Имеет пару тайм функций
• Позволяет быстро создавать кадры для
анимации

100. RBBAnimation

101. RBBAnimation
let rainbow = RBBCustomAnimation(keyPath: "backgroundColor")

102. RBBAnimation
let rainbow = RBBCustomAnimation(keyPath: "backgroundColor")
rainbow.animationBlock = {

103. RBBAnimation
let rainbow = RBBCustomAnimation(keyPath: "backgroundColor")
rainbow.animationBlock = {
(elapsed: CGFloat, duration: CGFloat) in

104. RBBAnimation
let rainbow = RBBCustomAnimation(keyPath: "backgroundColor")
rainbow.animationBlock = {
(elapsed: CGFloat, duration: CGFloat) in
return UIColor(hue: elapsed / duration,

105. RBBAnimation
let rainbow = RBBCustomAnimation(keyPath: "backgroundColor")
rainbow.animationBlock = {
(elapsed: CGFloat, duration: CGFloat) in
return UIColor(hue: elapsed / duration,
saturation: 1.0,

106. RBBAnimation
let rainbow = RBBCustomAnimation(keyPath: "backgroundColor")
rainbow.animationBlock = {
(elapsed: CGFloat, duration: CGFloat) in
return UIColor(hue: elapsed / duration,
saturation: 1.0,
brightness: 1.0,

107. RBBAnimation
let rainbow = RBBCustomAnimation(keyPath: "backgroundColor")
rainbow.animationBlock = {
(elapsed: CGFloat, duration: CGFloat) in
return UIColor(hue: elapsed / duration,
saturation: 1.0,
brightness: 1.0,
alpha: 1.0).CGColor

108. RBBAnimation
let rainbow = RBBCustomAnimation(keyPath: "backgroundColor")
rainbow.animationBlock = {
(elapsed: CGFloat, duration: CGFloat) in
return UIColor(hue: elapsed / duration,
saturation: 1.0,
brightness: 1.0,
alpha: 1.0).CGColor
}

109. RBBAnimation

110. RBBAnimation
let sinusPosition = RBBTweenAnimation(keyPath: "position")

111. RBBAnimation
let sinusPosition = RBBTweenAnimation(keyPath: "position")
sinusPosition.fromValue = NSValue(CGPoint: CGPoint(x: 100, y: 100))

112. RBBAnimation
let sinusPosition = RBBTweenAnimation(keyPath: "position")
sinusPosition.fromValue = NSValue(CGPoint: CGPoint(x: 100, y: 100))
sinusPosition.toValue = NSValue(CGPoint: CGPoint(x: 150, y: 200))

113. RBBAnimation
let sinusPosition = RBBTweenAnimation(keyPath: "position")
sinusPosition.fromValue = NSValue(CGPoint: CGPoint(x: 100, y: 100))
sinusPosition.toValue = NSValue(CGPoint: CGPoint(x: 150, y: 200))
sinusPosition.duration = 2;

114. RBBAnimation
let sinusPosition = RBBTweenAnimation(keyPath: "position")
sinusPosition.fromValue = NSValue(CGPoint: CGPoint(x: 100, y: 100))
sinusPosition.toValue = NSValue(CGPoint: CGPoint(x: 150, y: 200))
sinusPosition.duration = 2;

115. RBBAnimation
let sinusPosition = RBBTweenAnimation(keyPath: "position")
sinusPosition.fromValue = NSValue(CGPoint: CGPoint(x: 100, y: 100))
sinusPosition.toValue = NSValue(CGPoint: CGPoint(x: 150, y: 200))
sinusPosition.duration = 2;
sinusPosition.easing = {

116. RBBAnimation
let sinusPosition = RBBTweenAnimation(keyPath: "position")
sinusPosition.fromValue = NSValue(CGPoint: CGPoint(x: 100, y: 100))
sinusPosition.toValue = NSValue(CGPoint: CGPoint(x: 150, y: 200))
sinusPosition.duration = 2;
sinusPosition.easing = {
(fraction: CGFloat) in

117. RBBAnimation
let sinusPosition = RBBTweenAnimation(keyPath: "position")
sinusPosition.fromValue = NSValue(CGPoint: CGPoint(x: 100, y: 100))
sinusPosition.toValue = NSValue(CGPoint: CGPoint(x: 150, y: 200))
sinusPosition.duration = 2;
sinusPosition.easing = {
(fraction: CGFloat) in
return sin(fraction * 2 * CGFloat(M_PI))

118. RBBAnimation
let sinusPosition = RBBTweenAnimation(keyPath: "position")
sinusPosition.fromValue = NSValue(CGPoint: CGPoint(x: 100, y: 100))
sinusPosition.toValue = NSValue(CGPoint: CGPoint(x: 150, y: 200))
sinusPosition.duration = 2;
sinusPosition.easing = {
(fraction: CGFloat) in
return sin(fraction * 2 * CGFloat(M_PI))
}

119. Pop

120. Pop
• Плюсы:

121. Pop
• Плюсы:
• Движок для анимации

122. Pop
• Плюсы:
• Движок для анимации
• POPSpringAnimation

123. Pop
• Плюсы:
• Движок для анимации
• POPSpringAnimation
• Позволяет легко создавать анимацию любых
своих свойств

124. Pop
• Плюсы:
• Движок для анимации
• POPSpringAnimation
• Позволяет легко создавать анимацию любых
своих свойств
• Имеет набор готовых свойств для CALayer и
UIView

125. Pop
• Плюсы:
• Движок для анимации
• POPSpringAnimation
• Позволяет легко создавать анимацию любых
своих свойств
• Имеет набор готовых свойств для CALayer и
UIView
• Удобный способ дебага

126. Pop
• Плюсы:
• Движок для анимации
• POPSpringAnimation
• Позволяет легко создавать анимацию любых
своих свойств
• Имеет набор готовых свойств для CALayer и
UIView
• Удобный способ дебага
• Возможность прицепляться к делегатам

127. Pop
• Плюсы:
• Движок для анимации
• POPSpringAnimation
• Позволяет легко создавать анимацию любых
своих свойств
• Имеет набор готовых свойств для CALayer и
UIView
• Удобный способ дебага
• Возможность прицепляться к делегатам
• Поверх попа уже пишутся библиотеки

128. Pop
• Плюсы:
• Движок для анимации
• POPSpringAnimation
• Позволяет легко создавать анимацию любых
своих свойств
• Имеет набор готовых свойств для CALayer и
UIView
• Удобный способ дебага
• Возможность прицепляться к делегатам
• Поверх попа уже пишутся библиотеки
• …

129. Pop
+ (instancetype)viewFrameProperty
{
if (_viewFrameProperty == nil) {
_viewFrameProperty = [POPAnimatableProperty propertyWithName:@“frame” initializer:
^(POPMutableAnimatableProperty *prop) {
prop.readBlock = ^(NSView *view, CGFloat values[]) {
NSRect frame = view.frame;
values[0] = frame.origin.x;
values[1] = frame.origin.y;
values[2] = frame.size.width;
values[3] = frame.size.height;
};
prop.writeBlock = ^(NSView *view, const CGFloat values[]) {
NSRect frame = NSIntegralRect(NSMakeRect(values[0], values[1], values[2], values[3]));
view.frame = frame;
};
prop.threshold = kCGRectValueThreshold;
}];
}
return _viewFrameProperty;
}

130. Спасибо за внимание
Зимин Александр
azimin@me.com
@ziminalex