Facebook Pop

A monthly Ray Wenderlich tech talk about Facebook Pop

Transcript

1. Facebook Pop — @_ryannystrom
2. What is Pop? —Born from Facebook Paper —Library similar to Core Animation —Delightful timing functions —Works on the model layer —NSObject & custom properties
3. Paper
4. Paper
5. Paper
6. Springs pre-iOS 7 [UIView animateWithDuration:0.2 animations:^{ view.frame = wayPastFrame; } completion:^(BOOL finished) { [UIView animateWithDuration:0.2 animations:^{ view.frame = backABitFrame; } completion:^(BOOL finished) { [UIView animateWithDuration:0.2 animations:^{ view.frame = finalFrame; }]; }]; }];
7. Springs iOS 7 [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.5 // 0.0-1.0 initialSpringVelocity:0.5 // 0.0-1.0 options:kNilOptions animations:^{ view.frame = frame; } completion:nil];
8. Springs with Pop POPSpringAnimation *spring = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame]; spring.toValue = [NSValue valueWithCGRect:frame]; spring.springBounciness = 15; spring.springSpeed = 20; [view pop_addAnimation:spring forKey:@"spring"];
9. Animate Autolayout with Pop POPSpringAnimation *spring = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame]; spring.springBounciness = 20; spring.springSpeed = 15; POPAnimatableProperty *property = [POPAnimatableProperty propertyWithName:@"propName" initializer:^(POPMutableAnimatableProperty *prop) { prop.readBlock = ^(NSLayoutConstraint *constraint, CGFloat values[]) { values[0] = constraint.constant; }; prop.writeBlock = ^(NSLayoutConstraint *constraint, const CGFloat values[]) { constraint.constant = values[0]; }; prop.threshold = 0.01; // "completeness" threshold }]; spring.property = property; spring.toValue = @(newWidth); [self.containerHeightConstraint pop_addAnimation:spring forKey:@"spring"];
10. Demo
11. Links https://github.com/schneiderandre/popping https://github.com/Ciechan/BCMeshTransformView http://codeplease.io/playing-with-pop-iv/ https://github.com/facebook/pop https://www.facebook.com/paper https://code.facebook.com/posts/234067533455773/introducing-pop-the-animation-engine-behind-paper/ http://blog.brianlovin.com/design-details-paper-by-facebook