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

1.

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

2.

ࣗݾ঺հ

3.

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

4.

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

5.

$PQZSJHIU D "JSCOC

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.


22.

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

23.

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

24.


25.

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

26.


27.

lottie-android w -PUUJF"OJNBUJPO7JFXΛ༻͍ͯ  ϑΝΠϧΛಡΈࠐΈɾ࠶ੜ w ҎԼͷํ๏ͷ  ಡΈࠐΈΛαϙʔτ  +40/ϑΝΠϧ  ;*1ϑΝΠϧ  ωοτϫʔΫܦ༝
<com.airbnb.lottie.LottieAnimationView android:layout_width="match_parent" android:layout_height=“wrap_content” app:lottie_rawRes="@raw/hello_world" app:lottie_fileName="hello_world.json" app:lottie_autoPlay=“true" />

28.

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

29.

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

30.

Lottieﬁles.com

31.


32.


33.


34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.


42.

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

43.

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

44.

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

45.

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

46.


47.

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

48.

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

49.

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

50.

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

51.

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

52.

$PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε ,FZ1BUI&MFNFOU

53.

$PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε ,FZ1BUI&MFNFOU ,FZ1BUI&MFNFOU͸  ,FZ1BUIΫϥεܦ༝Ͱ  ࣮ߦ࣌ʹ஋Λ  มԽͤ͞Δ͜ͱ͕Ͱ͖Δ

54.

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

55.

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

56.

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 }

57.


58.


59.


60.

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 } "&ͷ,FZ1BUIߏ଄Λ೺ѲͰ͖Δͱ    "&ͷͲͷཁૉʹ໰୊͕͋Δͷ͕  ໌֬ʹͳΔͷͰσόοάͷޮ཰্͕͕Δ    ࣮ߦ࣌ʹΞχϝʔγϣϯΛૢ࡞͠΍͘͢ͳΔ

61.


62.


63.

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

64.

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

65.

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

66.

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

67.

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

68.

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

69.

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

70.

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

71.

DEMO

72.

·ͱΊ

73.

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

74.


75.

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

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

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

Want more?

Transcript