複雑なアニメーションがラクラク After EffectsをWebに書き出すプラグイン

アニメーションはJSやCSS3でやることが多いけど、数が多いと大変だし、表現にも限界がある…そんなときはAfter Effectsと拡張機能「Bodymovin(Lottie)」でタイムラインアニメーションをWeb用に簡単書き出し。ゆるい絵本仕立てでお届け。

Transcript

1. ΈΜͳɹ ͏͘͜͝ ΪΞελ
   ͍͔͍ͩ̎
2. ;Ή;Ή ܅ɺࠓ౓࡞Δ΢ΣϒͳΜ͚ͩͲͶ ͜Μͳ৭ͷ͍ͭͨ൘͕͍ͬͺ͍͋ͬͯ
3. ΄͏΄͏ ྃղ͠·ͨ͠ ϙϯο γϡο Ͳ͹ʔͬͱ͍ͬͺ͍ಈ͘ͷΛ࡞ͬͯ΄͍͠ΜͩΑ ɾ൘͕͔͋ͪͪ͜ΒγϡοͱඈΜͰ͖ͨΓ ɾϦϯάͷΤϑΣΫτͱ͍ͬ͠ΐʹΆΜͱग़͖ͯͨΓ
4. ͔͠͠
   ͪΐͬͽΓ͜·Γ·ͨ͠
5. ͱ͸ݴͬͨ΋ͷͷɺ+4 ͱ $44 Ͱ શ෦ͷཁૉಈ͔͢ͷَϝϯυͩͳʜ શ෦Ͱ͍ͭ͋͘ΔΑͩͬͯ ൘͕  ݸ Ϧϯά͸൒෼͘Β͍ ͚͍ͭͨͷͰ໿  ݸ
6. ͜ΜͳΜશ෦ಈ͔ͯͨ͠ΒҰମԿ೔͔͔Μͩʜ ʮ΅ͨͪ͘ͷ͜ͱͪΌΜͱಈ͔ͯ͠Ͷʂʯ ʮ͋ͨͨͪ͠΋ͩΑʂʯ
7. ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜ ҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱ΋ͳ͠
8. ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜ ҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱ΋ͳ͠ Ґஔ߹Θ͚ͤͩͰ΋େมͳͷʹ ͞Βʹ֤ཁૉͷλΠϛϯά߹ΘͤͳΜََͯͷَ
9. ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜ ҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱ΋ͳ͠ Ґஔ߹Θ͚ͤͩͰ΋େมͳͷʹ ͞Βʹ֤ཁૉͷλΠϛϯά߹ΘͤͳΜََͯͷَ ͋ʔ΋͏ΊΜͰ͌ʔ
10. ͱ͜Ζ͕͗ͬͪΐΜ ͵ͬ ͏͓ͬ
    
    
    
    
    
11. ͜ΕΛܶతʹϥΫʹɺ ͦͯ͠ΫΦϦςΟ΋ߴ͘΍ΕΔํ๏͕͋Δ Ϛʁ
12. ͓લ "GUFS
    &GGFDUT ͸࢖͑ͨΑͳʁ ࢖͑ͳ͔ͬͨΒࠓ೔ͷ࿩٧Ή͚Ͳͳ ͳΒ࿩͸ૣ͍ ͏Μ·͋ɾɾɾ
13. "GUFS
    &GGFDUT ͬͯʁ ಈըฤूιϑτͩϤʂ 1SFNJFSF ΍ J.PWJF ͱ͔ͱҧͬͯ ಈըૉࡐΛλΠϜϥΠϯͰ੾ΓషΓ͢Δ͚ͩ͡Όͳ͘ɺ ࡉ͔͍ਤܗ΍ը૾ύʔπΛషͬͯ ࣗ༝ʹ֦େɺॖখͱ͔͠์୊ʂ ձࣾͷύιίϯͳΒ "EPCF ೖͬͯΔ͸͔ͣͩΒɺ ೖͬͯΔΑωʂ
14. ࣮͸ "GUFS
    &GGFDUT Ͱ࡞ͬͨΞχϝʔγϣϯΛ 8FC ʹॻ͖ग़ͯ͠࢖͑Δͷͩ ͳ͍ΜͩͳͦΕ͕ ͑ɺͲʔͤ NQ ͷಈըͱͯ͠ ॻ͖ग़ͬͯ͢Φν͡Όʜ
15. "GUFS
    &GGFDUT ʹ #PEZNPWJO ͱ͍͏ϓϥάΠϯΛೖΕΔͱ IUNM TWH ͱ KT ͱ QOH Ͱॻ͖ग़ͤΔΜͩ ͔ͩΒͱͬͯ΋ܰͯ͘ɺ͓खೖΕϥΫϥΫ ·͔͡ Ոి͔
16. ·ͣ "GUFS
    &GGFDUT ʹ #PEZNPWJO ΛೖΕͱ͜͏ ͋Β͔͡Ί༻ҙ͓͍ͯͨ͠΋ͷ͕ͪ͜ΒͰʙ͢ʢྉཧ൪૊෩ʣ ˒͘Θ͍͠ೖΕํ͸΢ΣϒΛΈͯͶʂ
17. ࠷ॳ͔ͩΒ؆୯ͳΞχϝʔγϣϯ࡞ͬͯΈ͔ͬ ී௨ʹΩʔϑϨʔϜଧ࢛ͬͯ֯ܗΛҠಈͤ͞Δ ͸͍Α ಈըϓϨϏϡʔ IUUQTHZB[PDPNFEFDBDC πʔʔʔο
18. ͦͨ͠Β "GUFS&GGFDUT ಺ͷϝχϡʔ͔Β #PEZ.PWJO Λ։͘ͱ͜Μͳը໘͕ͰΔɹ Λԡ͢ͱॻ͖ग़͠։࢝
19. ͋ɺͰ΋ͦͷલʹ͜͜ͷઃఆͰʮ%FNPʯʹνΣοΫೖΕͱ͘ͱ IUNM ΋ੜ੒͞ΕΔ͔Β͙֬͢ೝͰ͖Δͧ
20. ͢Δͱ IUNM ͱ KT ͕อଘ͞ΕΔ͔Βɺ IUNM Λ։͘ͱ͜͏ͩʂ ˣ࣮෺ͷ IUNM ΈͯͶ IUUQTVEPHFBSKQEBUBIUNM
21. ͦ͏ͦ͏ ࠓճ͸࢛֯ܗ͚ͩͩͬͨͷͰը૾͸ॻ͖ग़͞Εͣɺ TWH ͷύεʹͳͬͨ ͓ʙಈ͍ͯΔಈ͍ͯΔ ཁૉݕূͨ͠ΒɺTWH ΞχϝͰͰ͖ͯΔͷͶ
22. KT Λຊ൪༻ϑΥϧμʹೖΕͯɺIUNM ʹλάͱ͔ KT ͱ͔Λ ͽΌͬʔɺΘʔͬͱॻ͘ͱͰ͖Δͧʢ͖ͯͱ͏ʣ αΠζ΋ࣗࡏ ࣗಈ࠶ੜɺϧʔϓ΋ઃఆՄ ͜ΜͳΜˠ EJW
    JENW@CH
    DMBTTNNWCHEJW
    
    
    TDSJQU
    
    
    WBS
    QBSBNT
    
    \
    
    
    
    DPOUBJOFS
    EPDVNFOUHFU&MFNFOU#Z*E NW@CH
    
    
    
    SFOEFSFS
    IUNM
    
    
    
    MPPQ
    GBMTF
    
    
    
    BVUPQMBZ
    GBMTF
    
    
    
    
    QBUI
    SFTPVSDFTKTNWEBUBKTPO
    
    
    
    ^
    
    
    WBS
    NW"OJN
    
    
    NW"OJN
    
    MPUUJFMPBE"OJNBUJPO QBSBNT 
    
    
    TDSJQU Ͱ΋͜ΕϓϨϏϡʔͩΑͳ શը໘ͩ͠ ຊ൪͸Ͳ͏΍Μͷ
23. ࣮຿Ͱ࡞ͬͨ΋ͷ
24. Ͱɺ͓લ͕೰ΜͰͨϠπΛ࣮຿Ͱ΍ͬͯΈͨͷ͕ͪ͜Βͩ IUUQTBJNZTDSFFODPN ͩΖͩΖʔ "F ͷλΠϜϥΠϯͷ͓͔͛Ͱɺ ΦϒδΣΫτΛେྔʹಈ͔͢ͷ͕؆୯ͩͬͨ ͓ʙʂ ࣮ݱͰ͖ͯΜ͡ΌΜ
25. ͜Ε͕ैདྷͷ KTɺ$44 ௚ॻ͖ͩͬͨΒ్ํ΋ແ͍࡞ۀͩΖ͏ ͦΕͳ ং൫Ͱ΋ݴ͚ͬͨͲ ΍ͬͺλΠϜϥΠϯฤूͰ͖Δͱ λΠϛϯά߹Θͤͷޮ཰͕ஈҧ͍ΑͶ
26. ࠓͷ࡞ΓํΛղઆ͢Δͧ ·ͣσβΠϯσʔλͷ BJ Λɺ  ͭͷΦϒδΣΫτʹ͖ͭ  ϨΠϠʔʹ෼͚͓ͯ͘Μͩ ൘  ຕʹϨΠϠʔ  ຕͯ͜ͱͳ ϨΠϠʔ  ϨΠϠʔ  ϨΠϠʔ ʜΈ͍ͨʹ
27. ͦͯ͠ BJ ͷ··อଘͯ͠ "F ʹ΋ͬͯ͘Δ ը૾ʹॻ͖ग़͞ͳ͍͍ͯ͘Μͩ ָ΍ͳ
28. ͦͯ͠൘Λ ɾҠಈ ɾ֦େॖখ ɾճస ͳͲΛ࢖ͬͯಈ͔͍ͯ͘͠ IUUQTHZB[PDPNFDDGDEFFGGDFBGB
29. ࠷ऴతʹ͜͏ͳΔʂ IUUQTHZB[PDPNDFEGFDCFEDBB ΅͘ಈ͍ͯΔʂ ͋ͨ͠΋ಈ͍ͯΔʂ ϫγ΋ಈ͍ͱΔʂ ϫϯϫϯʂ
30. Ͳ͏ͩɺಈ͔͍ͨ͠΋ͷ͕େྔʹ͋ͬͯ΋ ΈΜͳ lಈ͘ࢠz ʹͳͬͨͩΖ͏ λΠτϧճऩԵ
31. Ͱ͖Δ͜ͱɾͰ͖ͳ͍͜ͱ
32. ͦ͏ࢥ͍ͬͯͨ࣌ظ͕ࢲʹ΋͋Γ·ͨ͠ "F Λͦͷ·· 8FC ʹॻ͖ग़ͤΔͳΒ มܗͱ͔ύʔςΟΫϧͱ͔ͷ ϑΟϧλ΋͔͚์୊ͳΜ͡ΌͶʁʂ ͜ΜͳΜͱ͔
33. "& ͷΤϑΣΫτܥ͸΄΅࢖͑ͳ͍ͱࢥͬͨ΄͏͕ྑ͍ ॻ͖ग़ͯ͠΋ແޮʹͳͬͪΌ͏ ɾ% ΤϑΣΫτؔ܎ ɾಛघͳϒϥʔ ɾΏ͕ΈͳͲͷมܗ ɾύʔςΟΫϧ ʷ
34. Ͱ͖Δͷ͸جຊ͜ͷ͘Β͍ͱࢥͬͱ͍ͨ΄͏͕ྑ͍ͩΖ͏ ·͋ͦΕͰ΋े෼Ͱ͖Δ͜ͱ͸ଟ͍͕ͳ ɾҐஔҠಈ ɾ֦େॖখ ɾճస ɾಁ໌ ɾ;ͭ͏ͷϒϥʔ ɾϚεΫɺτϥοΫϚοτ 㾎 ʷ ɾ% ΤϑΣΫτؔ܎ ɾಛघͳϒϥʔ ɾΏ͕ΈͳͲͷมܗ ɾύʔςΟΫϧ
35. ؔ܎ͳ͍͚Ͳ ւ֎Ͱ˓ʷ ͸௨͡ͳ͍Ϥʂ ΈͲΓͷνΣοΫ͘Μ ɾҐஔҠಈ ɾ֦େॖখ ɾճస ɾಁ໌ ɾ;ͭ͏ͷϒϥʔ ɾϚεΫɺτϥοΫϚοτ 㾎 ʷ ɾ% ΤϑΣΫτؔ܎ ɾಛघͳϒϥʔ ɾΏ͕ΈͳͲͷมܗ ɾύʔςΟΫϧ
36. ॏཁͳͱͩ͜ͱϚεΫ͕࢖͑Δ͜ͱͩͳʂ ޷͖ͳܗͰ͘Γൈ͘΍ͭʂ ɾҐஔҠಈ ɾ֦େॖখ ɾճస ɾಁ໌ ɾ;ͭ͏ͷϒϥʔ ɾϚεΫɺτϥοΫϚοτ 㾎
37. ͜ͷΑ͏ʹ໼ҹ͕৳ͼͯ͘Ξχϝʔγϣϯ΋ ϥΫϥΫͩ IUUQTHZB[PDPNGCDGDGBGBGFBFF ͔ͩΒϝΠϯϏδϡΞϧ͚ͩ͡Όͳ͘ɺ ਤղܥͷΞχϝʔγϣϯ΋޲͍ͯΔͳ ɹ ·͔͡ʂ ͜Ε KT ͱ DTT ͩͱɺΊͪΌ͖͔ͭͬͨΜͩΑͳʙ ώʔλʔͷਤͱ͔
38. ͋Εʁจࣈग़Δͱ͖ύʔςΟΫϧ࢖ͬͯΜ͡ΌΜ Ͱ͖ͳ͍ͬͯݴͬͨΑͶ IUUQTHZB[PDPNFDEDFECBFD ଞʹ΋࣮຿Ͱ࡞ͬͨαϯϓϧΛࡌ͓ͤͯ͜͏ IUUQTTIJOSPLJNPDIJDPN ͦΕ͸खಈͰύʔςΟΫϧΆ͘࡞ͬͯΔ͚ͩ ίϯϙδγϣϯʹͯ͠ίϐϖ͢Ε͹·ͩϥΫ
39. ͔ͯ͜ΕͬͯࠓྲྀߦΓͷ ϞʔγϣϯάϥϑΟοΫε͡Όʁ
40. ݟग़͠ͷͱ͓ΓͳΘ͚͕ͩɺͦ͏ͩΑͳ ͦ͏ͩͳ ϞʔγϣϯάϥϑΟοΫεʹ͸΋͍ͬͯͩ͜ͳ
41. ϞʔγϣϯάϥϑΟοΫεͬͯʁ ਤܗ͕͔ͬ͜Α͘ಈ͘Ξχϝʔγϣϯ ͬͯݴͬͨΒ͍͍͔ͳ :PV5VCFS ΍ 57 ΍ .7 ͱ͔Ͱ  ೥୅຤͘Β͍͔Β ྲྀߦΓͩͯ͠ΔΑωʂ ͜Μͳͷͱ͔ IUUQTXXXZPVUVCFDPNXBUDI WD@V0'B6HIL
42. ϞʔγϣϯάϥϑΟοΫε͍͍Αͳʂ ࠓΊͬͪΌྲྀߦͬͯΔ͠ɺ57 Ͱ΋ :PV5VCFS ΋΍ͬͯΔ͠ɺ  ೥୅ʹྲྀߦͬͨϝϯϑΟεσβΠϯΈ͋ͬͯΤϞ͍͠ ͓ɺ͓͏
43. ಈ͖Λ૝ఆͨ͠ఏҊΛ͢Δͱ͖ Ͳ͏ͯ͠΋ KT ͷ੍໿͔ΒΦϒδΣΫτ਺ͷ গͳ͍΋ͷΛத৺ʹ͢Δ͜ͱ΋͋ͬͨͩΖ͏ʜ Ͱ͔͍ࣸਅ਺ຕɺจࣈগʑͳͲʜ ͔͜͠͠ΕͳΒ "& ͕࢖͑Δ͔ΒλΠϜϥΠϯͰΒ͘Β͘ ίϐϖ΋͠์୊ ੍໿͕େ͖͘औΓ෷ΘΕͨΘ͚ͩ දݱͷ෯͕޿͕Δͧ
44. #PEZNPWJO ͕͋Ε͹ɺ ཁૉͷ਺͕ଟͯ͘೉͔ͬͨ͠Ϟʔάϥ΋ 8FC ͰͰ͖ΔͬͯΘ͚ͩ ·ͩʢ ೥  ݄ݱࡏʣ8FC ͰϞʔάϥ͸ ͋Μ·ਁಁͯ͠ͳ͍͔Β ΑͦͱࠩΛ͚ͭΔνϟϯε͔΋஌Εͳ͍ͧ ˞ݸਓͷײ૝Ͱ͢ ͋ͷɺղઆԶͷ໾ʜ
45. Α͠ɺͪΐͬͱσΟϨΫλʔ΍σβΠφʔʹ΋࿩ͯ͠ΈΑͬʂ ͜ΜͳΜ͋ΔΜ͢Αʔͬͯ ͽΎʔ ɾɾɾ
46. ॳճʹͯ͠ԶͷཱͪҐஔ͕ʜ ऐ͍͠ʜ ͓ΘΓ