在svg.js中循环
在svg.js中循环
提问于 2018-05-17 19:48:27
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);为什么(应该这样做吗？)循环不会重复整个动画吗？他跳过了2步和3步。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-07 06:59:12
here解决了一个非常类似的问题。该解决方案可以针对您的问题进行调整：
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()Stack Overflow用户
发布于 2018-05-17 20:09:13
loop似乎只在最后一个动作上起作用。
通过使用路径，您可以尝试不同的方法来完成相同的任务。
例如：(您需要调整以复制相同的点)
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)(来自tutorials)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50390704
复制相关文章
相似问题