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
640
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
200
Facebook & Mobile
rnystrom
0
74
Drawing with Code
rnystrom
1
220
Open Source for the Open Mind
rnystrom
2
190
Mobile Debugging
rnystrom
0
97
Migrating to iOS 7
rnystrom
1
230
Minimal-first Design & Development
rnystrom
1
140
Learning iOS: Part 1
rnystrom
3
80
Other Decks in Programming
See All in Programming
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
410
RDoc meets YARD
okuramasafumi
4
160
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
510
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
370
Design Foundational Data Engineering Observability
sucitw
2
150
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
私の後悔をAWS DMSで解決した話
hiramax
4
190
旅行プランAIエージェント開発の裏側
ippo012
2
810
Langfuseと歩む生成AI活用推進
licux
3
320
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
1
1k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Code Reviewing Like a Champion
maltzj
525
40k
BBQ
matthewcrist
89
9.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Navigating Team Friction
lara
189
15k
Designing for Performance
lara
610
69k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Site-Speed That Sticks
csswizardry
10
810
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