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
130
アニメーションは どうやってできているのか
ベガコーポレーション 山本勝也
2/13 アニメーション研究会
ワークショップ形式で実施
Tyankatsu
February 13, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
370
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
770
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
660
転職初っ端終了しました
tyankatsu
2
850
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
700
npmパッケージ製作に関するあれこれ
tyankatsu
1
1.1k
commit message 絶対統一させるマン
tyankatsu
1
240
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.3k
Other Decks in Programming
See All in Programming
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
170
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
250
AtCoder Conference 2025「LLM時代のAHC」
imjk
2
660
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
mouson
0
250
TestingOsaka6_Ozono
o3
0
270
Context is King? 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
rkaga
10
1.6k
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
philipschwarz
PRO
0
140
Vibe codingでおすすめの言語と開発手法
uyuki234
0
180
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
120
GISエンジニアから見たLINKSデータ
nokonoko1203
0
190
2年のAppleウォレットパス開発の振り返り
muno92
PRO
0
180
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
450
Featured
See All Featured
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
Become a Pro
speakerdeck
PRO
31
5.8k
Agile that works and the tools we love
rasmusluckow
331
21k
A Tale of Four Properties
chriscoyier
162
24k
Documentation Writing (for coders)
carmenintech
77
5.2k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
1
230
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
48
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
150
Getting science done with accelerated Python computing platforms
jacobtomlinson
1
98
Site-Speed That Sticks
csswizardry
13
1k
sira's awesome portfolio website redesign presentation
elsirapls
0
120
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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