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

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

393e0e69779866f0154f555329761034?s=47 Gear8
May 14, 2021
29

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

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

393e0e69779866f0154f555329761034?s=128

Gear8

May 14, 2021
Tweet

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 ͱ͔Λ ͽΌͬʔɺΘʔͬͱॻ͘ͱͰ͖Δͧʢ͖ͯͱ͏ʣ αΠζ΋ࣗࡏ ࣗಈ࠶ੜɺϧʔϓ΋ઃఆՄ ͜ΜͳΜˠ EJWJENW@CHDMBTTNNWCHEJW

       TDSJQU    WBSQBSBNT\     DPOUBJOFSEPDVNFOUHFU&MFNFOU#Z*E NW@CH     SFOEFSFSIUNM     MPPQGBMTF     BVUPQMBZGBMTF    QBUISFTPVSDFTKTNWEBUBKTPO    ^    WBSNW"OJN    NW"OJNMPUUJFMPBE"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. ॳճʹͯ͠ԶͷཱͪҐஔ͕ʜ ऐ͍͠ʜ ͓ΘΓ