Animations in iOS with Facebook POP

Jan 16, 20151 like2,032 views

Pop is an animation library created by Facebook for iOS and OSX. It provides a simple API similar to Core Animation for creating timer-based animations using CADisplayLink. Pop animations can update any object property and include built-in animation types like springs and decays. While powerful, Pop runs on the main thread so it can cause lag if the main thread is blocked during an animation.

Software

Animations in iOS with
Facebook POP
Eduard Panasiuk
Minsk 2015
@edpanasiuk github.com/somedev ed.iosdev@gmail.com

https://github.com/facebook/pop
Pop is animation library for iOS and OS X.

Made by Facebook team for Paper app.

Written in C++/ObjectiveC++

Timer-based animation (via CADisplayLink)

Well documented and tested

Works with Swift

$Features ? Simple API (almost identical to Core Animation) POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds]; springAnimation.springBounciness = 14; springAnimation.springSpeed = 3; springAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 400, 400)]; [layer pop_addAnimation:springAnimation forKey:@"size"]; ... [layer pop_removeAnimationForKey:@"size"]; /* completion block */ springAnimation.completionBlock = ^(POPAnimation *anAnimation, BOOL finished) { NSLog(@"Animation has completed."); };$

$Features ? Update animation on the ?y POPSpringAnimation *animation = [layer pop_animationForKey:@"myKey"]; if (animation) { /* update to value to new destination */ animation.toValue = @(42.0); } else { /* create and start a new animation */ .... }$

$Features ? Pop can animate any property of any Objective- C object POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"com.foo.radio.volume" initializer:^(POPMutableAnimatableProperty *property) { // read value prop.readBlock = ^(id obj, CGFloat values[]) { values[0] = [obj volume]; }; // write value prop.writeBlock = ^(id obj, const CGFloat values[]) { [obj setVolume:values[0]]; }; // dynamics threshold prop.threshold = 0.01; }]$

Animation Types
POPBasicAnimation
�� and other, using custom CAMediaTimingFunction
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionLinear];
basicAnimation.duration = 0.5;

Animation Types
POPSpringAnimation
POPDecayAnimation
POPSpringAnimation *springAnimation = [POPSpringAnimation animation];
// change of value units per second
springAnimation.velocity = @(1000);
// value between 0-20 default at 4
springAnimation.springBounciness = 14;
// value between 0-20 default at 4
springAnimation.springSpeed = 3;
POPDecayAnimation *decayAnimation = [POPDecayAnimation animation];
//change of value units per second
decayAnimation.velocity = @(233);
//range of 0 to 1
decayAnimation.deceleration = .833;

Animation Types
POPCustomAnimation
// Return NO when animation finished
typedef BOOL (^POPCustomAnimationBlock)(id target, POPCustomAnimation
*animation);
// The current animation time at time of callback.
@property (readonly, nonatomic) CFTimeInterval currentTime;
//The elapsed animation time since last callback.
@property (readonly, nonatomic) CFTimeInterval elapsedTime;

Examples
https://github.com/schneiderandre/popping

Demo (Swift)
https://github.com/somedev/animations-in-ios

Drawbacks
Should you use POP? - perfect article from Vladislav
Alexeev (iOS engineer in Facebook UK)
Fig.1. Perfomance. Rotation layer across X axis
with perspective (10 seconds)

Drawbacks
https://medium.com/@beefon/should-you-use-pop-
b986b10d4079
Fig.2. CoreAnimation (left) vs POP(right) when main thread is
periodically blocking

Conclusion
+ -
Simple and powerful API Runs on Main Thread
Animate any property of any
object
More CPU load during
animation
Built in dynamic animations
Chance to get UI lag during
animation
Custom animations

Animations in iOS with Facebook POP

1. Animations in iOS with Facebook POP Eduard Panasiuk Minsk 2015 @edpanasiuk github.com/somedev ed.iosdev@gmail.com

2. https://github.com/facebook/pop Pop is animation library for iOS and OS X. Made by Facebook team for Paper app. Written in C++/ObjectiveC++ Timer-based animation (via CADisplayLink) Well documented and tested Works with Swift

3. Features ? Simple API (almost identical to Core Animation) POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds]; springAnimation.springBounciness = 14; springAnimation.springSpeed = 3; springAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 400, 400)]; [layer pop_addAnimation:springAnimation forKey:@"size"]; ... [layer pop_removeAnimationForKey:@"size"]; /* completion block */ springAnimation.completionBlock = ^(POPAnimation *anAnimation, BOOL finished) { NSLog(@"Animation has completed."); };

4. Features ? Update animation on the ?y POPSpringAnimation *animation = [layer pop_animationForKey:@"myKey"]; if (animation) { /* update to value to new destination */ animation.toValue = @(42.0); } else { /* create and start a new animation */ .... }

5. Features ? Pop can animate any property of any Objective- C object POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"com.foo.radio.volume" initializer:^(POPMutableAnimatableProperty *property) { // read value prop.readBlock = ^(id obj, CGFloat values[]) { values[0] = [obj volume]; }; // write value prop.writeBlock = ^(id obj, const CGFloat values[]) { [obj setVolume:values[0]]; }; // dynamics threshold prop.threshold = 0.01; }]

6. Animation Types POPBasicAnimation �� and other, using custom CAMediaTimingFunction POPBasicAnimation *basicAnimation = [POPBasicAnimation animation]; basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; basicAnimation.duration = 0.5;

7. Animation Types POPSpringAnimation POPDecayAnimation POPSpringAnimation *springAnimation = [POPSpringAnimation animation]; // change of value units per second springAnimation.velocity = @(1000); // value between 0-20 default at 4 springAnimation.springBounciness = 14; // value between 0-20 default at 4 springAnimation.springSpeed = 3; POPDecayAnimation *decayAnimation = [POPDecayAnimation animation]; //change of value units per second decayAnimation.velocity = @(233); //range of 0 to 1 decayAnimation.deceleration = .833;

8. Animation Types POPCustomAnimation // Return NO when animation finished typedef BOOL (^POPCustomAnimationBlock)(id target, POPCustomAnimation *animation); // The current animation time at time of callback. @property (readonly, nonatomic) CFTimeInterval currentTime; //The elapsed animation time since last callback. @property (readonly, nonatomic) CFTimeInterval elapsedTime;

9. Examples https://github.com/schneiderandre/popping

10. Demo (Swift) https://github.com/somedev/animations-in-ios

11. Drawbacks Should you use POP? - perfect article from Vladislav Alexeev (iOS engineer in Facebook UK) Fig.1. Perfomance. Rotation layer across X axis with perspective (10 seconds)

12. Drawbacks https://medium.com/@beefon/should-you-use-pop- b986b10d4079 Fig.2. CoreAnimation (left) vs POP(right) when main thread is periodically blocking

13. Conclusion + - Simple and powerful API Runs on Main Thread Animate any property of any object More CPU load during animation Built in dynamic animations Chance to get UI lag during animation Custom animations

�ݺ�ߣ

Animations in iOS with Facebook POP

More Related Content

Similar to Animations in iOS with Facebook POP (7)

Recently uploaded (20)

Animations in iOS with Facebook POP