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

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

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