animate
Subhransu 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 ph...
http://facebook.com/paper
installation
• Recommended way of installing pop is to use
CocoaPods
• pod 'pop', '~> 1.0’
• Ensure -lc++ linker flag is se...
installation
• To install Cocoapods
!
$ sudo gem install cocoapods	
• Create Podfile file in your Xcode project and write
!
...
using pop
• Import the header file
!
#import <POP/POP.h>
• To start an animation add it to an object
// sample code
POPSpri...
using pop
• To stop an animation
!
[layer pop_removeAnimationForKey:@"myKey"];
!
• Check existence of an animation using k...
animation types
• Spring
• Decay
• Basic
• Custom
spring animation
• gives objects a delightful bouncy effects
!
// Sample code
!
POPSpringAnimation *anim = [POPSpringAnima...
decay animation
• gradually slows an object to halt
!
// sample code
POPDecayAnimation *anim = [POPDecayAnimation
animatio...
basic animation
• used to interpolate values over a specified time period
!
// sample code
POPBasicAnimation *anim = [POPBa...
properties
• Property animated is specified by
POPAnimatableProperty class
!
// kPopLayerBounds sets the property to
[CALay...
Demo
https://github.com/subhransu/
PopAnimation-Sample
resources
• GitHub: https://github.com/facebook/pop
• POP Tutorial in 5 Steps: https://github.com/
maxmyers/FacebookPop
• ...
video tutorials
• Getting Started: http://www.youtube.com/watch?
v=Ta5AD8dHbmQ
• Live Button: http://www.youtube.com/watch...
Join our Facebook group to know more about
iOS Dev Scout
Subhransu Behera - subh@subhb.org
https://www.facebook.com/groups...
Upcoming SlideShare
Loading in …5
×

Introduction to POP animation engine

2,581 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,581
On SlideShare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to POP animation engine

  1. 1. animate Subhransu Behera - subh@subhb.org with
  2. 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. 3. http://facebook.com/paper
  4. 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. 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. 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. 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. 8. animation types • Spring • Decay • Basic • Custom
  9. 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. 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. 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. 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. 13. Demo https://github.com/subhransu/ PopAnimation-Sample
  14. 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. 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. 16. Join our Facebook group to know more about iOS Dev Scout Subhransu Behera - subh@subhb.org https://www.facebook.com/groups/iosdevscout

×