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
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Rails アプリ地図考 Flush Cut
makicamel
1
110
『品質』という言葉が嫌いな理由
korimu
0
160
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
DROBEの生成AI活用事例 with AWS
ippey
0
130
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Software Architecture
hschwentner
6
2.1k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
GAEログのコスト削減
mot_techtalk
0
110
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
BBQ
matthewcrist
86
9.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
The Pragmatic Product Professional
lauravandoore
32
6.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Speed Design
sergeychernyshev
25
780
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Rails Girls Zürich Keynote
gr2m
94
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
669
57k
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