关于javascript:动画杂记

SVG 元素是 DOM 元素的一种类型，它借用了咱们已熟知的 HTML 元素的写法来定义任意图形。SVG 元素与 HTML 元素的不同之处在于它们具备特有的标签、属性和行为，能够用来定义图形。换言之，SVG 使你可能用代码创立图片。这一概念无比弱小，起因在于这意味着你能够应用 JavaScript 和 CSS，以编程的形式为这些图形增加款式和动画。另外，SVG 还具备很多其余长处。

SVG 的压缩性异样的好。用 SVG 定义的图形比同样的 PNG/JPEG 图片要小，这能够极大地缩短网站加载工夫。
SVG 图形能够缩放至任意分辨率并且不损失清晰度。与其余规范图片格式不同，它在所有设施上都边缘清晰，该是向挪动设施屏幕上的那些含糊的图片说再见的时候了。
就像 HTML 元素一样，你能够为 SVG 元素指定一个事件句柄，响应用户的输出。这意味着页面上的图片也能够具备交互性。如果你乐意，能够把网站上所有的按钮都换成动静图形。
许多照片编辑利用（包含 Adobe Photoshop、Sketch 和 Inkscape）都能够将设计作品导出成 SVG 格局，能够间接复制粘贴到 HTML 当中。因而，即便你自认不是个艺术家，也能够借助第三方利用来本人做设计。

svg 根本应用

<svg width="500" height="500">
         <circle cx="100" cy="100" r="100" style="fill:blue;stroke:yellow;stroke-width:5px;"/>
         <rect id="rect" x="200" y="200" width="200" height="200"/>
</svg>

svg 动画，应用 animate

<rect x="10" y="10" width="20" height="20"
  style="stroke: black; fill: green; style: fill-opacity: 0.25;">
  <animate attributeName="width" attributeType="XML"
    from="20" to="200" begin="0s" dur="8s" fill="freeze"/>
  <animate attributeName="height" attributeType="XML"
    from="20" to="150" begin="0s" dur="8s" fill="freeze"/>
  <animate attributeName="fill-opacity" attributeType="CSS"
    from="0.25" to="1" begin="0s" dur="3s" fill="freeze"/>
  <animate attributeName="fill-opacity" attributeType="CSS"
    from="1" to="0.25" begin="3s" dur="3s" fill="freeze"/>
</rect>

<animate> 元素并不适用于旋转、平移、缩放或歪斜变换，因为它们都“被包裹”在 transform 属性内。<animateTransform> 元素就是用来解决这个问题的。咱们能够设置它的 attributeName 为 transform。而后用 type 属性的值指定变换的哪个值应该变动（translate、scale、rotate、skewX 或者 skewY 之一）。from 和 to 的值指定为适当的要动画绘制的变换。应用 svg animation 做动画:

<svg width="420px" height="260px" viewBox="0 0 420 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g stroke="#979797" stroke-width="1" fill="none">
 <path id="motionPath" d="M370.378234,219.713623 C355.497359,218.517659 ..." ></path>
 </g>
 <g id="cray" transform="translate(0, -24)" stroke="#979797">
 <image id="cray-img" xlink:href="1.png" x="0" y="0" width="100px"/>
 </g>
 <animateMotion
 xlink:href="#cray"
 dur="5s"
 begin="0s"
 fill="freeze"
 repeatCount="indefinite"
 rotate="auto-reverse"
 >
 <mpath xlink:href="#motionPath" />
 </animateMotion>
</svg>

鼠标 hover 的动画

<style type="text/css"><![CDATA[

    a.words:hover, a.words:focus {
       text-decoration: underline;
       font-weight: bold;
    }
  a.shapes:hover, a.shapes:focus {
     stroke: #66f;
     stroke-width: 2;
     outline: none; /* 笼罩默认的聚焦款式 */
  }
  ]]>

</style>

<a class="words" xlink:href="cat.svg">
  <text x="100" y="30" style="font-size: 12pt;">Cat</text>
</a>

<a class="shapes" xlink:href="http://www.w3.org/SVG/">
  <circle cx="50" cy="70" r="20" style="fill: red;"/>
  <rect x="75" y="50" width="40" height="40" style="fill: green;"/>
  <path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/>
</a>

鼠标点击动画

<g id="button">     ➊
  <rect x="10" y="10" width="40" height="20" rx="4" ry="4"
    style="fill: #ddd;"/>
  <text x="30" y="25"
    style="text-anchor: middle; font-size: 8pt">Start</text>
</g>

<g transform="translate(100, 60)">
  <path d="M-25 -15, 0 -15, 25 15, -25 15 Z"
    style="stroke: gray; fill: #699;">

    <animateTransform id="trapezoid" attributeName="transform"
      type="rotate" from="0" to="360"
      begin="button.click"
      dur="6s"/>   ➋
  </path>
</g>

监听鼠标动作

<circle id="circle" cx="50" cy="50" r="20"
  style="fill: #ff9; stroke:black; stroke-width: 1"/>

<script type="application/ecmascript"><![CDATA[function grow(evt) {
    var obj = evt.target;
    obj.setAttribute("r", "30");
  }

  function shrink(evt) {this.setAttribute("r", "20");
  }

  function reStroke(evt) {var w = evt.target.style.getPropertyValue("stroke-width");
    w = 4 - parseFloat(w); /* toggle between 1 and 3 */
    evt.target.style.setProperty("stroke-width", w, null);
  }

  var c = document.getElementById("circle");
  c.addEventListener("mouseover", grow);
  c.addEventListener("mouseout", shrink);
  c.addEventListener("click", reStroke);
  // ]]>

</script>

CSS3 转换能够对元素进行挪动、缩放、转动、拉长或拉伸。次要是在元素上设置这两个元素，transform 和 transform-origin。

变换的办法次要有以下几种：

translate(x,y) 依据左 (X 轴) 和顶部 (Y 轴) 地位给定的参数，从以后元素地位挪动
rotate(angle) 在一个给定度数顺时针旋转的元素。负值是容许的，这样是元素逆时针旋转。
scale(x,y) 该元素减少或缩小的大小，取决于宽度（X 轴）和高度（Y 轴）的参数：
skew(x-angle,y-angle) 定义 2D 歪斜转换，沿着 X 和 Y 轴。

@keyframes 规定是创立动画。@keyframes 规定内指定一个 CSS 款式和动画将逐渐从目前的款式更改为新的款式。

示例：

@keyframes myanimation {from {background: red;}
  to {background: yellow;}
}

div{
  animation: myanimation 5s;
  -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

所有属性与解释：

关于javascript:动画杂记

1、svg

2、canvas 动画

3、css3 动画

过渡

动画