SVG 描边动画

在开始讲解之前,先来看看效果

svg 描边属性 stroke

在 svg 中对图形(line、polyline、rect、circle、ellipse、polygon)、路径(path)、文本(text、textPath、tspan)的描边都需要用到stroke属性。

stroke 常用属性

  • stroke:颜色。

    
      
        
        
        
      
    

  • stroke-width:宽度。

    
      
        
        
        
      
    

  • stroke-linecap:线端点样式。取值buttroundsquare,默认butt

    
      
        
        
        
      
    

  • stroke-opacity:透明度。

    
      
        
        
        
      
    

  • stroke-linejoin:转角处样式。取值arcsbevelmiterround,默认miter

    
      
        
    
        
    
        
    
      
    

  • stroke-dasharray:定义虚线样式。取值是一个逗号或者空格分隔的数列。数列的第一个值表示dash大小、第二值表示两个dash之间空隙大小。如stroke-dasharray:10, 2 表示dash大小10、dash间隙2。如果提供数列是奇数个,则会重复一次形成偶数个。如stroke-dasharray:10等效于stroke-dasharray:10, 10stroke-dasharray:10, 2, 5等效于stroke-dasharray:10, 2, 5, 10, 2, 5

    
      
        
        
        
      
    

    singsong:也就是说 stroke-dasharray 取值数列以两个数值为一个单元划分,每个单元第一个值表示dash大小,第二值表示两个dash之间空隙大小。 演示实例

  • stroke-miterlimit:当stroke-linejoin: miter时,对 miter 进行限制。
singsong: 样式属性优先级为 style > css > attribute。

如何让描边动起来

stroke-dashoffset

这个属性用于指定 stroke-dasharray 开始的偏移量。也是本文重点介绍对象,理解该属性如何工作,就能很好地掌握 svg 描边动画。stroke-dashoffset 取值可以大于 0,也可以小于 0。演示实例。

  • 取值大于 0

  • 取值小于 0。等效于offset = s - |-offset| % s。其中offset表示正取值,s表示dasharray的总和(如:dasharray: '100 50',则s: 150)。

动画原理

随着时间的变化,通过控制 stroke-dashoffset 来控制 stroke-dasharray 开始的偏移量的变化,以到达动画效果。演示实例。

singsong:通常会将 stroke-dasharray 设置为路径总长度。如总长度为 sstroke-dasharray: sstroke-dasharray: s s。再将 stroke-dashoffset 取值从 s 变化到 0,就可实现从无到有的描边动画。

动画的实现方式:演示实例

  • css

    .path {
      stroke-dasharray: 523.1047973632812;
      stroke-dashoffset: 0;
      animation: dash 2s linear 3s alternate infinite;
    }
    @keyframes dash {
        from {
            stroke-dashoffset: 523.1047973632812;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
  • js。需要使用 SVGGeometryElement.getTotalLength() 方法,获取路径的总长度。在 SVG 1.1 中,getTotalLength() 只存在 SVGPathElement 中,而基本图形是没有该方法的。不过在 SVG 2.0 中,基本图形也继承该方法。如何检测SVG版本,可以参考这里。
Moved pathLength attribute and getTotalLength() and getPointAtLength() methods from SVGPathElement to SVGGeometryElement。———— SVG 2 support in Mozilla
const path = document.querySelector('.path');
// 获取总长度
const totalLength = path.getTotalLength();
// 设置 stroke-dasharray
path.style.strokeDasharray = totalLength;
// 设置 stroke-dashoffset
path.style.strokeDashoffset = totalLength;

let currentFrame = 0;
let totalFrames = 160;
const draw = function() {
    let progress = currentFrame / totalFrames;
    if (progress > 1) {
        window.cancelAnimationFrame(handle);
    } else {
        currentFrame++;
        // 更新 stroke-dashoffset
        path.style.strokeDashoffset = totalLength * (1 - progress);
        handle = window.requestAnimationFrame(draw);
    }
};
draw();

实战

将 stroke 动画用于预加载动画展示

  • Demo

  • 实战实例

工具

  • vectr:SVG 在线制作工具——Demo
  • INKSCAPE:SVG 制作工具
  • SVGOMG: SVG 压缩工具

相关库

  • vivus
  • Lazy Line Painter
  • Walkway —— Demo

参考文章

  • How SVG Line Animation Works

你可能感兴趣的:(svg动画)