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
UIViewPropertyAnimator and Easing
Search
Tachibana Kaoru
January 28, 2019
Technology
2
990
UIViewPropertyAnimator and Easing
Tachibana Kaoru
January 28, 2019
Tweet
Share
More Decks by Tachibana Kaoru
See All by Tachibana Kaoru
GeoLocationAnchor and MKTileOverlay
toyship
0
310
Custom Group Activities
toyship
3
1.3k
Synchronized iPhones, Again!
toyship
2
1.4k
ARKit4.pdf
toyship
1
2.1k
Custom Gesture Recognizer on iOS
toyship
3
1.3k
HEVC Video with Alpha Channel
toyship
1
1.1k
RealityKit & Reality Composer
toyship
3
540
ARKit3
toyship
4
7.1k
Synchronized iPhones!
toyship
3
4.6k
Other Decks in Technology
See All in Technology
Culture Deck
optfit
0
480
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
350
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
510
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
7
920
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
370
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.8k
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
420
The Future of SEO: The Impact of AI on Search
badams
0
240
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
1.1k
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
270
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
150
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
670
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
What's in a price? How to price your products and services
michaelherold
244
12k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Automating Front-end Workflow
addyosmani
1368
200k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Why Our Code Smells
bkeepers
PRO
336
57k
Adopting Sorbet at Scale
ufuk
74
9.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Transcript
UIViewPropertyAnimator and Easing 1PUBUPUJQT !5BDIJCBOB,BPSV
About Me • @TachibanaKaoru • Freelance iOS Engineer • iOSDC
Core Staff • ϘϧμϦϯά͖ • ཱྀΛ͠ͳ͕ΒࣄΛ͢Δ • όϦౡɺαϯτϦʔχౡɺόϯίΫɺϑΟϯϥ ϯυɺϊϧΣʔɺόϧηϩφɺΞΠεϥϯυ
UIViewPropertyAnimator • From iOS 10.0 • UIViewΛॊೈʹΞχϝʔγϣϯͰ͖Δ • Animation start
/ stop • Custom animation curve
Animation with UIViewPropertyAnimator • Old UIView Animation • UIView.animate(withDuration: 1.0,
delay: 0.0, options: UIView.AnimationOptions.curveEaseInOut, animations: { self.pinkView.center.y += 300 }, completion: {finished in })
Animation with UIViewPropertyAnimator • UIViewPropertyAnimator let easeInOutAnimator = UIViewPropertyAnimator( duration:
1.0, curve: UIView.AnimationCurve.easeInOut, animations: { self.pinkView.center.y += 300 }) easeInOutAnimator.startAnimation()
Animation Curve and easing • UIView.AnimationCurve Linear EaseIn EaseOut EaseInOut
Animation Curve and easing • EaseInOut EaseOut EaseIn position time
Custom Animation with UIViewPropertyAnimator • Customize with controlPoint • let
customAnimation = UIViewPropertyAnimator( duration: 2.0, controlPoint1: CGPoint(x: 0.41999998688697815, y: 0.0), controlPoint2: CGPoint(x: 0.5799999833106995, y: 1.0), animations: { })
What is control points? • ϕδΣۂઢ • ੍ޚ͕̎ -> 3࣍ϕδΣۂઢ
• https://nixeneko.hatenablog.com/entry/2015/06/26/075022 Control point 1 Control point 2 Start point End point
Custom Animation with UIViewPropertyAnimator • Customize with controlPoint • let
customAnimation = UIViewPropertyAnimator( duration: 2.0, controlPoint1: CGPoint(x: 0.41999998688697815, y: 0.0), controlPoint2: CGPoint(x: 0.5799999833106995, y: 1.0), animations: { }) ύϥϝʔλʔௐ͕ΊΜͲ͍͘͞……ɻ
Default Animation Curve let parameterEaseInOut = UICubicTimingParameters(animationCurve:UIView.AnimationCurve.easeInOut) let parameterEaseInOutPoint1 =
parameterEaseInOut.controlPoint1 let parameterEaseInOutPoint2 = parameterEaseInOut.controlPoint2
Default Animation Curve // UIView.AnimationCurve.easeInOut //point1:(0.41999998688697815, 0.0) //point2:(0.5799999833106995, 1.0) //
UIView.AnimationCurve.easeIn //point1:(0.41999998688697815, 0.0) //point2:(1.0, 1.0) // UIView.AnimationCurve.easeOut //point1:(0.0, 0.0) //point2:(0.5799999833106995, 1.0) // UIView.AnimationCurve.linear //point1:(0.0, 0.0) //point2:(1.0, 1.0)
How to determine control points? • ٻΊ͍ͨۂઢ͔ΒɺͲ͏ͬͯAnimation CurveΛ࡞͢Δ͔ʁ • ମͷॳͱՃ͔ΒAnimation
CurveΛ࡞͍ͨ͠ɻʢఆՃӡ ಈͳͲʣ • ݱঢ়ͷAnimatoin CurveͰ͍͠ɻ • ͦͦUIViewͷAnimation Curveࡉ͔͍ಓܭࢉ༻Ͱͳ͍ͷͰɺσ ϑΥϧτͷ property set Λ͍͍ͭ࣋ͬͯͨ͘ํ͕͍͍͔ɻ
jQuery easing • https://easings.net/ • jQuery easing sample
UIViewPropertyAnimator for Easing • Default animation curveΛ Extensionʹ ͓͖ͯ͠·ͨ͠ɻ •
https://github.com/TachibanaKaoru / UIViewPropertyAnimatorEasing