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
310
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
690
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
600
転職初っ端終了しました
tyankatsu
2
790
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
640
npmパッケージ製作に関するあれこれ
tyankatsu
1
940
commit message 絶対統一させるマン
tyankatsu
1
210
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.2k
Other Decks in Programming
See All in Programming
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
700
Zoneless Testing
rainerhahnekamp
0
120
Refactor your code - refactor yourself
xosofox
1
260
たのしいparse.y
ydah
3
120
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
200
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
180
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
270
第5回日本眼科AI学会総会_AIコンテスト_3位解法
neilsaw
0
170
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
310
Beyond ORM
77web
2
330
クリエイティブコーディングとRuby学習 / Creative Coding and Learning Ruby
chobishiba
0
3.9k
バグを見つけた?それAppleに直してもらおう!
uetyo
0
180
Featured
See All Featured
Speed Design
sergeychernyshev
25
670
How to train your dragon (web standard)
notwaldorf
88
5.7k
How GitHub (no longer) Works
holman
311
140k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Scaling GitHub
holman
458
140k
The Cost Of JavaScript in 2023
addyosmani
45
7k
Designing for humans not robots
tammielis
250
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Designing for Performance
lara
604
68k
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