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

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

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

2e2bdab232daaf7ae69abbce41e5a969?s=128

Yohei Isokawa

March 08, 2019
Tweet

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!