Introduction to POP animation engine. POP drives all the animations and transitions in Facebook's Paper application. POP reference link: https://github.com/facebook/pop Sample iOS Project: https://github.com/subhransu/PopAnimation-Sample

1. animate
Subhransu Behera - subh@subhb.org
with

2. what’s pop
• An animation engine for iOS and OSX
• It supports spring and dynamic animations
• Useful for realistic and physic based interactions
• Facebook used it extensibly in their Paper app

3. http://facebook.com/paper

4. installation
• Recommended way of installing pop is to use
CocoaPods
• pod 'pop', '~> 1.0’
• Ensure -lc++ linker flag is set for manual installation

5. installation
• To install Cocoapods
!
$ sudo gem install cocoapods
• Create Podfile file in your Xcode project and write
!
platform: iOS, ‘7.0'
pod 'pop', '~> 1.0’
• Install your dependencies
!
$ pod install
• Make sure you open the Xcode workspace instead of the
project file
!
$ open App.xcworkspace
!
!

6. using pop
• Import the header file
!
#import <POP/POP.h>
• To start an animation add it to an object
// sample code
POPSpringAnimation *anim = [POPSpringAnimation
animation];
…
!
[layer pop_addAnimation:anim forKey:@"myKey"];

7. using pop
• To stop an animation
!
[layer pop_removeAnimationForKey:@"myKey"];
!
• Check existence of an animation using key
!
// Sample code
!
anim = [layer pop_animationForKey:@"myKey"];
!
if (anim) {
// Do something
}

8. animation types
• Spring
• Decay
• Basic
• Custom

9. spring animation
• gives objects a delightful bouncy effects
!
// Sample code
!
POPSpringAnimation *anim = [POPSpringAnimation
animationWithPropertyNamed:kPOPLayerBounds];
!
anim.toValue = [NSValue
valueWithCGRect:CGRectMake(0, 0, 400, 400)];
!
[layer pop_addAnimation:anim forKey:@"size"];

10. decay animation
• gradually slows an object to halt
!
// sample code
POPDecayAnimation *anim = [POPDecayAnimation
animationWithPropertyNamed:kPOPLayerPositionX];
!
anim.velocity = @(1000.);
!
[layer pop_addAnimation:anim forKey:@"slide"];

11. basic animation
• used to interpolate values over a specified time period
!
// sample code
POPBasicAnimation *anim = [POPBasicAnimation
animationWithPropertyNamed:kPOPViewAlpha];
anim.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anim.fromValue = @(0.0);
anim.toValue = @(1.0);
[view pop_addAnimation:anim forKey:@"fade"];

12. properties
• Property animated is specified by
POPAnimatableProperty class
!
// kPopLayerBounds sets the property to
[CALayer bounds]
POPSpringAnimation *anim = [POPSpringAnimation
animation];
!
anim.property = [POPAnimatableProperty
propertyWithName:kPOPLayerBounds];

13. Demo
https://github.com/subhransu/
PopAnimation-Sample

14. resources
• GitHub: https://github.com/facebook/pop
• POP Tutorial in 5 Steps: https://github.com/
maxmyers/FacebookPop
• https://github.com/hfossli/aggeometrykit-pop
• POP Playground: https://github.com/callmeed/pop-
playground

15. video tutorials
• Getting Started: http://www.youtube.com/watch?
v=Ta5AD8dHbmQ
• Live Button: http://www.youtube.com/watch?
v=586eOCu3b28
• Custom Segue: http://www.youtube.com/watch?
v=586eOCu3b28
• Basic Button Animation: http://www.youtube.com/
watch?v=ErJ4FnPa_Qk

16. Join our Facebook group to know more about
iOS Dev Scout
Subhransu Behera - subh@subhb.org
https://www.facebook.com/groups/iosdevscout