デザイナーとエンジニアの距離をより近づけるLottie利用術

by Yuji Koyano

Slide 1

Slide 1 text

σβΠφʔͱΤϯδχΞͷ ڑ཭Λ͚ۙͮΔ Lottie ར༻ज़ DroidKaigi 2019   02/08 (Fri.)   Recruit Lifestyle. Yuji Koyano

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

@bandwagondagon ykoyano Yuji Koyano @bandwagondagon ykoyano w 3FDSVJU-JGFTUZMFʹͯ  "OESPJEΤϯδχΞͱͯ͠  "JSϝΠτͱ͍͏ΞϓϦΛ։ൃத w ࠷ۙ͸Ͱ༡ͿͷʹϋϚͬͯ·͢

Slide 4

Slide 4 text

Ξχϝʔγϣϯͷ։ൃίετ͸ߴ͍ w ࡉ෦ͷڞ༗΍ௐ੔͕೉͘͠  σβΠφʔͱΤϯδχΞͷ  ίϛχέʔγϣϯίετ͕ߴ͍ w ෳࡶͳΞχϝʔγϣϯΛ  ίʔυͰ࠶ݱ͢Δͷ͸೉͍͠ w ϓϥοτϑΥʔϜຖʹ࣮૷͕ඞཁ

Slide 5

Slide 5 text

$PQZSJHIU D "JSCOC

Slide 6

Slide 6 text

Lottieͱ͸ʁ w "&Ͱ࡞੒͞ΕͨύεΞχϝʔγϣϯΛ  ඳը͢ΔϥΠϒϥϦ w ֤ϓϥοτϑΥʔϜຖʹ࣮૷͕ଘࡏ  "OESPJE J04 XFC 3FBDU/BUJWF FUD

Slide 7

Slide 7 text

w ΞχϝʔγϣϯΛ+40/ϑΝΠϧͰఆٛ w %ZOBNJD1SPQFSUZʹΑͬͯ  ࣮ߦ࣌ʹΞχϝʔγϣϯΛมߋ͢Δ͜ͱ͕Մೳ w ྨࣅπʔϧͱൺֱͯ͠΋  "&ͷΞχϝʔγϣϯػೳΛ  ࠷΋ଟ͘αϙʔτ Lottieͷಛ௃

Slide 8

Slide 8 text

Lottieͷ୅දతͳ࠶ੜύλʔϯ

Slide 9

Slide 9 text

1. ͦͷ··࠶ੜ͠ଓ͚Δ w ΦϯϘʔσΟϯάɾ΢ΥʔΫεϧʔͰ  Α͘࢖ΘΕ͍ͯΔ w ϧʔϓ࠶ੜͰ࢖ΘΕΔ͜ͱ͕ଟ͍ w എܠಁաҎ֎ͷ໘Ͱ͸  ௨ৗͷಈըͰ΋୅ସՄೳ $PQZSJHIU D "JSCOC

Slide 10

Slide 10 text

2. τϦΨʔʹ൓Ԡͯ͠࠶ੜ w ελϯϓ΍ϥΠΫͳͲͷ  ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠  Α͘࢖ΘΕΔ w ϑϨʔϜ͔Β࠷ऴϑϨʔϜ·Ͱͷ  ॱ࠶ੜͰදݱ͢Δ͜ͱ͕ଟ͍ $BSPMJOB$BKB[FJSB  -JLF"OJNBUJPO

Slide 11

Slide 11 text

3. ࢝఺ͱऴ఺͕ঢ়ଶΛදݱ w 0/0''ͷ஋ͷঢ়ଶભҠΛදݱ͢Δ  ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠  ࢖ΘΕΔ͜ͱ͕ଟ͍ w ॱ࠶ੜɿ0''ˠ0/ͷભҠ  ٯ࠶ੜɿ0/ˠ0''ͷભҠ %BSJT"MJ.VGUJ  .FOVUP$MPTF.BUFSJBM*DPO

Slide 12

Slide 12 text

4. ෳ਺ͷ࠶ੜൣғΛ࣋ͭ w ఀࢭϙΠϯτΛෳ਺༻ҙͯ͠  Ϣʔβʔͷಈ͖ʹରͯ͠  ࠶ੜൣғΛมԽͤ͞Δ w ӈͷྫͰ͸ঢ়ଶؒͷભҠΛ  ϞʔϑΟϯάͰදݱ $PQZSJHIU D "JSCOC

Slide 13

Slide 13 text

w ΞχϝʔγϣϯΛͦͷ··  ֤ϓϥοτϑΥʔϜ্Ͱ࠶ݱͰ͖ΔͨΊ  σβΠφʔɾΤϯδχΞؒͷ  ίϛχέʔγϣϯίετ͕Լ͕Δ w ඞཁͳ࣮૷͕γϯϓϧͰ  ։ൃίετ͕௿͍ LottieΛ࢖͏ϝϦοτ

Slide 14

Slide 14 text

w ಈըͱൺֱͯ͠ϑΝΠϧαΠζ͕খ͍͞ w ΠϯλϥΫςΟϒͳૢ࡞͕Մೳ LottieΛ࢖͏ϝϦοτ

Slide 15

Slide 15 text

͜ͷηογϣϯͷ໨త w -PUUJFΛ࢖ͬͨ͜ͱ͕ͳ͍ΤϯδχΞ͕  σβΠφʔͱҰॹʹ-PUUJFΛ  ಋೖ͢Δ͖͔͚ͬΛ࡞Δ w -PUUJFͷഎܠʹ͋Δٕज़Λཧղ͢Δ͜ͱͰ  σβΠφʔɾΤϯδχΞؒͷ  ϫʔΫϑϩʔΛ͞Βʹޮ཰ԽͰ͖Δ

Slide 16

Slide 16 text

͜ͷηογϣϯͷ໨త w -PUUJFΛऔΓר͘؀ڥ w -PUUJF͕ಈ͘࢓૊Έ w ϫʔΫϑϩʔ5JQTͷ঺հ w Ξχϝʔγϣϯͷ࡞Γํ w ΞϓϦͰͷ-PUUJFͷ࣮૷ํ๏ w ΞϓϦͰͷ۩ମతͳ  -PUUJFͷ࢖͍ॴ ࿩͢͜ͱ ࿩͞ͳ͍͜ͱ

Slide 17

Slide 17 text

-PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ

Slide 18

Slide 18 text

ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ

Slide 19

Slide 19 text

Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ

Slide 20

Slide 20 text

ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

Slide 21

Slide 21 text

ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

Slide 22

Slide 22 text

w ύεΞχϝʔγϣϯ΍7'9ͷ࡞੒ɾฤू͕Մೳͳө૾੍࡞ιϑτ Adobe After Effects (AE)

Slide 23

Slide 23 text

w &YUFOTJPOʹΑͬͯ"&ͷ֦ுػೳΛ࣮ݱ w 5IF"EPCF$PNNPO&YUFOTJCJMJUZ1MBUGPSN $&1   ্ͰϢʔβʔ͕ࣗ༝ʹ&YUFOTJPOΛ։ൃՄೳ w &YUFOTJPOͷྫ  ϝΠϯΧϥʔΛࢦఆ͢Δͱ૬ੑͷΑ͍৭Λࣗಈ഑৭  ࢦఆͨ͠ԻָͷϦζϜΛղੳͯ͠ΩʔϑϨʔϜΛ௥Ճ ɹAdobe After Effects ͷಛ௃

Slide 24

Slide 24 text

ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

Slide 25

Slide 25 text

w "&ͷύεΞχϝʔγϣϯΛ  ಠࣗͷσʔλߏ଄ʹม׵ͯ͠  +40/ϑΝΠϧʹॻ͖ग़͢  "&ͷ&YUFOTJPO w )FSOBO5PSSJTJࢯ  ʹΑͬͯ։ൃ͞Εͨ044 Bodymovin

Slide 26

Slide 26 text

ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

Slide 27

Slide 27 text

lottie-android w -PUUJF"OJNBUJPO7JFXΛ༻͍ͯ  ϑΝΠϧΛಡΈࠐΈɾ࠶ੜ w ҎԼͷํ๏ͷ  ಡΈࠐΈΛαϙʔτ  +40/ϑΝΠϧ  ;*1ϑΝΠϧ  ωοτϫʔΫܦ༝

Slide 28

Slide 28 text

lottie-android public class LottieAnimationView extends AppCompatImageView { public void addValueCallback( KeyPath keyPath, T property, LottieValueCallback callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }

Slide 29

Slide 29 text

lottie-android w αϯϓϧΞϓϦ͕ެ։த w -PUUJFͷϓϨϏϡʔ༻ΞϓϦ  ͱͯ͠࢖͏͜ͱ͕Ͱ͖Δ

Slide 30

Slide 30 text

Lottieﬁles.com

Slide 31

Slide 31 text

Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ

Slide 32

Slide 32 text

-PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ

Slide 33

Slide 33 text

Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ

Slide 34

Slide 34 text

Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

Slide 35

Slide 35 text

w "&ͷύεΞχϝʔγϣϯͷߏ੒ཁૉΛཧղ͢Δ Adobe After Effects (AE)

Slide 36

Slide 36 text

w $PNQPTJUJPO  1SF$PNQPTJUJPO  -BZFS  $POUFOU w ͜ΕΒͷཁૉͷϓϩύςΟΛ  ࣌ؒ࣠Ͱ੍ޚͰ͖Δ  FYϑϨʔϜ໨Ͱಁ໌౓Λʹ͢Δ ύεΞχϝʔγϣϯͷߏ੒ཁૉ

Slide 37

Slide 37 text

w Ξχϝʔγϣϯ͸ͻͱͭͷ$PNQPTJUJPO͔Β࡞ΒΕΔ AE্ͷύεΞχϝʔγϣϯͷߏ଄ NBJO  $PNQPTJUJPO "&ϑϩʔνϟʔτ

Slide 38

Slide 38 text

AE্ͷύεΞχϝʔγϣϯͷߏ଄ w NBJO$PNQPTJUJPO͸1SF$PNQPTJUJPOͱ-BZFS͔Βߏ੒͞ΕΔ IFBSU  -BZFS FYQMPTJPO  1SF$PNQPTJUJPO

Slide 39

Slide 39 text

AE্ͷύεΞχϝʔγϣϯͷߏ଄ w IFBSU-BZFS͸̎ͭͷ$POUFOU͔Βߏ੒͞ΕΔ 1BUI  $POUFOU 'JMM  $POUFOU

Slide 40

Slide 40 text

TIPU  -BZFS TIPU  -BZFS AE্ͷύεΞχϝʔγϣϯͷߏ଄ w FYQMPTJPO1SF$PNQPTJUJPO͸̎ͭͷ-BZFS͔Βߏ੒͞ΕΔ

Slide 41

Slide 41 text

Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

Slide 42

Slide 42 text

Bodymovin w "&ͷΞχϝʔγϣϯΛߏ੒͢Δ  ֤ཁૉΛ+40/ʹॻ͖ग़͍ͯ͘͠  w ཁૉͷΞΫηεʹ͸"&ͷ"1*Λར༻

Slide 43

Slide 43 text

\ Wlz GS ϑϨʔϜϨʔτ JQ ։࢝ϑϨʔϜ PQ ऴྃϑϨʔϜɹ X XJEUI I IFJHIU ONlNBJOz $PNQPTJUJPO໊ ʜ ^ ύεΞχϝʔγϣϯΛॻ͖ग़͢

Slide 44

Slide 44 text

\ ʜ lMBZFST< ʜIFBSU-BZFSͷ৘ใ ʜ$PNQPTJUJPOͷ৘ใ > ʜ ^ AE্ͷύεΞχϝʔγϣϯͷߏ଄ ύεΞχϝʔγϣϯΛॻ͖ग़͢

Slide 45

Slide 45 text

\ ʜ lBTTFUT< ʜ1SF$PNQPTJUJPOͷ৘ใ > ʜ ^ AE্ͷύεΞχϝʔγϣϯͷߏ଄ ύεΞχϝʔγϣϯΛॻ͖ग़͢

Slide 46

Slide 46 text

Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

Slide 47

Slide 47 text

-PUUJF"OJNBUJPO7JFX 1BSTFSΫϥε +40/  ϑΝΠϧ

Slide 48

Slide 48 text

-PUUJF"OJNBUJPO7JFX -PUUJF%SBXBCMF -PUUJF$PNQPTJUJPO 1BSTFSΫϥε

Slide 49

Slide 49 text

1BSTFSΫϥε -PUUJF"OJNBUJPO7JFX -PUUJF%SBXBCMF -PUUJF$PNQPTJUJPO .PEFMΫϥε "OJNBUJPOΫϥε

Slide 50

Slide 50 text

-PUUJF$PNQPTJUJPO1BSTFS   -BZFS1BSTFS    $POUFOU.PEFM1BSTFS    "OJNBUBCMF5SBOTGPSN1BSTFS -BZFS    $POUFOU.PEFM    "OJNBUBCMF7BMVF 1BSTFSΫϥε .PEFMΫϥε

Slide 51

Slide 51 text

-BZFS   $POUFOU.PEFM    "OJNBUBCMF7BMVF $PNQPTJUJPO-BZFS 4IBQF-BZFS 4IBQF$POUFOU 'JMM$POUFOU 1BUI,FZGSBNF"OJNBUJPO  $PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε "OJNBUJPOΫϥε

Slide 52

Slide 52 text

-BZFS   $POUFOU.PEFM    "OJNBUBCMF7BMVF $PNQPTJUJPO-BZFS 4IBQF-BZFS 4IBQF$POUFOU 'JMM$POUFOU 1BUI,FZGSBNF"OJNBUJPO  $PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε ,FZ1BUI&MFNFOU

Slide 53

Slide 53 text

-BZFS   $POUFOU.PEFM    "OJNBUBCMF7BMVF $PNQPTJUJPO-BZFS 4IBQF-BZFS 4IBQF$POUFOU 'JMM$POUFOU 1BUI,FZGSBNF"OJNBUJPO  $PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε ,FZ1BUI&MFNFOU ,FZ1BUI&MFNFOU͸  ,FZ1BUIΫϥεܦ༝Ͱ  ࣮ߦ࣌ʹ஋Λ  มԽͤ͞Δ͜ͱ͕Ͱ͖Δ

Slide 54

Slide 54 text

CompositionLayer  ↓  Layer  ↓  ContentModel  ↓ ShapeFill ↓  AnimatableValue   Content  ↓  FillContent ↓  KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε @RestrictTo(LIBRARY) public interface KeyPathElement { void resolveKeyPath(KeyPath keyPath, int depth, List accumulator, KeyPath currentPartialKeyPath); void addValueCallback(T property, @Nullable LottieValueCallback callback); } public class LottieAnimationView extends AppCompatImageView { public void addValueCallback( KeyPath keyPath, T property, LottieValueCallback callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }

Slide 55

Slide 55 text

Slide 56

Slide 56 text

CompositionLayer  ↓  Layer  ↓  ContentModel  ↓ ShapeFill ↓  AnimatableValue   Content  ↓  FillContent ↓  KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Slide 61

Slide 61 text

-PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ

Slide 62

Slide 62 text

Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ

Slide 63

Slide 63 text

Ξχϝʔγϣϯͷ  मਖ਼ ࠶ੜ͔ͯ͠Βमਖ਼ͷ  ඞཁੑʹؾͮ͘ ύεΛमਖ਼ Bodymovin

Slide 64

Slide 64 text

Ξχϝʔγϣϯͷ  मਖ਼ ࠶ੜ͔ͯ͠Βमਖ਼ͷ  ඞཁੑʹؾͮ͘ ύεΛमਖ਼ Bodymovin ؔ࿈πʔϧ͕ଟ͍Ώ͑ʹ  ख໭Γͷίετ΋ߴ͍ʂ

Slide 65

Slide 65 text

Α͋͘ΔπϥΠ෦෼ w ϓϥοτϑΥʔϜຖ͕αϙʔτ͢Δ"&ͷػೳͷࠩҟ w ϓϨϏϡʔ্ͷ࠶ੜͱ࣮ࡍͷΞϓϦ্Ͱ࠶ੜͰ  Ξχϝʔγϣϯͷҹ৅ʹࠩҟ͕ੜ͡Δ w σβΠϯπʔϧؒͰͷύεσʔλͷಉظ w σβΠφʔɾΤϯδχΞؒͰϨΠϠʔߏ଄ͷڞ༗͕೉͍͠

Slide 66

Slide 66 text

πʔϧؒͰͷύεσʔλͷಉظ w ɹ΍ͷεΫϦϓτ΍&YUFOTJPOΛ࢖ͬͯ  ࣗಈԽͨ͠Γޮ཰Խ͢Δ w &YUFOTJPOʮ0WFSMPSEʯΛ࢖͏ͱ  "*㲗"&ؒͷϑΝΠϧͷߦ͖དྷ͕؆୯ʹͳΔ

Slide 67

Slide 67 text

αϙʔτ͢ΔAEͷػೳͷࠩҟ w MPUUJF3/ɾqVUUFSͳͲ͸಺෦Ͱґଘ͍ͯ͠Δ  MPUUJFBOESPJEɾJ04͕࠷৽Ͱͳ͍ͷͰ஫ҙ w ػೳΛαϙʔτͯ͠ͳ͍ͷ͕  #PEZNPWJOͳͷ͔MPUUJFͳͷ͔Ͱ໰୊Λ੾Γ෼͚Δ w +40/ϑΝΠϧڞ༗ͷ଎౓Λ্͛ͯ  αϙʔτൣғ֎͔Ͳ͏͔ʹؾͮ͘λΠϛϯάΛૣΊΔ

Slide 68

Slide 68 text

JSONϑΝΠϧڞ༗ͷ଎౓Λ্͛Δ w #PU͕23ίʔυɾϓϨϏϡʔΛࣗಈੜ੒ w MPUUJFOPEFΛ࢖͑͹  4FSWFSͰ΋-PUUJF͕࠶ੜՄೳ

Slide 69

Slide 69 text

ϨΠϠʔߏ଄ͷڞ༗͕೉͍͠ w $PNQPTJUJPO -BZFS $POUFOUʹ  ࣝผ͠΍໊͍͢લΛ͚ͭΔ w "&ͷϑϩʔνϟʔτΛڞ༗͢Δ

Slide 70

Slide 70 text

ϓϨϏϡʔ্ͱΞϓϦ্ͷࠩҟ w -PUUJFΛޮ཰తʹσόοά͢ΔͨΊͷ  )ZQFSJPO"OESPJEϓϥάΠϯΛ࡞Γ·ͨ͠ w ΞϓϦΛϏϧυ͠௚͢͜ͱͳ͘  ϓϩύςΟΛมߋͨ͠Γ  ࠶ੜ͢Δ+40/ϑΝΠϧΛมߋ͢Δ͜ͱ͕Ͱ͖·͢ w IUUQTHJUIVCDPNZLPZBOPIZQFSJPOBUUSMPUUJF

Slide 71

Slide 71 text

DEMO

Slide 72

Slide 72 text

·ͱΊ

Slide 73

Slide 73 text

-PUUJFͷར༻ύλʔϯ -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ

Slide 74

Slide 74 text

Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ  Ξχϝʔγϣϯඳը ύεΛ࡞Δ

Slide 75

Slide 75 text

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