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

アニメーションは どうやってできているのか

Tyankatsu
February 13, 2019

アニメーションは どうやってできているのか

ベガコーポレーション 山本勝也
2/13 アニメーション研究会
ワークショップ形式で実施

Tyankatsu

February 13, 2019
Tweet

More Decks by Tyankatsu

Other Decks in Programming

Transcript

  1. ຎࡲ

    View Slide

  2. ෺ମʹ͸
    ຎࡲ͕͋Γ·͢

    View Slide

  3. ͨͩ͠ຎࡲ͸ͳ͍΋ͷͱ͢Δ
    ͳΜͯ͜ͱ͸
    ࣗવքͰ͸͋Γ͑·ͤΜ

    View Slide

  4. ຎࡲ͕ͳ͍ͱɺ
    Ճ͑ͨྗͰҰੜಈ͖ଓ͚·͢

    View Slide

  5. Ұੜӭ͛Δ͠ɺ
    Ұੜۭඈ΂·͢

    View Slide

  6. ͔͠͠ɺ

    View Slide

  7. ࣗવքͰ͸
    ຎࡲ͸ઈର͋Γ·͢

    View Slide

  8. ຎࡲ͕͋Δ

    View Slide

  9. ͭ·Γ

    View Slide

  10. ಈ͘͜ͱɺ
    ࢭ·Δ͜ͱΛՄೳʹ͢Δ

    View Slide

  11. ͭ·Γ

    View Slide

  12. Ξχϝʔγϣϯ͕Ͱ͖Δ✌

    View Slide

  13. Ξχϝʔγϣϯ͸
    Ͳ͏΍ͬͯͰ͖͍ͯΔͷ͔
    2/13 Ξχϝʔγϣϯݚڀձ

    View Slide

  14. ࣗݾ঺հ
    • νϟϯΧπ(@tyankatsu5)
    • ϕΨίʔϙϨʔγϣϯ
    • ϑϩϯτΤϯυΤϯδχΞ
    • anime.jsͰษڧத
    • ӳޠษڧத
    • ӡӦɿFrontEnd-Fukuoka.spec, Ξχݚ

    View Slide

  15. σΟζχʔͷ
    12ͷΞχϝʔγϣϯͷجຊݪଇ
    Disney's Twelve Basic Principles of Animation

    View Slide

  16. օ͞Μʹ͓ئ͍͝ͱ

    View Slide

  17. 12ͷجຊݪଇ͕
    ͦΕͧΕͲΜͳͱ͖ʹීஈͷੜ׆Ͱ
    ݟΒΕΔ͔ڭ͍͑ͯͩ͘͞

    View Slide

  18. SQUASHˍSTRETCH
    Ҿ͖৳͹ͯ͠௵͢
    https://gfycat.com/orangefastfoxhound

    View Slide

  19. •ॏ͞ɺॊೈ͞ΛݟͤΔ
    •৳͹͢ͱ͖͸ࡉ͘ɺ௵͢ͱ͖͸޿͘͢Δ

    View Slide

  20. Anticipation
    ظ଴
    https://gfycat.com/aptimportantegret

    View Slide

  21. •ಈ͖ͦ͏ͩͱզʑʹ༧ײͤ͞Δ
    •ಈ͖ʹ͸༧උͷಈ࡞͕ෆՄܽ

    View Slide

  22. Staging
    ԋग़
    https://gfycat.com/valuablefearfulamericanshorthair

    View Slide

  23. •஫໨ΛҾ͔ͤΔ
    •ॏཁͳ΋ͷΛզʑʹ෼͔ΒͤΔ

    View Slide

  24. Straight Ahead Action
    and Pose to Pose
    ஞ࣍ඳ͖ͱݪըʹΑΔઃܭ
    ʢϙʔζ͔Βϙʔζ΁ʣ
    https://gfycat.com/fragrantsleepyasianpiedstarling

    View Slide

  25. Ͳ͔ͬͪͱ͍͏ͱख๏ͷ࿩
    ͪΐͬͱΘ͔ΒΜͷͰ࣍ৄࡉ

    View Slide

  26. ஞ࣍ඳ͖
    • ࡞Γख͕γφϦΦΛ೺Ѳ͠ͳ͕Β΋ɺཁॴ͸ߟ͑ͣ
    ʹ಄͔Βඳ͍͍ͯ͘ख๏
    • ෺ࣄͷ࢝·Γ͔ΒऴΘΓ·ͰΛஸೡʹඳ͍͍ͯ͘
    • ಠ૑తͳඳ͖ํ͕ੜ·ΕΔ
    • ܭըੑʹ͚ܽΔ

    View Slide

  27. ݪըʹΑΔઃܭ
    ʢϙʔζ͔Βϙʔζ΁ʣ
    • ࠷ॳʹΩʔͱͳΔಈ͖ʢϙʔζΛͱΔಈ͖ʣΛ͍͘
    ͔ͭඳ͍ͯɺͦΕ͔ΒؒΛຒΊ͍ͯ͘
    • ΩʔΞΫγϣϯ͕ܾ·͍ͬͯΔͷͰಠ૑ੑʹ͚ܽΔ

    View Slide

  28. •ߦ͖౰ͨΓ͹ͬͨΓͳΞχϝʔγϣϯʹͳΒͳ͍
    •࠷ॳ͔Βඳ͍͍͕ͯ͘ɺ్தͷΩʔΞΫγϣϯΛ
    ໨ࢦͯ͠ܭըతʹॻ͚Δ

    View Slide

  29. Follow Through
    and Overlapping Action
    ϝΠϯͷಈ͖ͱޙ௥͍ͷಈ͖
    https://gfycat.com/decisivethirdbedlingtonterrier

    View Slide

  30. •׳ੑͷ๏ଇΛ׆͔ͨ͠ಈ͖
    •࠷ॳʹ͋Δ෦෼͕ࢭ·ͬͯɺͦΕʹଓ͍ͯଞͷ෦
    ෼͕ࢭ·Δ

    View Slide

  31. Slow In and Slow Out
    Ώͬ͘ΓೖͬͯΏͬ͘ΓऴΘΔ
    https://gfycat.com/celebratedconsiderateamphiuma

    View Slide

  32. •࣍ʹݟ͍ͤͨಈ͖·ͰՃ଎ͯ͠ɺ͍ۙͮͨΒݮ଎
    ͢Δ
    •෺ମ͸Ұఆͷ଎౓Ͱಈ͍ͯࢭ·Δ͜ͱ͸ग़དྷͳ͍

    View Slide

  33. Arc
    ӡಈۂઢ
    https://gfycat.com/altruisticreliabledoctorfish

    View Slide

  34. •ࣗવͳߦಈ͸ٷܗͷيಓΛͨͲͬͯಈ͘
    •ॏྗ͕ҙࣝ͞ΕΔ

    View Slide

  35. Secondary Action
    ෭࣍ΞΫγϣϯ
    https://gfycat.com/harmlessanydragon

    View Slide

  36. •ϝΠϯͷΞΫγϣϯΛҾཱ͖ͨͤΔΞΫγϣϯ
    •͋͘·ͰεύΠεͰ͋ͬͯɺϝΠϯͱؔ࿈ੑ͕ͳ
    ͍ͱ͍͚ͳ͍

    View Slide

  37. Timing
    λΠϛϯά
    https://gfycat.com/neighboringcomfortablearrowcrab

    View Slide

  38. •ΞΫγϣϯʹ;͞Θ͍͠εϐʔυΛ෇͚Δ
    •Ώͬ͘Γͱͨ͠༏͍͠ײ͡ɺૣͯ͘ߥʑ͍͠ײ͡
    •ؒͷίϚ਺ͷௐ੔Ͱදݱ

    View Slide

  39. Exaggeration
    ތு
    https://gfycat.com/incompleteblandamericanredsquirrel

    View Slide

  40. •ҙຯͷ͋ΔΦʔόʔϦΞΫγϣϯ
    •ಈ͖ʹ؇ٸΛ༩͑Δ

    View Slide

  41. Solid drawing
    ཱମਤ
    https://gfycat.com/excellentacceptableangora

    View Slide

  42. •3࣍ݩۭؒΛҙࣝ͢Δ
    •͋ΒΏΔ֯౓Ͱݟͯ΋Ұ؏ੑͷ͋Δ෺Λॻ͘

    View Slide

  43. Appeal
    Ξϐʔϧ
    https://gfycat.com/tediousoblongjapanesebeetle

    View Slide

  44. •෺ମͷັྗΛৢ͠ग़͢ಈ͖
    •ಛ௃ͷ͋Δ଄ܗ

    View Slide

  45. Ҏ্

    View Slide

  46. ·ͱΊ

    View Slide

  47. ·ͱΊ
    • Ξχϝʔγϣϯʹ͸ઌਓ͕ൃݟͨ͠ϧʔϧ͕͋Δ
    • Ξχϝʔγϣϯ͸෺ମʹ໋Λਧ͖ࠐΉ࡞ۀ
    • ਎ͷճΓͷ෺ࣄΛ؍࡯ͯ͠ΈΔͱΑΓΞχϝʔγϣ
    ϯ͕਎ۙʹײ͡ΒΕΔ͔΋

    View Slide

  48. ͓ΘΓ

    View Slide

  49. ࢀߟ
    • େ͍ͳΔϝσΟΞɾΞχϝʔγϣϯ

    https://hero.okasanta.com/homepage-animation/site/technique_17.html
    • Understand Disney's 12 principles of animation

    https://www.creativebloq.com/advice/understand-the-12-principles-of-animation
    • 12 basic principles of animation

    https://en.wikipedia.org/wiki/12_basic_principles_of_animation

    View Slide