Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アニメーションは どうやってできているのか
Search
Tyankatsu
February 13, 2019
Programming
0
120
アニメーションは どうやってできているのか
ベガコーポレーション 山本勝也
2/13 アニメーション研究会
ワークショップ形式で実施
Tyankatsu
February 13, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
300
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
680
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
600
転職初っ端終了しました
tyankatsu
2
780
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
630
npmパッケージ製作に関するあれこれ
tyankatsu
1
940
commit message 絶対統一させるマン
tyankatsu
1
210
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.2k
Other Decks in Programming
See All in Programming
Outline View in SwiftUI
1024jp
1
330
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
290
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
910
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Jakarta EE meets AI
ivargrimstad
0
140
C++でシェーダを書く
fadis
6
4.1k
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
610
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
890
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Bash Introduction
62gerente
608
210k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Thoughts on Productivity
jonyablonski
67
4.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
BBQ
matthewcrist
85
9.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Teambox: Starting and Learning
jrom
133
8.8k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Typedesign – Prime Four
hannesfritz
40
2.4k
Transcript
ຎࡲ
ମʹ ຎࡲ͕͋Γ·͢
ͨͩ͠ຎࡲͳ͍ͷͱ͢Δ ͳΜͯ͜ͱ ࣗવքͰ͋Γ͑·ͤΜ
ຎࡲ͕ͳ͍ͱɺ Ճ͑ͨྗͰҰੜಈ͖ଓ͚·͢
Ұੜӭ͛Δ͠ɺ Ұੜۭඈ·͢
͔͠͠ɺ
ࣗવքͰ ຎࡲઈର͋Γ·͢
ຎࡲ͕͋Δ
ͭ·Γ
ಈ͘͜ͱɺ ࢭ·Δ͜ͱΛՄೳʹ͢Δ
ͭ·Γ
Ξχϝʔγϣϯ͕Ͱ͖Δ✌
Ξχϝʔγϣϯ Ͳ͏ͬͯͰ͖͍ͯΔͷ͔ 2/13 Ξχϝʔγϣϯݚڀձ
ࣗݾհ • νϟϯΧπ(@tyankatsu5) • ϕΨίʔϙϨʔγϣϯ • ϑϩϯτΤϯυΤϯδχΞ • anime.jsͰษڧத •
ӳޠษڧத • ӡӦɿFrontEnd-Fukuoka.spec, Ξχݚ
σΟζχʔͷ 12ͷΞχϝʔγϣϯͷجຊݪଇ Disney's Twelve Basic Principles of Animation
օ͞Μʹ͓ئ͍͝ͱ
12ͷجຊݪଇ͕ ͦΕͧΕͲΜͳͱ͖ʹීஈͷੜ׆Ͱ ݟΒΕΔ͔ڭ͍͑ͯͩ͘͞
SQUASHˍSTRETCH Ҿ͖৳ͯ͠௵͢ https://gfycat.com/orangefastfoxhound
•ॏ͞ɺॊೈ͞ΛݟͤΔ •৳͢ͱ͖ࡉ͘ɺ௵͢ͱ͖͘͢Δ
Anticipation ظ https://gfycat.com/aptimportantegret
•ಈ͖ͦ͏ͩͱզʑʹ༧ײͤ͞Δ •ಈ͖ʹ༧උͷಈ࡞͕ෆՄܽ
Staging ԋग़ https://gfycat.com/valuablefearfulamericanshorthair
•ΛҾ͔ͤΔ •ॏཁͳͷΛզʑʹ͔ΒͤΔ
Straight Ahead Action and Pose to Pose ஞ࣍ඳ͖ͱݪըʹΑΔઃܭ ʢϙʔζ͔Βϙʔζʣ https://gfycat.com/fragrantsleepyasianpiedstarling
Ͳ͔ͬͪͱ͍͏ͱख๏ͷ ͪΐͬͱΘ͔ΒΜͷͰ࣍ৄࡉ
ஞ࣍ඳ͖ • ࡞Γख͕γφϦΦΛѲ͠ͳ͕Βɺཁॴߟ͑ͣ ʹ಄͔Βඳ͍͍ͯ͘ख๏ • ࣄͷ࢝·Γ͔ΒऴΘΓ·ͰΛஸೡʹඳ͍͍ͯ͘ • ಠతͳඳ͖ํ͕ੜ·ΕΔ • ܭըੑʹ͚ܽΔ
ݪըʹΑΔઃܭ ʢϙʔζ͔Βϙʔζʣ • ࠷ॳʹΩʔͱͳΔಈ͖ʢϙʔζΛͱΔಈ͖ʣΛ͍͘ ͔ͭඳ͍ͯɺͦΕ͔ΒؒΛຒΊ͍ͯ͘ • ΩʔΞΫγϣϯ͕ܾ·͍ͬͯΔͷͰಠੑʹ͚ܽΔ
•ߦ͖ͨΓͬͨΓͳΞχϝʔγϣϯʹͳΒͳ͍ •࠷ॳ͔Βඳ͍͍͕ͯ͘ɺ్தͷΩʔΞΫγϣϯΛ ࢦͯ͠ܭըతʹॻ͚Δ
Follow Through and Overlapping Action ϝΠϯͷಈ͖ͱޙ͍ͷಈ͖ https://gfycat.com/decisivethirdbedlingtonterrier
•׳ੑͷ๏ଇΛ׆͔ͨ͠ಈ͖ •࠷ॳʹ͋Δ෦͕ࢭ·ͬͯɺͦΕʹଓ͍ͯଞͷ෦ ͕ࢭ·Δ
Slow In and Slow Out Ώͬ͘ΓೖͬͯΏͬ͘ΓऴΘΔ https://gfycat.com/celebratedconsiderateamphiuma
•࣍ʹݟ͍ͤͨಈ͖·ͰՃͯ͠ɺ͍ۙͮͨΒݮ ͢Δ •ମҰఆͷͰಈ͍ͯࢭ·Δ͜ͱग़དྷͳ͍
Arc ӡಈۂઢ https://gfycat.com/altruisticreliabledoctorfish
•ࣗવͳߦಈٷܗͷيಓΛͨͲͬͯಈ͘ •ॏྗ͕ҙࣝ͞ΕΔ
Secondary Action ෭࣍ΞΫγϣϯ https://gfycat.com/harmlessanydragon
•ϝΠϯͷΞΫγϣϯΛҾཱ͖ͨͤΔΞΫγϣϯ •͋͘·ͰεύΠεͰ͋ͬͯɺϝΠϯͱؔ࿈ੑ͕ͳ ͍ͱ͍͚ͳ͍
Timing λΠϛϯά https://gfycat.com/neighboringcomfortablearrowcrab
•ΞΫγϣϯʹ;͞Θ͍͠εϐʔυΛ͚Δ •Ώͬ͘Γͱͨ͠༏͍͠ײ͡ɺૣͯ͘ߥʑ͍͠ײ͡ •ؒͷίϚͷௐͰදݱ
Exaggeration ތு https://gfycat.com/incompleteblandamericanredsquirrel
•ҙຯͷ͋ΔΦʔόʔϦΞΫγϣϯ •ಈ͖ʹ؇ٸΛ༩͑Δ
Solid drawing ཱମਤ https://gfycat.com/excellentacceptableangora
•3࣍ݩۭؒΛҙࣝ͢Δ •͋ΒΏΔ֯ͰݟͯҰ؏ੑͷ͋ΔΛॻ͘
Appeal Ξϐʔϧ https://gfycat.com/tediousoblongjapanesebeetle
•ମͷັྗΛৢ͠ग़͢ಈ͖ •ಛͷ͋Δܗ
Ҏ্
·ͱΊ
·ͱΊ • Ξχϝʔγϣϯʹઌਓ͕ൃݟͨ͠ϧʔϧ͕͋Δ • Ξχϝʔγϣϯମʹ໋Λਧ͖ࠐΉ࡞ۀ • ͷճΓͷࣄΛ؍ͯ͠ΈΔͱΑΓΞχϝʔγϣ ϯ͕ۙʹײ͡ΒΕΔ͔
͓ΘΓ
ࢀߟ • େ͍ͳΔϝσΟΞɾΞχϝʔγϣϯ 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