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
110
Engineer’s meetup for student
sasamihoo
PRO
0
2.5k
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.8k
Other Decks in Technology
See All in Technology
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
4
230
20250719_JAWS_kobe
takuyay0ne
1
160
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
200
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
0
160
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
680
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
210
Bliki (ja), and the Cathedral, and the Bazaar
koic
7
1.1k
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
870
本当にわかりやすいAIエージェント入門
segavvy
10
5.7k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
370
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
590
M365アカウント侵害時の初動対応
lhazy
5
4.2k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Code Reviewing Like a Champion
maltzj
524
40k
Embracing the Ebb and Flow
colly
86
4.8k
GitHub's CSS Performance
jonrohan
1031
460k
For a Future-Friendly Web
brad_frost
179
9.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A better future with KSS
kneath
238
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Writing Fast Ruby
sferik
628
62k
What's in a price? How to price your products and services
michaelherold
246
12k
RailsConf 2023
tenderlove
30
1.2k
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)
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ