$30 off During Our Annual Pro Sale. View Details »

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

Gear8
May 14, 2021
140

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

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

Gear8

May 14, 2021
Tweet

Transcript

  1. ΈΜͳɹ
    ͏͘͜͝
    ΪΞελ͍͔͍ͩ̎

    View Slide

  2. ;Ή;Ή
    ܅ɺࠓ౓࡞Δ΢ΣϒͳΜ͚ͩͲͶ
    ͜Μͳ৭ͷ͍ͭͨ൘͕͍ͬͺ͍͋ͬͯ

    View Slide

  3. ΄͏΄͏
    ྃղ͠·ͨ͠
    ϙϯο
    γϡο
    Ͳ͹ʔͬͱ͍ͬͺ͍ಈ͘ͷΛ࡞ͬͯ΄͍͠ΜͩΑ
    ɾ൘͕͔͋ͪͪ͜ΒγϡοͱඈΜͰ͖ͨΓ
    ɾϦϯάͷΤϑΣΫτͱ͍ͬ͠ΐʹΆΜͱग़͖ͯͨΓ

    View Slide

  4. ͔ͪ͠͠ΐͬͽΓ͜·Γ·ͨ͠

    View Slide

  5. ͱ͸ݴͬͨ΋ͷͷɺ+4 ͱ $44 Ͱ
    શ෦ͷཁૉಈ͔͢ͷَϝϯυͩͳʜ
    શ෦Ͱ͍ͭ͋͘ΔΑͩͬͯ
    ൘͕ ݸ Ϧϯά͸൒෼͘Β͍
    ͚͍ͭͨͷͰ໿ ݸ

    View Slide

  6. ͜ΜͳΜશ෦ಈ͔ͯͨ͠ΒҰମԿ೔͔͔Μͩʜ
    ʮ΅ͨͪ͘ͷ͜ͱͪΌΜͱಈ͔ͯ͠Ͷʂʯ ʮ͋ͨͨͪ͠΋ͩΑʂʯ

    View Slide

  7. ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜ
    ҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱ΋ͳ͠

    View Slide

  8. ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜ
    ҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱ΋ͳ͠
    Ґஔ߹Θ͚ͤͩͰ΋େมͳͷʹ
    ͞Βʹ֤ཁૉͷλΠϛϯά߹ΘͤͳΜََͯͷَ

    View Slide

  9. ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜ
    ҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱ΋ͳ͠
    Ґஔ߹Θ͚ͤͩͰ΋େมͳͷʹ
    ͞Βʹ֤ཁૉͷλΠϛϯά߹ΘͤͳΜََͯͷَ
    ͋ʔ΋͏ΊΜͰ͌ʔ

    View Slide

  10. ͱ͜Ζ͕͗ͬͪΐΜ
    ͵ͬ
    ͏͓ͬ

    View Slide

  11. ͜ΕΛܶతʹϥΫʹɺ
    ͦͯ͠ΫΦϦςΟ΋ߴ͘΍ΕΔํ๏͕͋Δ
    Ϛʁ

    View Slide

  12. ͓લ "GUFS&GGFDUT ͸࢖͑ͨΑͳʁ
    ࢖͑ͳ͔ͬͨΒࠓ೔ͷ࿩٧Ή͚Ͳͳ
    ͳΒ࿩͸ૣ͍
    ͏Μ·͋ɾɾɾ

    View Slide

  13. "GUFS&GGFDUT ͬͯʁ
    ಈըฤूιϑτͩϤʂ
    1SFNJFSF ΍ J.PWJF ͱ͔ͱҧͬͯ
    ಈըૉࡐΛλΠϜϥΠϯͰ੾ΓషΓ͢Δ͚ͩ͡Όͳ͘ɺ
    ࡉ͔͍ਤܗ΍ը૾ύʔπΛషͬͯ
    ࣗ༝ʹ֦େɺॖখͱ͔͠์୊ʂ
    ձࣾͷύιίϯͳΒ "EPCF ೖͬͯΔ͸͔ͣͩΒɺ
    ೖͬͯΔΑωʂ

    View Slide

  14. ࣮͸ "GUFS&GGFDUT Ͱ࡞ͬͨΞχϝʔγϣϯΛ
    8FC ʹॻ͖ग़ͯ͠࢖͑Δͷͩ
    ͳ͍ΜͩͳͦΕ͕
    ͑ɺͲʔͤ NQ ͷಈըͱͯ͠
    ॻ͖ग़ͬͯ͢Φν͡Όʜ

    View Slide

  15. "GUFS&GGFDUT ʹ #PEZNPWJO ͱ͍͏ϓϥάΠϯΛೖΕΔͱ
    IUNM TWH
    ͱ KT ͱ QOH Ͱॻ͖ग़ͤΔΜͩ
    ͔ͩΒͱͬͯ΋ܰͯ͘ɺ͓खೖΕϥΫϥΫ
    ·͔͡
    Ոి͔

    View Slide

  16. ·ͣ "GUFS&GGFDUT ʹ #PEZNPWJO ΛೖΕͱ͜͏
    ͋Β͔͡Ί༻ҙ͓͍ͯͨ͠΋ͷ͕ͪ͜ΒͰʙ͢ʢྉཧ൪૊෩ʣ
    ˒͘Θ͍͠ೖΕํ͸΢ΣϒΛΈͯͶʂ

    View Slide

  17. ࠷ॳ͔ͩΒ؆୯ͳΞχϝʔγϣϯ࡞ͬͯΈ͔ͬ
    ී௨ʹΩʔϑϨʔϜଧ࢛ͬͯ֯ܗΛҠಈͤ͞Δ
    ͸͍Α
    ಈըϓϨϏϡʔ
    IUUQTHZB[PDPNFEFDBDC
    πʔʔʔο

    View Slide

  18. ͦͨ͠Β "GUFS&GGFDUT ಺ͷϝχϡʔ͔Β
    #PEZ.PWJO Λ։͘ͱ͜Μͳը໘͕ͰΔɹ Λԡ͢ͱॻ͖ग़͠։࢝

    View Slide

  19. ͋ɺͰ΋ͦͷલʹ͜͜ͷઃఆͰʮ%FNPʯʹνΣοΫೖΕͱ͘ͱ
    IUNM ΋ੜ੒͞ΕΔ͔Β͙֬͢ೝͰ͖Δͧ

    View Slide

  20. ͢Δͱ IUNM ͱ KT ͕อଘ͞ΕΔ͔Βɺ
    IUNM Λ։͘ͱ͜͏ͩʂ
    ˣ࣮෺ͷ IUNM ΈͯͶ
    IUUQTVEPHFBSKQEBUBIUNM

    View Slide

  21. ͦ͏ͦ͏
    ࠓճ͸࢛֯ܗ͚ͩͩͬͨͷͰը૾͸ॻ͖ग़͞Εͣɺ
    TWH ͷύεʹͳͬͨ
    ͓ʙಈ͍ͯΔಈ͍ͯΔ
    ཁૉݕূͨ͠ΒɺTWH ΞχϝͰͰ͖ͯΔͷͶ

    View Slide

  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
    Ͱ΋͜ΕϓϨϏϡʔͩΑͳ
    શը໘ͩ͠
    ຊ൪͸Ͳ͏΍Μͷ

    View Slide

  23. ࣮຿Ͱ࡞ͬͨ΋ͷ

    View Slide

  24. Ͱɺ͓લ͕೰ΜͰͨϠπΛ࣮຿Ͱ΍ͬͯΈͨͷ͕ͪ͜Βͩ
    IUUQTBJNZTDSFFODPN
    ͩΖͩΖʔ
    "F ͷλΠϜϥΠϯͷ͓͔͛Ͱɺ
    ΦϒδΣΫτΛେྔʹಈ͔͢ͷ͕؆୯ͩͬͨ
    ͓ʙʂ
    ࣮ݱͰ͖ͯΜ͡ΌΜ

    View Slide

  25. ͜Ε͕ैདྷͷ KTɺ$44 ௚ॻ͖ͩͬͨΒ్ํ΋ແ͍࡞ۀͩΖ͏
    ͦΕͳ
    ং൫Ͱ΋ݴ͚ͬͨͲ
    ΍ͬͺλΠϜϥΠϯฤूͰ͖Δͱ
    λΠϛϯά߹Θͤͷޮ཰͕ஈҧ͍ΑͶ

    View Slide

  26. ࠓͷ࡞ΓํΛղઆ͢Δͧ
    ·ͣσβΠϯσʔλͷ BJ Λɺ
    ͭͷΦϒδΣΫτʹ͖ͭ ϨΠϠʔʹ෼͚͓ͯ͘Μͩ
    ൘ ຕʹϨΠϠʔ ຕͯ͜ͱͳ
    ϨΠϠʔ
    ϨΠϠʔ
    ϨΠϠʔ ʜΈ͍ͨʹ

    View Slide

  27. ͦͯ͠ BJ ͷ··อଘͯ͠
    "F ʹ΋ͬͯ͘Δ
    ը૾ʹॻ͖ग़͞ͳ͍͍ͯ͘Μͩ
    ָ΍ͳ

    View Slide

  28. ͦͯ͠൘Λ
    ɾҠಈ
    ɾ֦େॖখ
    ɾճస
    ͳͲΛ࢖ͬͯಈ͔͍ͯ͘͠
    IUUQTHZB[PDPNFDDGDEFFGGDFBGB

    View Slide

  29. ࠷ऴతʹ͜͏ͳΔʂ
    IUUQTHZB[PDPNDFEGFDCFEDBB
    ΅͘ಈ͍ͯΔʂ
    ͋ͨ͠΋ಈ͍ͯΔʂ
    ϫγ΋ಈ͍ͱΔʂ
    ϫϯϫϯʂ

    View Slide

  30. Ͳ͏ͩɺಈ͔͍ͨ͠΋ͷ͕େྔʹ͋ͬͯ΋
    ΈΜͳ lಈ͘ࢠz ʹͳͬͨͩΖ͏
    λΠτϧճऩԵ

    View Slide

  31. Ͱ͖Δ͜ͱɾͰ͖ͳ͍͜ͱ

    View Slide

  32. ͦ͏ࢥ͍ͬͯͨ࣌ظ͕ࢲʹ΋͋Γ·ͨ͠
    "F Λͦͷ·· 8FC ʹॻ͖ग़ͤΔͳΒ
    มܗͱ͔ύʔςΟΫϧͱ͔ͷ
    ϑΟϧλ΋͔͚์୊ͳΜ͡ΌͶʁʂ
    ͜ΜͳΜͱ͔

    View Slide

  33. "& ͷΤϑΣΫτܥ͸΄΅࢖͑ͳ͍ͱࢥͬͨ΄͏͕ྑ͍
    ॻ͖ग़ͯ͠΋ແޮʹͳͬͪΌ͏
    ɾ% ΤϑΣΫτؔ܎
    ɾಛघͳϒϥʔ
    ɾΏ͕ΈͳͲͷมܗ
    ɾύʔςΟΫϧ
    ʷ

    View Slide

  34. Ͱ͖Δͷ͸جຊ͜ͷ͘Β͍ͱࢥͬͱ͍ͨ΄͏͕ྑ͍ͩΖ͏
    ·͋ͦΕͰ΋े෼Ͱ͖Δ͜ͱ͸ଟ͍͕ͳ
    ɾҐஔҠಈ
    ɾ֦େॖখ
    ɾճస
    ɾಁ໌
    ɾ;ͭ͏ͷϒϥʔ
    ɾϚεΫɺτϥοΫϚοτ

    ʷ
    ɾ% ΤϑΣΫτؔ܎
    ɾಛघͳϒϥʔ
    ɾΏ͕ΈͳͲͷมܗ
    ɾύʔςΟΫϧ

    View Slide

  35. ؔ܎ͳ͍͚Ͳ
    ւ֎Ͱ˓ʷ ͸௨͡ͳ͍Ϥʂ
    ΈͲΓͷνΣοΫ͘Μ
    ɾҐஔҠಈ
    ɾ֦େॖখ
    ɾճస
    ɾಁ໌
    ɾ;ͭ͏ͷϒϥʔ
    ɾϚεΫɺτϥοΫϚοτ

    ʷ
    ɾ% ΤϑΣΫτؔ܎
    ɾಛघͳϒϥʔ
    ɾΏ͕ΈͳͲͷมܗ
    ɾύʔςΟΫϧ

    View Slide

  36. ॏཁͳͱͩ͜ͱϚεΫ͕࢖͑Δ͜ͱͩͳʂ
    ޷͖ͳܗͰ͘Γൈ͘΍ͭʂ
    ɾҐஔҠಈ
    ɾ֦େॖখ
    ɾճస
    ɾಁ໌
    ɾ;ͭ͏ͷϒϥʔ
    ɾϚεΫɺτϥοΫϚοτ

    View Slide

  37. ͜ͷΑ͏ʹ໼ҹ͕৳ͼͯ͘Ξχϝʔγϣϯ΋
    ϥΫϥΫͩ
    IUUQTHZB[PDPNGCDGDGBGBGFBFF
    ͔ͩΒϝΠϯϏδϡΞϧ͚ͩ͡Όͳ͘ɺ
    ਤղܥͷΞχϝʔγϣϯ΋޲͍ͯΔͳ
    ɹ
    ·͔͡ʂ
    ͜Ε KT ͱ DTT ͩͱɺΊͪΌ͖͔ͭͬͨΜͩΑͳʙ
    ώʔλʔͷਤͱ͔

    View Slide

  38. ͋Εʁจࣈग़Δͱ͖ύʔςΟΫϧ࢖ͬͯΜ͡ΌΜ
    Ͱ͖ͳ͍ͬͯݴͬͨΑͶ
    IUUQTHZB[PDPNFDEDFECBFD
    ଞʹ΋࣮຿Ͱ࡞ͬͨαϯϓϧΛࡌ͓ͤͯ͜͏
    IUUQTTIJOSPLJNPDIJDPN
    ͦΕ͸खಈͰύʔςΟΫϧΆ͘࡞ͬͯΔ͚ͩ
    ίϯϙδγϣϯʹͯ͠ίϐϖ͢Ε͹·ͩϥΫ

    View Slide

  39. ͔ͯ͜ΕͬͯࠓྲྀߦΓͷ
    ϞʔγϣϯάϥϑΟοΫε͡Όʁ

    View Slide

  40. ݟग़͠ͷͱ͓ΓͳΘ͚͕ͩɺͦ͏ͩΑͳ
    ͦ͏ͩͳ
    ϞʔγϣϯάϥϑΟοΫεʹ͸΋͍ͬͯͩ͜ͳ

    View Slide

  41. ϞʔγϣϯάϥϑΟοΫεͬͯʁ
    ਤܗ͕͔ͬ͜Α͘ಈ͘Ξχϝʔγϣϯ
    ͬͯݴͬͨΒ͍͍͔ͳ
    :PV5VCFS ΍ 57 ΍ .7 ͱ͔Ͱ ೥୅຤͘Β͍͔Β
    ྲྀߦΓͩͯ͠ΔΑωʂ
    ͜Μͳͷͱ͔
    IUUQTXXXZPVUVCFDPNXBUDI WD@V0'B6HIL

    View Slide

  42. ϞʔγϣϯάϥϑΟοΫε͍͍Αͳʂ
    ࠓΊͬͪΌྲྀߦͬͯΔ͠ɺ57 Ͱ΋ :PV5VCFS ΋΍ͬͯΔ͠ɺ
    ೥୅ʹྲྀߦͬͨϝϯϑΟεσβΠϯΈ͋ͬͯΤϞ͍͠
    ͓ɺ͓͏

    View Slide

  43. ಈ͖Λ૝ఆͨ͠ఏҊΛ͢Δͱ͖
    Ͳ͏ͯ͠΋ KT ͷ੍໿͔ΒΦϒδΣΫτ਺ͷ
    গͳ͍΋ͷΛத৺ʹ͢Δ͜ͱ΋͋ͬͨͩΖ͏ʜ
    Ͱ͔͍ࣸਅ਺ຕɺจࣈগʑͳͲʜ
    ͔͜͠͠ΕͳΒ "& ͕࢖͑Δ͔ΒλΠϜϥΠϯͰΒ͘Β͘
    ίϐϖ΋͠์୊
    ੍໿͕େ͖͘औΓ෷ΘΕͨΘ͚ͩ
    දݱͷ෯͕޿͕Δͧ

    View Slide

  44. #PEZNPWJO ͕͋Ε͹ɺ
    ཁૉͷ਺͕ଟͯ͘೉͔ͬͨ͠Ϟʔάϥ΋
    8FC ͰͰ͖ΔͬͯΘ͚ͩ
    ·ͩʢ ೥ ݄ݱࡏʣ8FC ͰϞʔάϥ͸
    ͋Μ·ਁಁͯ͠ͳ͍͔Β
    ΑͦͱࠩΛ͚ͭΔνϟϯε͔΋஌Εͳ͍ͧ ˞ݸਓͷײ૝Ͱ͢
    ͋ͷɺղઆԶͷ໾ʜ

    View Slide

  45. Α͠ɺͪΐͬͱσΟϨΫλʔ΍σβΠφʔʹ΋࿩ͯ͠ΈΑͬʂ
    ͜ΜͳΜ͋ΔΜ͢Αʔͬͯ
    ͽΎʔ
    ɾɾɾ

    View Slide

  46. ॳճʹͯ͠ԶͷཱͪҐஔ͕ʜ
    ऐ͍͠ʜ
    ͓ΘΓ

    View Slide