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
1k
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.5k
ARKit4.pdf
toyship
1
2.2k
Custom Gesture Recognizer on iOS
toyship
3
1.3k
HEVC Video with Alpha Channel
toyship
1
1.1k
RealityKit & Reality Composer
toyship
3
560
ARKit3
toyship
4
7.2k
Synchronized iPhones!
toyship
3
4.6k
Other Decks in Technology
See All in Technology
エンジニアリングで組織のアウトカムを最速で最大化する!
ham0215
1
100
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
0
410
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
600
持続可能なドキュメント運用のリアル: 1年間の成果とこれから
akitok_
1
190
Amazon CloudWatch を使って NW 監視を行うには
o11yfes2023
0
170
ここはMCPの夜明けまえ
nwiizo
28
9.9k
技術者はかっこいいものだ!!~キルラキルから学んだエンジニアの生き方~
masakiokuda
2
270
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
240
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
700
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
1
150
QA/SDETの現在と、これからの挑戦
imtnd
0
140
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
130
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to train your dragon (web standard)
notwaldorf
90
6k
Documentation Writing (for coders)
carmenintech
69
4.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
550
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Site-Speed That Sticks
csswizardry
5
500
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Adopting Sorbet at Scale
ufuk
76
9.3k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
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