SVG.js动画系列2-延时动画

最新推荐文章于 2024-01-21 23:02:21 发布

三零

最新推荐文章于 2024-01-21 23:02:21 发布

阅读量1k

点赞数 1

分类专栏： SVG.js animation 文章标签： svg animation

本文链接：https://blog.csdn.net/wangchangjiang1984/article/details/109409595

版权

本文介绍如何使用SVG.js实现延时动画效果，参照anime.js库，通过为不同元素添加延迟属性，创造出两端方块有延时的动态视觉体验。详细代码示例可在SVG.js官方仓库找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本实例参考anime.js实现延时动画。动画效果如下：
在这里插入图片描述
所有的方块都是一个动画，只不过靠近两端的方块加了一个delay的延时效果。代码如下：

var draw = SVG().addTo('body').size(800, 600)

  const fcolor = "#00D672";
  const bcolor = "#242d28";
  var rects = [], poss = [];
  const startX= 100, startY = 100, space = 4;
  const rectWidth=18, rectHeight=18;
  const cols = 14; rows = 5;
  function make() {
   
    for (let i=0; i<rows; i++) {
   
      for (let j=0; j<cols; j++) {
   
        const x = startX + j*(rectWidth+space);