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
August 06, 2017
Technology
1
160
Android Animation祭り!!!
【東京】【女性限定】言語不問!浴衣でビールクズミニセッション大会#javajo(
https://javajo.doorkeeper.jp/events/63154
)で発表した内容です
sasami
August 06, 2017
Tweet
Share
More Decks by sasami
See All by sasami
Overview of Gomobile and Its Use Cases #GopherConAU
sasamihoo
0
120
Engineer’s meetup for student
sasamihoo
0
2.5k
What's new in ARCore from IO19
sasamihoo
1
490
Let's write test code of RxJava!!
sasamihoo
0
1k
How to Kotlin のセッションからKotlinらしい表現を学ぶ / learn_how_to_kotlin
sasamihoo
2
1.4k
Wifi-RTTについて / Wifi-RTT
sasamihoo
1
3.8k
Other Decks in Technology
See All in Technology
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
AI時代、“平均値”ではいられない
uhyo
8
2.6k
AWS re:Invent 2025事前勉強会資料 / AWS re:Invent 2025 pre study meetup
kinunori
0
660
DSPy入門
tomehirata
2
360
Building a cloud native business on open source
lizrice
0
190
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.5k
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
160
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
3
870
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
4
1.2k
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
250
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
Featured
See All Featured
A better future with KSS
kneath
239
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Automating Front-end Workflow
addyosmani
1371
200k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Designing for Performance
lara
610
69k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Code Review Best Practice
trishagee
72
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Balancing Empowerment & Direction
lara
5
700
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)
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ