我想在一个元素上开始一个动画,而之前的动画仍然处于事件状态。但是,在元素上调用 animate()
会将新动画排在当前动画的末尾。
例如,考虑一个元素被移动到新位置的动画。现在,我还想让它在到达某个位置时淡出。以下是在移动结束时排队“一次”动画,而不是在 80%。
rect.animate(1000).move(100, 100)
.once(0.8, function(pos, eased) {
rect.animate(200).opacity(0);
});
如何让元素在移动到 80% 时开始淡出?该 API 似乎是为链接动画而不是同时重叠动画而设计的。
最佳答案
您尝试做的事情有点复杂。不幸的是,不可能“侵入”当前动画并即时添加新动画。 然而,您可以做的是添加一个应该动画化的新属性:
var fx = rect.animate(1000).move(100, 100)
.once(0.8, function(pos, eased) {
fx.opacity(0);
});
您会注意到它有其自身的问题,因为不透明度立即跃升至 80%。所以这不是适合您的方法。
下一步尝试:使用during
方法:
var morh = SVG.morph(
var fx = rect.animate(1000).move(100, 100)
.once(0.8, function(pos, eased) {
fx.during(function(pos, morphFn, easedPos) {
pos = (pos - 0.8) / 0.2
this.target().opacity(pos)
}
});
我们自己计算不透明度
关于animation - svg.js 中同一元素上的多个重叠动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46515375/