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

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アニメーション

16. None

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. ツールを使った
 アニメーション制作

65. None

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：レイヤー構造

85. None
86. None

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!