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
240
Minimal-first Design & Development
rnystrom
1
140
Learning iOS: Part 1
rnystrom
3
80
Other Decks in Programming
See All in Programming
print("Hello, World")
eddie
2
530
チームのテスト力を鍛える
goyoki
3
940
旅行プランAIエージェント開発の裏側
ippo012
2
930
Namespace and Its Future
tagomoris
6
710
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
Deep Dive into Kotlin Flow
jmatsu
1
370
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
2
170
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building Applications with DynamoDB
mza
96
6.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
It's Worth the Effort
3n
187
28k
Navigating Team Friction
lara
189
15k
4 Signs Your Business is Dying
shpigford
184
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
The Pragmatic Product Professional
lauravandoore
36
6.9k
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