Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Facebook Pop
Ryan Nystrom
July 01, 2014
Programming
2
520
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
170
Facebook & Mobile
rnystrom
0
52
Drawing with Code
rnystrom
1
210
Open Source for the Open Mind
rnystrom
2
120
Mobile Debugging
rnystrom
0
47
Migrating to iOS 7
rnystrom
1
110
Minimal-first Design & Development
rnystrom
1
60
Learning iOS: Part 1
rnystrom
3
70
Other Decks in Programming
See All in Programming
Git Rebase
bkuhlmann
10
1.2k
Milestoner
bkuhlmann
1
240
Circuit⚡
monaapk
0
200
tidy_rpart
bk_18
0
540
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
160
Remote SSHで行うVS Codeリモートホスト開発とトラブルシューティング
smt7174
1
420
An Advanced Introduction to R
nicetak
0
1.7k
Form実装基本を学び直してみた
hyugatsukui
0
230
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
kakutanitalk2022_opening_act
shirotamaki
0
110
Gradle build: The time is now
nonews
1
380
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
310
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Git: the NoSQL Database
bkeepers
PRO
418
60k
How to name files
jennybc
47
73k
Bash Introduction
62gerente
601
210k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
Music & Morning Musume
bryan
36
4.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
Support Driven Design
roundedbygravity
88
8.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
Infographics Made Easy
chrislema
235
17k
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