Animation

Зимин Александр iOS разработчик

UX дизайнер

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

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

• Core Animation

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

• Core Animation• CALayer

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

• Core Animation• CALayer• CAMediaTiming

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

• Core Animation• CALayer• CAMediaTiming• CAShapeLayer

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

• Core Animation• CALayer• CAMediaTiming• CAShapeLayer

• UIView

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

• Core Animation• CALayer• CAMediaTiming• CAShapeLayer

• UIView• Layout вместе с анимацией

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

• Core Animation• CALayer• CAMediaTiming• CAShapeLayer

• UIView• Layout вместе с анимацией

• Сторонние библиотеки

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

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

• CATransition

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

• CATransition• CAActions

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

• CATransition• CAActions• Animation Performance

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

• CATransition• CAActions• Animation Performance • Animation Profiler

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

• CATransition• CAActions• Animation Performance • Animation Profiler• Анимирование с помощью drawRect:

Анимация

Анимация

• Все подвижное

Анимация

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

Анимация

Анимация

• Индикатор работы

Анимация

• Индикатор работы• Направление действий

Анимация

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

Анимация

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

Анимация

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

Иерархия

Иерархия

• UIScreen

Иерархия

• UIScreen• UIWindow

Иерархия

• UIScreen• UIWindow• UIView

Иерархия

• UIScreen• UIWindow• UIView• CALayer

UIView.alpha

UIView.alpha

var alpha: CGFloat {

UIView.alpha

var alpha: CGFloat { set {

UIView.alpha

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

UIView.alpha

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

UIView.alpha

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

UIView.alpha

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

UIView.alpha

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

UIView.alpha

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

CABasicAnimation

CABasicAnimation

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

CABasicAnimation

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

• Чтобы создать анимацию нужно:

CABasicAnimation

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

• Чтобы создать анимацию нужно:• Создать объект CABasicAnimation

CABasicAnimation

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

• Чтобы создать анимацию нужно:• Создать объект CABasicAnimation• Задать нужные свойства

CABasicAnimation

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

• Чтобы создать анимацию нужно:• Создать объект CABasicAnimation• Задать нужные свойства• Применить анимацию к CALayer

CALayer

CALayer

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

CALayer

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

CALayer

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

CALayer

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

CAKeyframeAnimation

CAKeyframeAnimation

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

CAMediaTiming

CAMediaTiming

• Это протокол

CAMediaTiming

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

CAMediaTiming

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

CAMediaTiming

CAMediaTiming

• beginTime

CAMediaTiming

• beginTime• duration

CAMediaTiming

• beginTime• duration• repeatCount

CAMediaTiming

• beginTime• duration• repeatCount• repeatDuration

CAMediaTiming

• beginTime• duration• repeatCount• repeatDuration• autoreverses

CAMediaTiming

• beginTime• duration• repeatCount• repeatDuration• autoreverses• fillMode

CAMediaTiming

• beginTime• duration• repeatCount• repeatDuration• autoreverses• fillMode• speed

CAMediaTiming

• beginTime• duration• repeatCount• repeatDuration• autoreverses• fillMode• speed• timeOffset

0s 1s 2s 3s 4s

duration = 1.5

duration = 1.5beginTime = 1.0

duration = 1.5beginTime = 1.0fillMode = backwards

fillMode = forwards

autoreverses = YES

duration = 1.5

duration = 1.5

duration = 1.5repeatCount = 2.0

duration = 2.0repeatCount = 1.5

duration = 1.5

duration = 1.5

repeatDuration = 2.0

repeatDuration = 1.0

beginTime = 1.0

duration = 1.5beingTime = -0.5

duration = 1.0autoreverses = YES

duration = 3.0speed = 2.0

duration = 1.5speed = -1.0

duration = 3.0timeOffset = 1.0

repeatCount = 2.0

CAMediaTiming cheat sheet

http://ronnqvi.st

CAMediaTimingFunction

cubic-bezier.com

Animation Groups

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

Animation Groups

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

CAShapeLayer

CAShapeLayer

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

CAShapeLayer

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

CAShapeLayer

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

• var strokeStart: CGFloat

CAShapeLayer

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

• var strokeStart: CGFloat• var strokeEnd: CGFloat

CAShapeLayer

NSView

NSView

UIView.beginAnimations(nil, context: nil)

NSView

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

NSView

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

NSView

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

NSView

NSView

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

NSView

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

NSView

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

NSView и Layout

NSView и Layout

self.upConstraint.constant = 100

NSView и Layout

self.upConstraint.constant = 100self.heightConstraint.constant *= 2

NSView и Layout

self.upConstraint.constant = 100self.heightConstraint.constant *= 2

NSView и Layout

self.upConstraint.constant = 100self.heightConstraint.constant *= 2

UIView.animateWithDuration(0.5, animations: { () -> Void in

NSView и Layout

self.upConstraint.constant = 100self.heightConstraint.constant *= 2

UIView.animateWithDuration(0.5, animations: { () -> Void in self.view.layoutSubviews()

NSView и Layout

self.upConstraint.constant = 100self.heightConstraint.constant *= 2

UIView.animateWithDuration(0.5, animations: { () -> Void in self.view.layoutSubviews()})

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

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

• Pop (github.com/facebook/pop)

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

• Pop (github.com/facebook/pop)• RBBAnimation (github.com/robb/RBBAnimation)

RBBAnimation

RBBAnimation

• Плюсы:

RBBAnimation

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

RBBAnimation

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

RBBAnimation

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

RBBAnimation

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

RBBAnimation

RBBAnimation

let rainbow = RBBCustomAnimation(keyPath: "backgroundColor")

RBBAnimation

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

RBBAnimation

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

RBBAnimation

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

RBBAnimation

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

RBBAnimation

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

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

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}

RBBAnimation

RBBAnimation

let sinusPosition = RBBTweenAnimation(keyPath: "position")

RBBAnimation

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

RBBAnimation

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

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;

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;

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 = {

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

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))

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))}

Pop

Pop• Плюсы:

Pop• Плюсы:

• Движок для анимации

Pop• Плюсы:

• Движок для анимации• POPSpringAnimation

Pop• Плюсы:

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

Pop• Плюсы:

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

• Имеет набор готовых свойств для CALayer и UIView

Pop• Плюсы:

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

• Имеет набор готовых свойств для CALayer и UIView

• Удобный способ дебага

Pop• Плюсы:

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

• Имеет набор готовых свойств для CALayer и UIView

• Удобный способ дебага• Возможность прицепляться к делегатам

Pop• Плюсы:

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

• Имеет набор готовых свойств для CALayer и UIView

• Удобный способ дебага• Возможность прицепляться к делегатам• Поверх попа уже пишутся библиотеки

Pop• Плюсы:

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

• Имеет набор готовых свойств для CALayer и UIView

• Удобный способ дебага• Возможность прицепляться к делегатам• Поверх попа уже пишутся библиотеки• …

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; }

Спасибо за внимание

Зимин Александр azimin@me.com

@ziminalex