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
350
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
740
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
650
転職初っ端終了しました
tyankatsu
2
830
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
680
npmパッケージ製作に関するあれこれ
tyankatsu
1
1k
commit message 絶対統一させるマン
tyankatsu
1
230
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.3k
Other Decks in Programming
See All in Programming
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
2
210
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
720
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
110
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
270
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Six Lessons from altMBA
skipperchong
28
3.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
GitHub's CSS Performance
jonrohan
1031
460k
Adopting Sorbet at Scale
ufuk
77
9.5k
RailsConf 2023
tenderlove
30
1.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
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