如何使用Anime.js实现SVG绘制及动画效果

实现步骤 #

• 第一步：预处理SVG资源
  将需要做动画的SVG拆分为独立路径元素，每个需要单独控制的线条、图形都设置唯一id或者统一类名。如果要实现轮廓绘制效果，提前将路径的fill属性设为none，保留stroke相关属性，通过path.getTotalLength()方法获取单条路径的总长度，作为动画初始参数。

• 第二步：分阶段实现动画逻辑
  使用Anime.js时间轴timeline控制多阶段动画的衔接，避免嵌套回调：

  1. 第一阶段实现路径绘制效果：控制stroke-dashoffset属性从路径总长度降低到0，即可实现线条从无到有逐段绘制的效果，多条路径可以通过anime.stagger()参数设置错开动画的延迟间隔。
     示例代码如下：

  // 批量路径绘制动画示例
  anime({
    targets: '.animation-path',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutQuad',
    duration: 1500,
    delay: anime.stagger(200)
  })
  

  2. 第二阶段实现填充/形变效果：等路径绘制到一定进度时，同步控制路径的fill属性从透明过渡到目标色值，同时可添加scale、translate等属性实现图形的弹性入场效果，通过时间轴的偏移参数实现两个阶段动画的自然衔接。
     示例代码如下：

  const animationTimeline = anime.timeline()
  // 第一阶段路径绘制
  animationTimeline.add({
    targets: '.animation-path',
    strokeDashoffset: [anime.setDashoffset, 0],
    duration: 1500,
    delay: anime.stagger(200)
  })
  // 第二阶段填充+形变，在上一阶段结束前400ms触发
  .add({
    targets: '.animation-path',
    fill: '#3388bb',
    scale: [0.9, 1],
    duration: 800
  }, '-=400')
  

• 第三步：细节优化
  如果需要实现参考效果中路径跟随的光点效果，可以单独创建一个圆点元素，通过anime.path()方法绑定到目标路径上，让圆点跟随路径绘制进度移动模拟笔尖效果；如果出现动画锯齿问题，可以给SVG元素添加CSS属性shape-rendering: geometricPrecision优化渲染精度。

内容的提问来源于stack exchange，提问作者TaSvet