Upload
cocoaheads-moscow
View
473
Download
4
Embed Size (px)
Citation preview
Что будет сегодня
• Core Animation• CALayer• CAMediaTiming• CAShapeLayer
• UIView• Layout вместе с анимацией
Что будет сегодня
• Core Animation• CALayer• CAMediaTiming• CAShapeLayer
• UIView• Layout вместе с анимацией
• Сторонние библиотеки
Чего не будет сегодня
• CATransition• CAActions• Animation Performance • Animation Profiler• Анимирование с помощью drawRect:
Анимация
• Индикатор работы• Направление действий• Реалистичность и опыт использования• Подсказки• Дополнительные действия
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
• Берет свое начало (как и все классы анимации для CALayer) от CAAnimation
• Чтобы создать анимацию нужно:
CABasicAnimation
• Берет свое начало (как и все классы анимации для CALayer) от CAAnimation
• Чтобы создать анимацию нужно:• Создать объект CABasicAnimation
CABasicAnimation
• Берет свое начало (как и все классы анимации для CALayer) от CAAnimation
• Чтобы создать анимацию нужно:• Создать объект CABasicAnimation• Задать нужные свойства
CABasicAnimation
• Берет свое начало (как и все классы анимации для CALayer) от CAAnimation
• Чтобы создать анимацию нужно:• Создать объект CABasicAnimation• Задать нужные свойства• Применить анимацию к CALayer
CAMediaTiming
• Это протокол• CAAnimation, CALayer реализуют его• Содержит свойства для манипуляции со временем выполнения анимации
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
Animation Groups
objc.io/issue-12/animations-explained.html#fnref1
Animation Groups
objc.io/issue-12/animations-explained.html#fnref1
CAShapeLayer
• Содержит var path: CGPath!• Интересные для анимации свойства:
• var strokeStart: CGFloat
CAShapeLayer
• Содержит var path: CGPath!• Интересные для анимации свойства:
• var strokeStart: CGFloat• var strokeEnd: CGFloat
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 и 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
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
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• Плюсы:
• Движок для анимации• 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; }