SVG.js动画系列5-显示/隐藏动画

原创
2020/11/11 23:05
阅读数 1.2K

今天来实现图元显示和隐藏的动画。效果图如下: 我们要让矩形、三角形、圆形做一个串行显示的动画;看看用SVG.js是怎么实现的吧。

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

  var circle, rect, triangle;
  function make() {
    rect = draw.rect(100,100).move(200, 200).attr({fill: SVG.Color.random(), stroke:'#3c352d'}).css("display", 'none')
    circle = draw.circle(100,100).move(200, 200).attr({fill:SVG.Color.random(), stroke:'#3c352d'}).css("display", 'none')
    triangle = draw.path("M 105,105 47,89 89,46 105,105 z").attr({fill:SVG.Color.random(), stroke:'#3c352d'}).move(220,220).css("display", 'none')

    var timeline = new SVG.Timeline()
    rect.timeline(timeline);
    circle.timeline(timeline);
    triangle.timeline(timeline);
  }

  make();
  const duration = 200;
  function animates() {
    const ani1 = rect.animate({
        duration: duration,
        delay: 0,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'inline')


    ani1.animate({
        duration: duration,
        delay: duration,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'none');

    const ani2 = circle.animate({
        duration: duration,
        delay: duration,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'inline');

    ani2.animate({
        duration: duration,
        delay: 2*duration,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'none');

    const ani3 = triangle.animate({
        duration: duration,
        delay: 2*duration,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'inline');

    ani3.animate({
        duration: duration,
        delay: 3*duration,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'none');
  }

这里重点是delay和wait两个属性。一个图元要触发两个动画

  1. 图元的显示,用delay来控制开始显示的时间,wait控制等待时长
  2. 图元的隐藏,与显示相似。 (主要算好三个图元显示/隐藏时间和等待时长)

demo源码地址:https://gitee.com/ionep/svg.js-example 如果大家对SVG.js感兴趣请移驾SVG.js

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