利用svg动画制作动画组件

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

loading组件

• 线段的断点切口形状stroke-linecap="round"， 表示切口是圆形
• animateTransform 设置属性rotate的时候，rotate可以设置三个值，第一个旋转角度，第二三个是transform-origin的值
• animate标签内的form to属性，可以用values代替

<svg width="500" height="500" viewBox="0 0 50 50">
  <circle
    cx="25"
    cy="25"
    r="22"
    stroke-width="3"
    stroke="#3be6cb"
    fill="none"
    stroke-dasharray="34"
    stroke-linecap="round"
  >
    <animateTransform
      attributeName="transform"
      type="rotate"
      values="0 25 25;360 25 25"
      dur="2s"
      repeatCount="indefinite"
    />
    <animate
      attributeName="stroke"
      attributeType="XML"
      values="#3be6cb;#02bcf2;#3be6cb"
      dur="3s"
      repeatCount="indefinite"
    />
  </circle>
  <circle
    cx="25"
    cy="25"
    r="12"
    stroke-width="3"
    stroke="#02bcf2"
    fill="none"
    stroke-dasharray="19"
    stroke-linecap="round"
  >
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="360 25 25"
      to="0 25 25"
      dur="2s"
      repeatCount="indefinite"
    />
    <animate
      attributeName="stroke"
      attributeType="XML"
      values="#02bcf2;#3be6cb;#02bcf2"
      dur="3s"
      repeatCount="indefinite"
    />
  </circle>
</svg>

FlyBox 组件

svg蒙版

svg蒙版主要是做制作一些比较特殊的图形。

1. 先创建红色前景和蓝色背景

<svg width="400" height="300">
  <rect id="back" x="0" y="0" width="400" height="300" fill="#d4fcff"></rect> 
  <rect id="front" x="0" y="0" width="400" height="300" fill="#fcd3db"></rect> 
</svg> 

第一个矩形框会被后面的矩形框做覆盖，即显示粉红色。

2. 给第二个矩形框加上一个蒙版

<svg width="400" height="300">
  <defs>
     <mask id="opacity"></mask> 
  </defs>
  <rect id="back" x="0" y="0" width="400" height="300" fill="#d4fcff"></rect> 
  // 现在在前景色中加上蒙版
  <rect id="front" x="0" y="0" width="400" height="300" fill="#fcd3db"
  mask="url(#opacity)"></rect> 
</svg>

加上蒙版后，相当于把第二个矩形框给设置为透明了，那么第一个矩形框将会显示出来

3. 现在我们要想使第二个矩形框不要全部影藏，而是按照某个形状显示出来

fill: white 白色表示蒙版不透明，即不会把第一个矩形框显示出来，而是显示第二个矩形框，但是只会显示一个矩形形状

<svg width="400" height="300">
  <defs>
     <mask id="opacity">
         <rect width="100" height="100" fill="white" x="200" y="100"></rect>
     </mask> 
  </defs>
  <rect id="back" x="0" y="0" width="400" height="300" fill="#d4fcff"></rect> 
  <rect id="front" x="0" y="0" width="400" height="300" fill="#fcd3db"
  mask="url(#opacity)"></rect> 
</svg>

做出光线运动的效果

利用上面的蒙版知识，就可以制作出特定的图形

<svg width="500" height="500">
  <!-- 把path写在defs标签方便复用 -->
  <defs>
    <path id="pathId" d="M5 5 L495 5 L495 495 L5 495 Z" fill="none"></path>
    // 用来做出光线阴影的效果
    <radialGradient
      id="gradientId"
      cx="50%"
      cy="50%"
      fx="100%"
      fy="50%"
      r="50%"
    >
      <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
      <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
    </radialGradient>
    <mask id="maskId">
      <circle r="30" cx="0" cy="0" fill="url(#gradientId)">
        <animateMotion
          dur="3s"
          path="M5 5 L495 5 L495 495 L5 495 Z"
          rotate="auto"
          repeatCount="indefinite"
        ></animateMotion>
      </circle>
    </mask>
  </defs>
  <use href="#pathId" stroke-width="1" stroke="#235fa7" />
  <use
    href="#pathId"
    stroke-width="3"
    stroke="#4fd2dd"
    mask="url(#maskId)"
  />
</svg>