javascript svg游戏 svg.js 动画

上面的例子是用SVG.js实现小圆球在圆环上位移变化的一个动画；参考bonsai例子动画实现。SVG.js实现动画还是比较方便的。废话不多说，上代码。

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

  const centerX = 400,
    centerY = 300,
    circles = 140,
    distance = 180,
    radiusMin = 10,
    radiusVar = 10;

  const random = Math.random;
  const posList = [];
  for (var i = 0; i < circles; ++i) {
    const f = i / circles,
        x = centerX + distance * Math.sin(f*2*Math.PI),
        y = centerY + distance * -Math.cos(f*2*Math.PI),
        radius = random() * radiusVar + radiusMin;
    
    posList.push([x,y]);
    draw.circle(radius).attr({fill: randomColor()}).move(x, y);
  }

  const children = draw.children();
  const spread = 40;

  function render() {
    for (let i = 0; i < children.length; i++) {
      const circle = children[i];
      const pos = posList[i];
      const x = pos[0] + spread * random() - spread / 2;
      const y = pos[1] + spread * random() - spread / 2;
    
      circle.animate({
        duration: 200, 
        delay: 0,
        when: 'now',
        swing: true,
        times: 1,
        wait: 0
      }).ease('sineInOut').move(x, y) //sineInOut elastic
    }
  }

  var loopCnt = 0;
  (function animloop() {
    if (0===loopCnt%13) { // one 16ms.
      render();
    }
    loopCnt++;
    window.requestAnimationFrame(animloop);
  })();

SVG.js动画非常简单，直接在元素后面跟animate函数来生成动画；ease函数是动画的缓动方式，svg.js官网上有对应的缓动插件（svg.easing.js），实现了很多缓动效果。move函数是动画改变的属性，也可以用attr函数改变属性。

animate函数配置说明
duration：动画时长
delay: 延迟动画时间（ms）,
when: 'now', now 立即执行动画
swing: true， 往返动画效果。
times: 动画次数, 如果是true 一直循环
wait: 等待时间（ms）

更多示例可以移驾这个地址：https://gitee.com/ionep/svg.js-example