动画(杂记)

1、svg

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>

2、canvas动画

3、css3动画

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 */
} 

所有属性与解释：

可以使用以下现成的css3的库
（1）animate.css
https://animate.style/
（2）magic.css
https://www.minimamente.com/p...
(3)hover.css
http://ianlunn.github.io/Hover/
(4)csshake
https://elrumordelaluz.github...
(5)tailwindcss(布局)
https://tailwindcss.com/
(6)normalize.css(重置初始化)
https://github.com/necolas/no...