【简单实用技巧】SVG 线条动画入门

Easy_Y
602 阅读2分钟

前言

通常我们说的 Web 动画，包含了三大类

  • CSS3 动画
  • javascript 动画（canvas）
  • html 动画（SVG）

SVG定义

  • version： 表示 <svg> 的版本，目前只有 1.0，1.1 两种
  • xmlns：http://www.w3.org/2000/svg 固定值
  • xmlns:xlink：http://www.w3.org/1999/xlink 固定值
  • xml:space：preserve 固定值，上述三个值固定，表示命名空间，当数据单独存在svg文件内时，这3个值不能省略
  • class：就是我们熟悉的 class
  • width | height： 定义 svg 画布的大小
  • viewbox： 定义了画布上可以显示的区域，当 viewBox 的大小和 svg 不同时，viewBox 在屏幕上的显示会缩放至 svg 同等大小（暂时可以不用理解）

有了 svg 标签，我们就可以愉快的在内部添加 SVG 图形了，上面，我在 svg 中定义了两个 polyline 标签。

SVG 基本形状

polyline：是SVG的一个基本形状，用来创建一系列直线连接多个点。

其实，polyline 是一个比较不常用的形状，比较常用的是path，rect，circle 等。这里我使用polyline 的原因是需要使用 stroke-linejoin 和 stroke-linecap 属性，在线段连接处创建圆滑过渡角。

image.png

<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

SVG 线条动画

上面，我们给两个 polyline 都设置了 class，SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写，更重要的是可以配合 CSS 动画一起使用。

举个例子：

svg {
    margin: auto;
    overflow: visible;
    transform: scalex(.9);
}

.g-polygon-wrap,
.g-polygon-move {
    fill: none; 
    stroke: #6feffa; 
    stroke-width:1;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.g-polygon-move {
    transform-origin: center center;
    transform: scale(1.05);
    stroke: linear-gradinet(180deg, #6feffa, transprent);
    stroke-width:1.5;
    stroke-dasharray: 280, 700;
    stroke-dashoffset: 8;
    animation: move 2.4s infinite linear;
}

@keyframes move {
    0% {
        stroke-dashoffset: 8;
    }
    100% {
        stroke-dashoffset: -972;
    }
}
  • fill：类比 css 中的 background-color，给 svg 图形填充颜色；
  • stroke-width：类比 css 中的 border-width，给 svg 图形设定边框宽度；
  • stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色；
  • stroke-linejoin | stroke-linecap：上文稍微提到过，设定线段连接处的样式；
  • stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度；
  • stroke-dashoffset：则是虚线的偏移量

重点讲讲能够实现线条动画的关键属性 stroke-dasharray 

在线Demo预览

注意

后续等有空，直接上看板类面板线条动画实践demo JYM请稍等几天！

avatar
文章
阅读
粉丝