SVG.js 实现动画系列1

原创
2020/11/06 17:18
阅读数 941

circles

上面的例子是用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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部