Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android Animation祭り!!!

sasami
August 06, 2017

Android Animation祭り!!!

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

sasami

August 06, 2017
Tweet

More Decks by sasami

Other Decks in Technology

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 ͷॻ͖ग़͠

  26. None
  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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ