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

本文转载https://blog.csdn.net/wangchangjiang1984/article/details/109409595
本实例参考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);
        const y = startY + i*(rectHeight+space);
        draw.rect(rectWidth, rectHeight).attr({fill:bcolor}).move(x, y);
        const r =  draw.rect(rectWidth, rectHeight).attr({fill:fcolor}).move(x, y);
        rects.push(r);
        poss.push([x,y]);
      }
    }
  }

  make();

  const duration = 1000; 
  function animates() {
    const w = (rectWidth-2)/2
    const h = (rectHeight-2)/2
    const half = cols /2;
    const offset = 100;

    for (var i = 0; i < half; i++) {
      const colOffset = i*offset;
      for (let j =0; j< rows; j++) {

        const rowOffset = Math.abs(j-2) * offset;
        const index = j*cols + half - i- 1;
        const rect1 = rects[index];
        const pos1 = poss[index];
        const x = pos1[0],y = pos1[1];
        
        const ani1 = rect1.animate({
          duration: duration,
          delay: colOffset + rowOffset,
          when: 'now',
          swing: false,
          times: 1,
          wait: 0
        }).ease('sineInOut').attr({x:x+w, y:y+h, width:2, height:2});


        ani1.animate({
          duration: duration, 
          delay: duration+colOffset + rowOffset,
          when: 'now',
          swing: false,
          times: 1,
          wait:  0,
        }).ease('sineInOut').attr({x:x, y:y, width:rectWidth, height:rectHeight})
        
        const index2 = j*cols + half+i;
        const rect2 = rects[index2];
        const pos2 = poss[index2];
        const x2 = pos2[0], y2 = pos2[1];
        const ani2 = rect2.animate({
          duration: duration,
          delay: colOffset + rowOffset,
          when: 'now',
          swing: false,
          times: 1,
          wait: 0
        }).ease('sineInOut').attr({x:x2+w, y:y2+h, width:2, height:2}) 

        ani2.animate({
          duration: duration,
          delay: duration+colOffset + rowOffset,
          when: 'now',
          swing: false,
          times: 1,
          wait: 0,
        }).ease('sineInOut').attr({x:x2, y:y2, width:rectWidth, height:rectHeight})
      }
    }
  }

  aniloop(animates, 2000);

源码地址:https://gitee.com/ionep/svg.js-example

如果大家对SVG.js感兴趣请移驾(SVG.js)