Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
360
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
760
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
660
転職初っ端終了しました
tyankatsu
2
840
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
690
npmパッケージ製作に関するあれこれ
tyankatsu
1
1.1k
commit message 絶対統一させるマン
tyankatsu
1
230
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.3k
Other Decks in Programming
See All in Programming
関数の挙動書き換える
takatofukui
4
770
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
510
組み合わせ爆発にのまれない - 責務分割 x テスト
halhorn
1
110
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
panda728
PRO
37
23k
Rediscover the Console - SymfonyCon Amsterdam 2025
chalasr
2
150
宅宅自以為的浪漫:跟 AI 一起為自己辦的研討會寫一個售票系統
eddie
0
480
AWS CDKの推しポイントN選
akihisaikeda
1
240
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
5
1.9k
Reactive Thinking with Signals and the new Resource API
manfredsteyer
PRO
0
170
無秩序からの脱却 / Emergence from chaos
nrslib
2
12k
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
shogo4131
8
2.1k
令和最新版Android Studioで化石デバイス向けアプリを作る
arkw
0
340
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Six Lessons from altMBA
skipperchong
29
4.1k
Rails Girls Zürich Keynote
gr2m
95
14k
How to train your dragon (web standard)
notwaldorf
97
6.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing for Performance
lara
610
69k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
710
Context Engineering - Making Every Token Count
addyosmani
9
480
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
970
Build your cross-platform service in a week with App Engine
jlugia
234
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Embracing the Ebb and Flow
colly
88
4.9k
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