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
630
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
73
Drawing with Code
rnystrom
1
210
Open Source for the Open Mind
rnystrom
2
180
Mobile Debugging
rnystrom
0
95
Migrating to iOS 7
rnystrom
1
210
Minimal-first Design & Development
rnystrom
1
140
Learning iOS: Part 1
rnystrom
3
78
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
120
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
180
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
740
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
520
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.7k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
GAEログのコスト削減
mot_techtalk
0
120
時計仕掛けのCompose
mkeeda
1
290
もう僕は OpenAPI を書きたくない
sgash708
3
990
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Automating Front-end Workflow
addyosmani
1367
200k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Making Projects Easy
brettharned
116
6k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Building Adaptive Systems
keathley
40
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
How to Ace a Technical Interview
jacobian
276
23k
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