今どきのWebアニメーション実装

2019/3/8 新潟グラム2019 vol.1

Transcript

1. 今どきの Webアニメーション実装 五⼗川 洋平 (POPCORN) 2019.03.08 新潟グラム 
2. 五⼗川 洋平（イソップ） 上越の⺠ Twitter：@yuhiisk イソップブログ（https://blog.yuhiisk.com） ⾃⼰紹介
3. 上越TechMeetupよろしくね！
4. 上越TechMeetupよろしくね！ https://jtm.connpass.com/event/123149/
5. 上越TechMeetupよろしくね！ @teppeis が来るよ！
6. Webのアニメーション
7. 本⽇のプログラム 実装⽅法の紹介 CSS JavaScript SVG ツールを使ったアニメーション制作 アニメーション制作のポイント
8. CSS
9. .scale-transition { transition: transform .3s ease; } CSS Transitions
10. .animation-scale { &:hover { animation: scaled-animation .3s ease; } } CSS Animations
11. .animation-scale { &:hover { animation: scaled-animation .3s ease; } } CSS Animations keyframe
12. @keyframes scaled-animation { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } CSS Animations
13. CSSアニメーション お⼿軽 動きが軽い
14. CSSアニメーション https://daneden.github.io/animate.css/
15. Spriteアニメーション
17. Spriteアニメーション
18. Spriteアニメーション
19. Spriteアニメーション
20. Spriteアニメーション
21. Spriteアニメーション
22. Spriteアニメーション
23. Spriteアニメーション
24. Spriteアニメーション
25. Spriteアニメーション
26. Spriteアニメーション
27. Spriteアニメーション
28. Spriteアニメーション
29. Spriteアニメーション
30. Spriteアニメーション 技術⼒が無いけど凝った演出をしたい場合 デザイナー主導で作成したいとき
31. Spriteアニメーション .heart.is-active { overflow: hidden; width: 100px; height: 100px; background: url(../sprites.png) 0 0 no-repeat; animation: sprite-animation 1.2s steps(28, start); } @keyframes sprite-animation { 0% { background-position: 0 0; } 100% { background-position: -2800px 0; } }
32. Spriteアニメーション .heart.is-active { overflow: hidden; width: 100px; height: 100px; background: url(../sprites.png) 0 0 no-repeat; animation: sprite-animation 1.2s steps(28, start); } @keyframes sprite-animation { 0% { background-position: 0 0; } 100% { background-position: -2800px 0; } }
33. SVG
34. SVG <svg width="300px" height="100px"> <rect x="0" y="0" width="300" height="100" /> <circle cx="0" cy="50" r="15" fill="blue" /> </svg
35. SVG パスアニメーション 拡⼤縮⼩に強いためレスポンシブ対応に最適
36. SVGアニメーション CSS SMIL JavaScript
37. SVGアニメーション CSS SMIL JavaScript
38. SMIL <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" /> </circle>
39. SVGアニメーション Snap.svg Vivus
40. SVGアニメーション https://www.wecraftapps.com/ https://cuberto.com/
41. JavaScript
42. JavaScriptアニメーション
43. JavaScriptアニメーション DOMアニメーション styleプロパティの値やスクロールポジション を変更
44. JavaScriptアニメーション Canvasアニメーション CSSに⽐べて表現⼒が⾼い
45. JavaScriptライブラリ jQuery（animate） TweenMax Anime.js Velocity
46. Web Animations API https://caniuse.com/#feat=web-animation
47. Web Animations API Polyfillライブラリでクロスブラウザ対応可能 https://github.com/web-animations/web- animations-js
48. Canvasアニメーション
49. Canvasアニメーション <canvas width="400" height="400"> </canvas>
50. Canvasアニメーション
51. Canvasアニメーション
52. Canvasアニメーション
53. Canvasアニメーション JavaScriptでアニメーションを描画 パフォーマンスが良い
54. Canvasアニメーション CreateJS pixi.js
55. Canvasアニメーション https://ics.media/recruit http://ni.siois.in
56. WebGL
57. WebGL ⾼度な3D表現 カメラやライトなど
58. WebGL three.js pixi.js
59. WebGL https://www.liberty-japan.co.jp/ specialcontent/ https://ics.media/recruit
60. GIFアニメーション
61. GIFアニメーション
62. GIFアニメーション
63. GIFアニメーション 再注⽬されている Photoshop で書き出し
64. ツールを使った
 アニメーション制作
66. SVG書き出し JSONデータを書き出し
 （Bodymovinプラグイン） Lottie（Web⽤に再⽣）
67. GIFアニメーション 動画で書き出し Photoshopのタイムラインパネル
68. Canvas書き出し デフォルトで書き出し可能 CreateJS
69. https://maxjapan.adobe.com/archive/2018/web-session-1/
70. アニメーション制作の ポイント
71. その1：リアルな表現
72. リアルな表現とは何か？ 不⾃然さを無くす
73. 箱が落ちるモーション
74. 箱が落ちるモーション
75. イージング css → ease, ease-in や cubic-bezier() JavaScript → イージング関数
76. イージング https://github.com/KingScooty/sass-easing
77. イージング http://cubic-bezier.com
78. イージングの参考 https://speakerdeck.com/kazumanishihata/dong-kifalsedezaintohurontoendofalselian-xi
79. 箱が落ちるモーション
80. 反動を加える 現実の動きに近づける よりリアルな情報が得られる
81. モーション参考 https://en.wikipedia.org/wiki/12_basic_principles_of_animation
82. モーション参考 http://photoshopvip.net/75004
83. その2：気持ちの良さ
84. その3：レイヤー構造
87. アニメーション制作時 の注意点
88. 盛り込みすぎない 伝えたいことが伝わらない
89. その表現は適切か？ デザインに合わないアニメーションは逆効果
90. 感性を養う https://uimovement.com dribbble (Animated GIFsカテゴリ) vimeo (「motion」などで検索) Greensock showcase
91. 表現をマネする 理解が早い 引き出しが増える 応⽤が効く
92. あえてWebでは探さない テレビ・映画・アニメ・普段の⽣活で⾒かけ るちょっとした動き
 （ボールが跳ねる、⽔の波紋 などなど）
93. 参考サイト ics.media CodeGrid Adobe
94. 神は細部に宿る 細かい部分にこだわりましょう 実は簡単なことの組み合わせ
95. まずは⾃分が楽しみましょう！
96. Thank you!