animateSubhransu Behera - subh@subhb.org

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 - subh@subhb.org

https://www.facebook.com/groups/iosdevscout