introduction to pop animation engine
DESCRIPTION
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-SampleTRANSCRIPT
animateSubhransu Behera - [email protected]
with
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
http://facebook.com/paper
installation
• Recommended way of installing pop is to use CocoaPods
• pod 'pop', '~> 1.0’
• Ensure -lc++ linker flag is set for manual installation
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!!
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"];
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 }
animation types
• Spring
• Decay
• Basic
• Custom
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"];
decay animation
• gradually slows an object to halt ! // sample code POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX]; ! anim.velocity = @(1000.); ! [layer pop_addAnimation:anim forKey:@"slide"];
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"];
properties• Property animated is specified by
POPAnimatableProperty class !// kPopLayerBounds sets the property to [CALayer bounds]
POPSpringAnimation *anim = [POPSpringAnimation animation]; ! anim.property = [POPAnimatableProperty propertyWithName:kPOPLayerBounds];
Demo https://github.com/subhransu/
PopAnimation-Sample
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
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
Join our Facebook group to know more about iOS Dev Scout
Subhransu Behera - [email protected]
https://www.facebook.com/groups/iosdevscout