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.2k
What's new in ARCore from IO19
sasamihoo
1
440
Let's write test code of RxJava!!
sasamihoo
0
960
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
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
160
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
How to Think Like a Performance Engineer
csswizardry
4
590
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
950
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
800
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Featured
See All Featured
Writing Fast Ruby
sferik
623
60k
Rails Girls Zürich Keynote
gr2m
93
13k
Building Adaptive Systems
keathley
34
2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
BBQ
matthewcrist
82
9k
What the flash - Photography Introduction
edds
65
11k
Visualization
eitanlees
139
14k
Embracing the Ebb and Flow
colly
81
4.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
The Language of Interfaces
destraynor
151
23k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Happy Clients
brianwarren
94
6.6k
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)
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ