Tweet
Tweet

Slide 1

Slide 1 text

AnimationࡇΓʂʂʂ @sasamihoo (teatime hackathonͷϝϯλʔ͖ͯ͠·ͨ͠)

Slide 2

Slide 2 text

ࣗݾ঺հ • sasami(@sasamihoo) • androidΞϓϦ։ൃͱαʔόʔαΠυ(rails)ͷ ΠϯλʔϯΛͯ͠·͢ • ࠷ۙKotlinʹ͸·ͬͯ·͢ • ࠓճॳొஃʂʂʂ(ॳ৺ऀ࿮)

Slide 3

Slide 3 text

Teatime hackathonͷϝϯλʔΛ͠ ͖ͯ·ͨ͠ʂʂʂ

Slide 4

Slide 4 text

Teatime hackathonͱ͸ʁ • ౦େঁࢠݶఆͷϋοΧιϯ • ΄΅શһॳ৺ऀ40ਓ(จ:ཧ=7:3)

Slide 5

Slide 5 text

Teatime hackathonͱ͸ʁ • ܭ4೔ؒͰνʔϜ͝ͱʹ(5ਓ×8νʔϜ)AndroidΞ ϓϦΛ࡞Δ
 (1೔໨:ߨशձ,2೔໨:ΞΠσΟΞܾΊΔ,3~4೔ؒ: ࣮૷+ൃද) • ςʔϚ͸ʮՆʯ • ϝϯλʔ͸ྡͰ࣮૷αϙʔτ

Slide 6

Slide 6 text

େมͩͬͨ͜ͱ • Constrait LayoutΛ࠷ॳʹڭ͑ͯ͠·͏ͱxml Ͱमਖ਼͠ͳ͚Ε͹ͳ͘ͳͬͨ࣌େม • αʔόʔͳ͠Ͱ࡞ΔΞϓϦ

Slide 7

Slide 7 text

ษڧʹͳͬͨ͜ͱ • ঁࢠ໨ઢͰͷΞϓϦ • ϋοΧιϯͰͷΞϓϦ։ൃ

Slide 8

Slide 8 text

ঁࢠ໨ઢͰͷΞϓϦ • ਎಺ͷΈͰͭͳ͕ΔɾૉੑΛ஌Βͳ͍ਓͱ୹ ظతʹͭͳ͕Δͱ͍͏ΞΠσΞ • Ξχϝʔγϣϯଟ͍ʂʂʂ
 (ྲྀΕ੕Λදݱɾνϟοτࣗମ͕Ξχϝʔγϣ ϯɾϗλϧΛදݱ)

Slide 9

Slide 9 text

ͱ͍͏͜ͱͰ… • AnimationࡇΓΛ΍Γ͍ͨͱࢥ͍ͬͯ· ͢ʂʂʂ

Slide 10

Slide 10 text

ࠓճ঺հ͍ͨ͠Animation • Animated Vector Drawable • Physics-based animation • Lottie

Slide 11

Slide 11 text

Animated Vector Drawable

Slide 12

Slide 12 text

Vector Drawable • Support library API 21~ରԠ • svg(Scalable Vector Graphics)ܗࣜʹࣅ͍ͯΔ ΋ͷ

Slide 13

Slide 13 text

SVGܗࣜͱ͸? • xmlܗࣜͰهड़ • Bitmapσʔλ෦෼ͱ࠲ඪ஋Ͱࢦఆ͞Εͨԁɾ ઢ෼౳Λ૊Έ߹ΘͤͨਤܗΛvectorσʔλ෦ ෼ͱͯ͠ࢦఆͰ͖Δ
 ˠαΠζͷมߋʹͭΑ͍ʂʂʂ Source: https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

Slide 14

Slide 14 text

Pro • svgܗࣜͳͷͰը૾͕ߥ͘ͳͬͨΓ͠ͳ͍ • ApkαΠζΛݮΒͤΔ • Ұ౓ඳը͢Δͱcacheͯ͘͠ΕΔ

Slide 15

Slide 15 text

Con • pathॻ͘ͷ͕େม…? • ෳࡶͳ΋ͷΛඳը͗͢͠ΔͱಡΈࠐΈ͕஗͘ ͳͬͯ͠·͏

Slide 16

Slide 16 text

Vector Drawable

Slide 17

Slide 17 text

͜Μͳײ͡Ͱஔ͖·͢

Slide 18

Slide 18 text

ϑΝΠϧͷม׵ • 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/)


Slide 19

Slide 19 text

Animated Vector Drawable • Vector DrawableΛanimationͰ͖ΔΑ͏ʹ͠ ͨ΋ͷ

Slide 20

Slide 20 text

Animated Vector DrawableͰ Ͱ͖Δ͜ͱ • Rotation • Morph(ผͷܗʹม͑Δ) • Color, position, sizeΛม͑Δ͜ͱ͕Ͱ͖Δ Source: https://dribbble.com/shots/1618281- Material-Design-Animation

Slide 21

Slide 21 text

1. //vd.xml

Slide 22

Slide 22 text

2. //avd.xml

Slide 23

Slide 23 text

3. //rotation.xml //path_morph ɹ


Slide 24

Slide 24 text

͜Μͳײ͡Ͱ·ͱΊΔ͜ͱ΋

Slide 25

Slide 25 text

xmlΛॻ͘ͷ͕େม…? • ShapeShifter(https://shapeshifter.design/)
 - svgͷಡΈࠐΈɾ(animated) vector drawable ͷॻ͖ग़͠

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

࣮ࡍʹVector DrawableͰॻ͔Ε͍ͯ Δ΋ͷ • plaid(https://github.com/nickbutcher/plaid)
 iconͷ෦෼ͳͲ͕Vector DrawableͰॻ͔Ε ͍ͯ·͢

Slide 28

Slide 28 text

Physics-based animation

Slide 29

Slide 29 text

Physics-based animation • ෺ཧ๏ଇʹج͍ͮͨanimation

Slide 30

Slide 30 text

Physics-based animation • Natural-looking
 ΑΓϦΞϧλΠϜɾॊೈੑΛ΋ͬͨݟͨ໨ • Course Correction
 λʔήοτ͕มΘͬͨ࣌ʹ؇΍͔ʹఀࢭ͢Δ • Reduced visual janks
 ετϨεΛ༩͑ͳ͍animation


Slide 31

Slide 31 text

Non Physic vs Physics-based animation

Slide 32

Slide 32 text

Non Physic vs Physics-based animation

Slide 33

Slide 33 text

ؔ࿈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Λ࡞੒

Slide 34

Slide 34 text

Fling Animation • User͕objectΛFlickͨ࣌͠ʹanimation͕ঃʑ ʹऴΘΔΑ͏ʹ͢Δ(ঃʑʹ௿଎ʹͳΔ)

Slide 35

Slide 35 text

࡞Γํ FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X); Fling.setStartVelocity(-velocityX) .setMinValue(0) .setMaxValue(maxScroll) .setFriction(1.1f) .start();

Slide 36

Slide 36 text

ϓϩύςΟ • setStartVelocity()
 ॳظͷ଎౓(pixels per second) • setMin/MaxValue()
 Ͳ͜·Ͱscroll͢Δ͔ͷ஋Λઃఆ • setFriction()
 animationͷݮ଎ͷׂ߹Λఆٛ

Slide 37

Slide 37 text

SpringAnimation • dragͨ͠ڧ͞ͱࣅͨΑ͏ͳڧ͞Ͱ΋ͱʹ໭Ζ͏ͱ͢Δ animationΛ࠶ݱ • ͹Ͷͷڧ͞ʹΑͬͯanimationͷ଎౓͸දݱ͞Ε͍ͯΔ • ͹Ͷͷ߶ੑɾݮਰ཰ɾ࠷ऴతͳҐஔͷΧελϚΠζ͕ Մೳ


Slide 38

Slide 38 text

࡞Γํ final View img = findViewById(R.id.imageView); final SpringAnimation springAnim = new SpringAnimation(img, DynamicAnimation.TRANSLATION_Y, 0); // springAnim.start()

Slide 39

Slide 39 text

ݮਰ཰(bounce) Anim.getSpring().setDampingRatio(DAMPING_RATIO_LOW _BOUNCE); High Bounce Medium Bounce Low Bounce No Bounce

Slide 40

Slide 40 text

߶ੑ(stiffness) Anim.getSpring().setStiffness(STIFFNESS_LOW); High Stiffness Medium Stiffness Low Stiffness No Stiffness

Slide 41

Slide 41 text

૊Έ߹ΘͤΔͱ͜Μͳ͜ͱ΋…!

Slide 42

Slide 42 text

Lottie

Slide 43

Slide 43 text

Lottie

Slide 44

Slide 44 text

Lottie • ͜Μͳײ͡ͷ͓͠ΌΕͳanimation͕࡞Ε· ͢ʂ • iOS/Android/React Nativeڞ௨ • Adobe After EffectͰ࡞ͬͨanimationΛ૊Έ ࠐΉ͚ͩ

Slide 45

Slide 45 text

ࢀߟࢿྉ • αϯϓϧanimation(https://www.lottiefiles.com/) • ৄ͘͠͸(https://github.com/airbnb/lottie-android)

Slide 46

Slide 46 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ