animation - Raphael 对象上的同步动画 - 最后一个动画覆盖对象的先前动画

Question

我正在尝试同时旋转和旋转拉斐尔形状。这是我尝试过的(100,100 是 Canvas 的中心):

var revolve = Raphael.animation({transform: 'r360,100,100'},1000,"easein")
var rotate = Raphael.animation({transform: 'r360'},1000,"linear")
var ec = paper.ellipse(100,50,10,5).attr({
    fill: 'none',
    stroke: 'blue'
})

以及我尝试调用动画的各种方式，每种方式都会产生所描述的结果:

第二个动画覆盖第一个动画:

ec.animate(revolve).animate(rotate)

工作正常，但有一些问题(下面提到):

ec.animate({
    transform: 'r360,100,100r360'
}, 1000, "easein")

第二个动画再次覆盖第一个动画:

ec.animate({
    transform: 'r360,100,100'
}, 1000, "easein")
.animate({
    transform: 'r360'
}, 1000, "easein")

* 第二个变体的问题是我不能分别改变旋转和旋转的缓动函数。此外， transform:'...r360'不工作(覆盖第一个动画)。

这是一个 working demo on jsFiddle给你捣乱。

Answer 1

显然没有办法做到这一点。为了证明这一点，您可以在使用第二个延迟的同时链接两个动画，并使用 1000 左右的各种值(上下)传递它。你会看到动画渲染器是串行的:

ec.animate(revolve)
ec.animate(rotate.delay(/*200*/1000));

为了让它们同时工作，您必须将两个过渡放入一个过渡字符串并将其传递给单个动画对象，就像您在尝试的第二个变体中所做的一样(似乎没有真正的问题)除了为每个动画定义不同的缓动的限制):

var revolveAndRotate = Raphael.animation({
    transform: 'r360,100,100r360'
}, 1000, "easein")

ec.animate(revolveAndRotate);​

这是 updated jsFiddle来证明它。