在svg.js中循环?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (235)
rect
    .animate(1000,"<>",0).dmove(50,0)
    .animate(1000,"<>",0).dmove(-10,0)
    .animate(1000,"<>",0).dmove(20,0)
    .animate(1000,"<>",0).dmove(-60,0).loop(true, true);

演示:https//codepen.io/Andreslav/pen/BxGygp

提问于
用户回答回答于

解决方案:

let w = 100,
        h = 100,
        t = 1000,
        draw = SVG('svg').size('100%', '100%').viewbox(0,0,w,h);


function animation() {
    draw.rect(10,10)
        .animate(t,">",0).dx(w/2).width(20).height(10)
        .animate(t,">",0).dy(h/2).width(15).height(15)
        .animate(t,">",0).dx(-w/2).width(10).height(15)
        .animate(t,">",0).dy(-h/2).width(10).height(10).after(animation)

}
    animation()
用户回答回答于

你可以尝试使用不同的方法通过使用路径来完成相同的任务。

例:(你需要调整以复制相同的点)

let width = 1000,
height = 100,
draw = SVG('svg').size('100%', '100%').viewbox(0,0,width,height);

// use path to replicate movement
const path = draw.path("M200 0 H 250 H 100 H 120 H 80")
const length = path.length()

path.fill('none').stroke({width:1, color: '#ccc'})

const rect = draw.rect(100, 100)
rect.animate(5000, '<>').during(function(pos, morph, eased){
    var p = path.pointAt(eased * length)
    rect.center(p.x, p.y)
}).loop(true, true)

所属标签

可能回答问题的人

  • 找虫虫

    0 粉丝0 提问6 回答
  • 优惠活动秘书

    0 粉丝2 提问6 回答
  • 天使的炫翼

    17 粉丝531 提问5 回答
  • 爸爸

    腾讯 · 客户端安全 (已认证)

    4 粉丝4 提问5 回答

扫码关注云+社区

领取腾讯云代金券