Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Facebook Pop
Search
Ryan Nystrom
July 01, 2014
Programming
2
580
Facebook Pop
A monthly Ray Wenderlich tech talk about Facebook Pop
Ryan Nystrom
July 01, 2014
Tweet
Share
More Decks by Ryan Nystrom
See All by Ryan Nystrom
Animation & Interaction Design
rnystrom
2
190
Facebook & Mobile
rnystrom
0
64
Drawing with Code
rnystrom
1
210
Open Source for the Open Mind
rnystrom
2
160
Mobile Debugging
rnystrom
0
77
Migrating to iOS 7
rnystrom
1
140
Minimal-first Design & Development
rnystrom
1
110
Learning iOS: Part 1
rnystrom
3
75
Other Decks in Programming
See All in Programming
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
640
Snowflakeで眠ったデータを起こそう!
estie
0
110
Folding Cheat Sheet #3
philipschwarz
PRO
0
120
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
6
880
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
620
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
360
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Elm Form Validation
bkuhlmann
0
510
Ruby Function Composition
bkuhlmann
1
330
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
160
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Git Lint
bkuhlmann
4
750
Featured
See All Featured
A better future with KSS
kneath
231
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Code Review Best Practice
trishagee
54
15k
Gamification - CAS2011
davidbonilla
76
4.6k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
RailsConf 2023
tenderlove
2
530
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Practical Orchestrator
shlominoach
181
9.7k
A designer walks into a library…
pauljervisheath
199
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Statistics for Hackers
jakevdp
789
220k
4 Signs Your Business is Dying
shpigford
175
21k
Transcript
Facebook Pop — @_ryannystrom
What is Pop? —Born from Facebook Paper —Library similar to
Core Animation —Delightful timing functions —Works on the model layer —NSObject & custom properties
Paper
Paper
Paper
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; }]; }]; }];
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];
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"];
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"];
Demo
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