Android Animation祭り！！！

【東京】【女性限定】言語不問！浴衣でビールクズミニセッション大会#javajo(https://javajo.doorkeeper.jp/events/63154 )で発表した内容です

Transcript

1. AnimationࡇΓʂʂʂ @sasamihoo (teatime hackathonͷϝϯλʔ͖ͯ͠·ͨ͠)
2. ࣗݾ঺հ • sasami(@sasamihoo) • androidΞϓϦ։ൃͱαʔόʔαΠυ(rails)ͷ ΠϯλʔϯΛͯ͠·͢ • ࠷ۙKotlinʹ͸·ͬͯ·͢ • ࠓճॳొஃʂʂʂ(ॳ৺ऀ࿮)
3. Teatime hackathonͷϝϯλʔΛ͠ ͖ͯ·ͨ͠ʂʂʂ
4. Teatime hackathonͱ͸ʁ • ౦େঁࢠݶఆͷϋοΧιϯ • ΄΅શһॳ৺ऀ40ਓ(จ:ཧ=7:3)
5. Teatime hackathonͱ͸ʁ • ܭ4೔ؒͰνʔϜ͝ͱʹ(5ਓ×8νʔϜ)AndroidΞ ϓϦΛ࡞Δ
 (1೔໨:ߨशձ,2೔໨:ΞΠσΟΞܾΊΔ,3~4೔ؒ: ࣮૷+ൃද) • ςʔϚ͸ʮՆʯ • ϝϯλʔ͸ྡͰ࣮૷αϙʔτ
6. େมͩͬͨ͜ͱ • Constrait LayoutΛ࠷ॳʹڭ͑ͯ͠·͏ͱxml Ͱमਖ਼͠ͳ͚Ε͹ͳ͘ͳͬͨ࣌େม • αʔόʔͳ͠Ͱ࡞ΔΞϓϦ
7. ษڧʹͳͬͨ͜ͱ • ঁࢠ໨ઢͰͷΞϓϦ • ϋοΧιϯͰͷΞϓϦ։ൃ
8. ঁࢠ໨ઢͰͷΞϓϦ • ਎಺ͷΈͰͭͳ͕ΔɾૉੑΛ஌Βͳ͍ਓͱ୹ ظతʹͭͳ͕Δͱ͍͏ΞΠσΞ • Ξχϝʔγϣϯଟ͍ʂʂʂ
 (ྲྀΕ੕Λදݱɾνϟοτࣗମ͕Ξχϝʔγϣ ϯɾϗλϧΛදݱ)
9. ͱ͍͏͜ͱͰ… • AnimationࡇΓΛ΍Γ͍ͨͱࢥ͍ͬͯ· ͢ʂʂʂ
10. ࠓճ঺հ͍ͨ͠Animation • Animated Vector Drawable • Physics-based animation • Lottie
11. Animated Vector Drawable
12. Vector Drawable • Support library API 21~ରԠ • svg(Scalable Vector Graphics)ܗࣜʹࣅ͍ͯΔ ΋ͷ
13. SVGܗࣜͱ͸? • xmlܗࣜͰهड़ • Bitmapσʔλ෦෼ͱ࠲ඪ஋Ͱࢦఆ͞Εͨԁɾ ઢ෼౳Λ૊Έ߹ΘͤͨਤܗΛvectorσʔλ෦ ෼ͱͯ͠ࢦఆͰ͖Δ
 ˠαΠζͷมߋʹͭΑ͍ʂʂʂ Source: https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
14. Pro • svgܗࣜͳͷͰը૾͕ߥ͘ͳͬͨΓ͠ͳ͍ • ApkαΠζΛݮΒͤΔ • Ұ౓ඳը͢Δͱcacheͯ͘͠ΕΔ
15. Con • pathॻ͘ͷ͕େม…? • ෳࡶͳ΋ͷΛඳը͗͢͠ΔͱಡΈࠐΈ͕஗͘ ͳͬͯ͠·͏
16. Vector Drawable
17. ͜Μͳײ͡Ͱஔ͖·͢
18. ϑΝΠϧͷม׵ • 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/)

19. Animated Vector Drawable • Vector DrawableΛanimationͰ͖ΔΑ͏ʹ͠ ͨ΋ͷ
20. Animated Vector DrawableͰ Ͱ͖Δ͜ͱ • Rotation • Morph(ผͷܗʹม͑Δ) • Color, position, sizeΛม͑Δ͜ͱ͕Ͱ͖Δ Source: https://dribbble.com/shots/1618281- Material-Design-Animation
21. 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>
22. 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>
23. 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>

24. ͜Μͳײ͡Ͱ·ͱΊΔ͜ͱ΋ <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>
25. xmlΛॻ͘ͷ͕େม…? • ShapeShifter(https://shapeshifter.design/)
 - svgͷಡΈࠐΈɾ(animated) vector drawable ͷॻ͖ग़͠
27. ࣮ࡍʹVector DrawableͰॻ͔Ε͍ͯ Δ΋ͷ • plaid(https://github.com/nickbutcher/plaid)
 iconͷ෦෼ͳͲ͕Vector DrawableͰॻ͔Ε ͍ͯ·͢
28. Physics-based animation
29. Physics-based animation • ෺ཧ๏ଇʹج͍ͮͨanimation
30. Physics-based animation • Natural-looking
 ΑΓϦΞϧλΠϜɾॊೈੑΛ΋ͬͨݟͨ໨ • Course Correction
 λʔήοτ͕มΘͬͨ࣌ʹ؇΍͔ʹఀࢭ͢Δ • Reduced visual janks
 ετϨεΛ༩͑ͳ͍animation

31. Non Physic vs Physics-based animation
32. Non Physic vs Physics-based animation
33. ؔ࿈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Λ࡞੒
34. Fling Animation • User͕objectΛFlickͨ࣌͠ʹanimation͕ঃʑ ʹऴΘΔΑ͏ʹ͢Δ(ঃʑʹ௿଎ʹͳΔ)
35. ࡞Γํ FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X); Fling.setStartVelocity(-velocityX) .setMinValue(0) .setMaxValue(maxScroll) .setFriction(1.1f) .start();
36. ϓϩύςΟ • setStartVelocity()
 ॳظͷ଎౓(pixels per second) • setMin/MaxValue()
 Ͳ͜·Ͱscroll͢Δ͔ͷ஋Λઃఆ • setFriction()
 animationͷݮ଎ͷׂ߹Λఆٛ
37. SpringAnimation • dragͨ͠ڧ͞ͱࣅͨΑ͏ͳڧ͞Ͱ΋ͱʹ໭Ζ͏ͱ͢Δ animationΛ࠶ݱ • ͹Ͷͷڧ͞ʹΑͬͯanimationͷ଎౓͸දݱ͞Ε͍ͯΔ • ͹Ͷͷ߶ੑɾݮਰ཰ɾ࠷ऴతͳҐஔͷΧελϚΠζ͕ Մೳ

38. ࡞Γํ final View img = findViewById(R.id.imageView); final SpringAnimation springAnim = new SpringAnimation(img, DynamicAnimation.TRANSLATION_Y, 0); // springAnim.start()
39. ݮਰ཰(bounce) Anim.getSpring().setDampingRatio(DAMPING_RATIO_LOW _BOUNCE); High Bounce Medium Bounce Low Bounce No Bounce
40. ߶ੑ(stiffness) Anim.getSpring().setStiffness(STIFFNESS_LOW); High Stiffness Medium Stiffness Low Stiffness No Stiffness
41. ૊Έ߹ΘͤΔͱ͜Μͳ͜ͱ΋…!
42. Lottie
43. Lottie
44. Lottie • ͜Μͳײ͡ͷ͓͠ΌΕͳanimation͕࡞Ε· ͢ʂ • iOS/Android/React Nativeڞ௨ • Adobe After EffectͰ࡞ͬͨanimationΛ૊Έ ࠐΉ͚ͩ
45. ࢀߟࢿྉ • αϯϓϧanimation(https://www.lottiefiles.com/) • ৄ͘͠͸(https://github.com/airbnb/lottie-android)
46. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ