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
150
Android Animation祭り!!!
【東京】【女性限定】言語不問!浴衣でビールクズミニセッション大会#javajo(
https://javajo.doorkeeper.jp/events/63154
)で発表した内容です
sasami
August 06, 2017
Tweet
Share
More Decks by sasami
See All by sasami
Engineer’s meetup for student
sasamihoo
0
2.3k
What's new in ARCore from IO19
sasamihoo
1
450
Let's write test code of RxJava!!
sasamihoo
0
970
How to Kotlin のセッションからKotlinらしい表現を学ぶ / learn_how_to_kotlin
sasamihoo
2
1.3k
Wifi-RTTについて / Wifi-RTT
sasamihoo
1
3.6k
Other Decks in Technology
See All in Technology
GPSデバイスを使った簡易位置案内システムの構築をしてみた話。/jawsfesta2024
kwada
0
180
AWSの初級者向けAI・ML資格『AWS Certified AI Practitioner』の傾向と対策/So You Want To Pass AWS Certified AI Practitioner
quiver
0
830
RAG: from dumb implementation to serious results
glaforge
0
530
塩野義製薬様のAWS統合管理戦略:Organizations設計と運用の具体例
tkikuchi
0
280
今日から始める技術的負債の解消
leveragestech
3
410
JAWS-UG 事務局 の「これまで」から みんなで「ここから」を考えよう
miu_crescent
2
110
20241017_俺たちは雰囲気で scope をやっているけどもうちょっとなんとかならんのか?
tokai235
0
150
いまいまMySQL2024 @ OSC Nagaoka
sakaik
2
180
見えづらい活動の成果の伝え方は日頃からめちゃくちゃ悩んでるけど、実際こんな取り組みをしな がら温度感を合わせにいってるよ / Conveying Hard-to-See Results
kakehashi
4
2.1k
What a Good Platform Looks Like and How to Get There @ Large Financial Organization, Oct 2024
mfpais
PRO
0
130
ゼロから実装まで!機械学習入門
natsuki0726
0
240
Do you know “Environment Variables” ?
akimiya
0
130
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
110
6.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Navigating Team Friction
lara
183
14k
A Philosophy of Restraint
colly
203
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
KATA
mclloyd
28
13k
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)
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ