SVG 動畫

—— 代碼和藝術相交，誕生了 SVG 動畫

SVG簡介

SVG（可縮放矢量圖），在近些年 SVG 的使用頻率愈來愈高，可是 SVG 發明以來沉寂了好久，因爲瀏覽器廠商對 SVG 的支持不夠強大，因此在 Web 中使用的機會並很少。不過 SVG 的兼容性、可適配性使得可以使用 SVG 的場景愈來愈多。

SVG 是很適合作動畫的，由於他是由數字組成，本質上是利用幾何圖形進行繪製的。在 Web 上，數字容易被操做，也很是直觀。

SVG 具備的優勢：
• 數據可視化：真實的數據直觀的表達了人們想要的想法，而且易於複雜思想的交流和展示。
• 響應式：SVG 是矢量圖，具備獨特的可伸縮性，能很好的適應各類屏幕。
• 性能表現：在 Web 應用或者頁面中正確使用 SVG，能夠減小頁面加載的資源，特別是在響應式 Web 應用中，這個特性愈加明顯。
• 可操做的 DOM 結構：SVG 的結構相似於 HTML，具備可操做的 DOM。這意味着用戶可使用代碼直接實現想要的矢量圖，給 DOM 添加動畫，讓 SVG 動起來。
複製代碼

SVG DOM

<svg x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100" style="border: 1px solid black;">
  <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"></rect>
  <circle fill="black" stroke="black" cx="170" cy="50" r="45"></circle>
  <polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62 309,94 279,79 248,94 254,62 230,39 263,35">
  </polygon>
  <line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"></line>
  <line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"></line>
</svg>
複製代碼

咱們先看看這個 SVG 結構，因爲和 HTML 是相通的，因此 SVG 的語法也是通熟易懂的。在根結點<svg>中，咱們看到了 x 和 y 值皆爲 0，表明的是 SVG 座標系統的起始點。同時 width 和 height 都有所指定，而且能夠看到他們和 viewBox 的最後兩個參數相同。
代碼中 rect 表示矩形，circle 表示圓形，cx cy 爲圓心座標，r 爲半徑，polygon 可隨意繪製由各個點 points 連成的圖形，line 爲線。
複製代碼

ViewBox

SVG 的 viewBox 是一個很是強大的屬性，由於他真正的容許 SVG 畫布無限延伸，而且同時控制和精肯定義 SVG 的可視空間。按照x y width height的順序，viewBox 有 4個參數須要設置，viewBox 的值不帶單位，由於但是空間不是靠像素來定義的，而是一個可任意延展的空間，這樣就能夠適應許多不一樣的尺寸。
如上圖 1 - 1來看，咱們把這個 svg 的背景當作是一張方格紙，基於這張方格定義一個座標系，這張方格紙自己是自我獨立的。咱們能夠隨意修改方格紙的width、height或者任意的事物，都不會影響方格紙上的 svg 自己。咱們能夠理解爲，全部圖形都基於 viewBox 的座標系，並繪製在 viewBox 中，而 viewBox 會自動根據<svg>的寬高來適配。
複製代碼

---

SVG 動畫

CSS 動畫

<?xml version="1.0" encoding="UTF-8"?>
<svg id="svg-order" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="svg" transform="translate(-266.000000, -59.000000)" fill="#000000">
      <path id="order"></path>
    </g>
  </g>
</svg>
<style> #svg-order { animation: name 2s infinite ease-in-out forwards; } @keyframes name { 0% { transform: translateX(0); } 50% { background: greenyellow; transform: translateX(100px) scale(2); } 100% { background: hotpink; transform: translateX(200px); } } </style>
複製代碼

上面的例子中，經過 CSS 直接操做 DOM，添加 CSS 動畫。

序列幀 step 製做動畫

animation: splashit 1.8s steps(24) infinite;
複製代碼

SVG 製做的雪碧圖，經過 CSS 動畫中的 step 序列幀來展現圖像，相似動畫的製做方法，背景不更換，人物每一幀的運動，就造成一個複雜的動畫。

經過第三方框架 GreenSock

<svg width="200px" height="500px" viewBox="0 0 200 500">
  <circle class="element" fill="black" cx="45" cy="45" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="95" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="145" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="195" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="245" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="295" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="345" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="395" r="25"></circle>
</svg>
<script> // TweenMax.to('.element', 2, {x: 100}) // TweenMax.fromTo('.element', 2, {x: 0}, {x: 100}) TweenMax.staggerTo('.element', 2, {x: 100}, 0.1) </script>
複製代碼

經過直接引入 GreenSock ，經過其強大的動畫能力直接操做 DOM。上圖是一個依次向 x 方向移動 100px的方法。