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
Android Animation祭り!!!
Search
sasami
PRO
August 06, 2017
Technology
1
150
Android Animation祭り!!!
【東京】【女性限定】言語不問!浴衣でビールクズミニセッション大会#javajo(
https://javajo.doorkeeper.jp/events/63154
)で発表した内容です
sasami
PRO
August 06, 2017
Tweet
Share
More Decks by sasami
See All by sasami
Overview of Gomobile and Its Use Cases #GopherConAU
sasamihoo
PRO
0
100
Engineer’s meetup for student
sasamihoo
PRO
0
2.4k
What's new in ARCore from IO19
sasamihoo
PRO
1
490
Let's write test code of RxJava!!
sasamihoo
PRO
0
1k
How to Kotlin のセッションからKotlinらしい表現を学ぶ / learn_how_to_kotlin
sasamihoo
PRO
2
1.3k
Wifi-RTTについて / Wifi-RTT
sasamihoo
PRO
1
3.7k
Other Decks in Technology
See All in Technology
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
1k
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
240
5min GuardDuty Extended Threat Detection EKS
takakuni
0
160
Prox Industries株式会社 会社紹介資料
proxindustries
0
330
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.4k
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
230
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
190
エンジニア向け技術スタック情報
kauche
1
280
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
250
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
KATA
mclloyd
30
14k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Code Review Best Practice
trishagee
68
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
BBQ
matthewcrist
89
9.7k
Site-Speed That Sticks
csswizardry
10
660
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Pragmatic Product Professional
lauravandoore
35
6.7k
It's Worth the Effort
3n
185
28k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Transcript
AnimationࡇΓʂʂʂ @sasamihoo (teatime hackathonͷϝϯλʔ͖ͯ͠·ͨ͠)
ࣗݾհ • sasami(@sasamihoo) • androidΞϓϦ։ൃͱαʔόʔαΠυ(rails)ͷ ΠϯλʔϯΛͯ͠·͢ • ࠷ۙKotlinʹ·ͬͯ·͢ • ࠓճॳొஃʂʂʂ(ॳ৺ऀ)
Teatime hackathonͷϝϯλʔΛ͠ ͖ͯ·ͨ͠ʂʂʂ
Teatime hackathonͱʁ • ౦େঁࢠݶఆͷϋοΧιϯ • ΄΅શһॳ৺ऀ40ਓ(จ:ཧ=7:3)
Teatime hackathonͱʁ • ܭ4ؒͰνʔϜ͝ͱʹ(5ਓ×8νʔϜ)AndroidΞ ϓϦΛ࡞Δ (1:ߨशձ,2:ΞΠσΟΞܾΊΔ,3~4ؒ: ࣮+ൃද) • ςʔϚʮՆʯ •
ϝϯλʔྡͰ࣮αϙʔτ
େมͩͬͨ͜ͱ • Constrait LayoutΛ࠷ॳʹڭ͑ͯ͠·͏ͱxml Ͱमਖ਼͠ͳ͚Εͳ͘ͳͬͨ࣌େม • αʔόʔͳ͠Ͱ࡞ΔΞϓϦ
ษڧʹͳͬͨ͜ͱ • ঁࢠઢͰͷΞϓϦ • ϋοΧιϯͰͷΞϓϦ։ൃ
ঁࢠઢͰͷΞϓϦ • ͷΈͰͭͳ͕ΔɾૉੑΛΒͳ͍ਓͱ ظతʹͭͳ͕Δͱ͍͏ΞΠσΞ • Ξχϝʔγϣϯଟ͍ʂʂʂ (ྲྀΕΛදݱɾνϟοτࣗମ͕Ξχϝʔγϣ ϯɾϗλϧΛදݱ)
ͱ͍͏͜ͱͰ… • AnimationࡇΓΛΓ͍ͨͱࢥ͍ͬͯ· ͢ʂʂʂ
ࠓճհ͍ͨ͠Animation • Animated Vector Drawable • Physics-based animation • Lottie
Animated Vector Drawable
Vector Drawable • Support library API 21~ରԠ • svg(Scalable Vector
Graphics)ܗࣜʹࣅ͍ͯΔ ͷ
SVGܗࣜͱ? • xmlܗࣜͰهड़ • Bitmapσʔλ෦ͱ࠲ඪͰࢦఆ͞Εͨԁɾ ઢΛΈ߹ΘͤͨਤܗΛvectorσʔλ෦ ͱͯ͠ࢦఆͰ͖Δ ˠαΠζͷมߋʹͭΑ͍ʂʂʂ Source: https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
Pro • svgܗࣜͳͷͰը૾͕ߥ͘ͳͬͨΓ͠ͳ͍ • ApkαΠζΛݮΒͤΔ • Ұඳը͢Δͱcacheͯ͘͠ΕΔ
Con • pathॻ͘ͷ͕େม…? • ෳࡶͳͷΛඳը͗͢͠ΔͱಡΈࠐΈ͕͘ ͳͬͯ͠·͏
Vector Drawable
͜Μͳײ͡Ͱஔ͖·͢
ϑΝΠϧͷม • png->svg - มπʔϧ(http://www.autotracer.org/) • svg->vectorDrawable Vector Assets Studio༻(https://developer.android.com/
studio/write/vector-asset-studio.html?hl=ja) - Google Material Designͷ߹༻ҙ͞Ε͍ͯΔͷΛ ༻Ͱ͖·͢(https://material.io/icons/)
Animated Vector Drawable • Vector DrawableΛanimationͰ͖ΔΑ͏ʹ͠ ͨͷ
Animated Vector DrawableͰ Ͱ͖Δ͜ͱ • Rotation • Morph(ผͷܗʹม͑Δ) • Color,
position, sizeΛม͑Δ͜ͱ͕Ͱ͖Δ Source: https://dribbble.com/shots/1618281- Material-Design-Animation
1. //vd.xml <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group
android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
2. //avd.xml <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" />
<target android:name="vectorPath" android:animation="@anim/path_morph" /> </animated-vector>
3. //rotation.xml <objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" /> //path_morph <set
xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType"/> ɹ</set>
͜Μͳײ͡Ͱ·ͱΊΔ͜ͱ <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector android:width="24dp" android:height="24dp" android:viewportWidth="24"
android:viewportHeight="24"> <path android:name="root" android:strokeWidth="2" android:strokeLineCap="square" android:strokeColor="?android:colorControlNormal" android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" /> </vector> </aapt:attr> <target android:name="root"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="pathData" android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" android:duration="300" android:interpolator="@android:interpolator/fast_out_slow_in" android:valueType="pathType" /> </aapt:attr> </target> </animated-vector>
xmlΛॻ͘ͷ͕େม…? • ShapeShifter(https://shapeshifter.design/) - svgͷಡΈࠐΈɾ(animated) vector drawable ͷॻ͖ग़͠
None
࣮ࡍʹVector DrawableͰॻ͔Ε͍ͯ Δͷ • plaid(https://github.com/nickbutcher/plaid) iconͷ෦ͳͲ͕Vector DrawableͰॻ͔Ε ͍ͯ·͢
Physics-based animation
Physics-based animation • ཧ๏ଇʹج͍ͮͨanimation
Physics-based animation • Natural-looking ΑΓϦΞϧλΠϜɾॊೈੑΛͬͨݟͨ • Course Correction λʔήοτ͕มΘͬͨ࣌ʹ؇͔ʹఀࢭ͢Δ •
Reduced visual janks ετϨεΛ༩͑ͳ͍animation
Non Physic vs Physics-based animation
Non Physic vs Physics-based animation
ؔ࿈class • Android.support.animation animationʹؔ͢ΔओཁͳAPI • DynamicAnimation physics-based animationͷϕʔεclass • SpringAnimation
DynamicAnimationͷsub-class. Spring animationΛ࡞ • SpringForce springʹؔ͢ΔϓϩύςΟΛఆٛ • FlingAnimation DynamicAnimationͷsub-class. fling animationΛ࡞
Fling Animation • User͕objectΛFlickͨ࣌͠ʹanimation͕ঃʑ ʹऴΘΔΑ͏ʹ͢Δ(ঃʑʹʹͳΔ)
࡞Γํ FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X); Fling.setStartVelocity(-velocityX) .setMinValue(0) .setMaxValue(maxScroll)
.setFriction(1.1f) .start();
ϓϩύςΟ • setStartVelocity() ॳظͷ(pixels per second) • setMin/MaxValue() Ͳ͜·Ͱscroll͢Δ͔ͷΛઃఆ •
setFriction() animationͷݮͷׂ߹Λఆٛ
SpringAnimation • dragͨ͠ڧ͞ͱࣅͨΑ͏ͳڧ͞ͰͱʹΖ͏ͱ͢Δ animationΛ࠶ݱ • Ͷͷڧ͞ʹΑͬͯanimationͷදݱ͞Ε͍ͯΔ • Ͷͷ߶ੑɾݮਰɾ࠷ऴతͳҐஔͷΧελϚΠζ͕ Մೳ
࡞Γํ final View img = findViewById(R.id.imageView); final SpringAnimation springAnim =
new SpringAnimation(img, DynamicAnimation.TRANSLATION_Y, 0); // springAnim.start()
ݮਰ(bounce) Anim.getSpring().setDampingRatio(DAMPING_RATIO_LOW _BOUNCE); High Bounce Medium Bounce Low Bounce No
Bounce
߶ੑ(stiffness) Anim.getSpring().setStiffness(STIFFNESS_LOW); High Stiffness Medium Stiffness Low Stiffness No Stiffness
Έ߹ΘͤΔͱ͜Μͳ͜ͱ…!
Lottie
Lottie
Lottie • ͜Μͳײ͡ͷ͓͠ΌΕͳanimation͕࡞Ε· ͢ʂ • iOS/Android/React Nativeڞ௨ • Adobe After
EffectͰ࡞ͬͨanimationΛΈ ࠐΉ͚ͩ
ࢀߟࢿྉ • αϯϓϧanimation(https://www.lottiefiles.com/) • ৄ͘͠(https://github.com/airbnb/lottie-android)
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ