Question

我正在尝试同时旋转和旋转拉斐尔形状。这是我尝试过的（100,100是画布的中心）：

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。

Answer 2

this您要找的是什么？我为旋转动画添加了第二个旋转，向相反方向旋转360度。第二个动画，旋转，已经过时了。

var revolve = Raphael.animation({transform:'r360,100,100 r-360'},1000,"easein")

Answer 3

有一种很好的方法可以做到这一点甚至远远超过它。

记住raphael是关于路径和层次结构的。至于3D软件，所有关于保持最高级别的层次结构与路径遵循，以便尽可能拥有最复杂的动画，并为每个层次结构级别保留一个“转换”功能。

为了实现这种链式动画，并将第一层次动画（变换）保持为第一个动画层次结构，3D世界中使用的一个好方法是使用路径“假人”。

在您的情况下，实现旋转的假人是半径为零的圆形路径。

等级1：elipse有自己的变换动画。
等级2：椭圆围绕具有零的圆形路径旋转360° 半径（让它围绕自己旋转）+假人可以拥有自己的变形。
等级3：虚拟使用旋转功能或路径跟随另一个半径为100的圆形虚拟路径（以及他自己的变换）

除了使用转换字符串作为中间层次结构级别，“虚拟”作为路径之外，还允许您随意链接任何类型的动画，为每个层次结构级别保留1个原始转换函数。

半径为零的圆形路径是最常用的虚拟3D世界。

一旦你将你的假人动画链接起来，用每个假人的定时功能触发每个动画。它在关键帧软件中完全相同。

Raphael对象上的同时动画 - 上一个动画会覆盖对象的先前动画

3 个答案: