4

我正在尝试同时旋转和旋转 Raphael 形状。这是我尝试过的（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'
})

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

  1. 第二个动画覆盖第一个：

    ec.animate(revolve).animate(rotate)

  2. 工作正常，但有一些问题（下面提到）：

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

  3. 第二个动画再次覆盖第一个动画：

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

*第二种变体的问题是我不能分别改变旋转和旋转的缓动功能。此外，transform:'...r360'它不起作用（覆盖第一个动画）。

这是一个关于 jsFiddle 的工作演示，供您使用。

4

3 回答 3

2

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

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

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

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

ec.animate(revolveAndRotate);​

​​​​这里是更新的jsFiddle来演示它。

于 2012-05-04T21:23:07.127 回答
0

这是你要找的吗？我在旋转动画中添加了第二个旋转，向相反方向旋转 360 度。第二个动画，旋转，已过时。

var revolve = Raphael.animation({transform:'r360,100,100 r-360'},1000,"easein")
于 2012-05-02T10:36:07.330 回答
0

有一种很好的方法可以做到这一点，甚至远远落后于它。

请记住，拉斐尔是关于路径和层次结构的。至于 3D 软件，它的全部目的是保持最高层次的层次结构，并遵循路径，以便尽可能地拥有最复杂的动画，并为每个层次结构层次保留一个“变换”功能。

为了实现这种链式动画，并保持第一个层级动画（变换）作为第一个动画层级，3D 世界中使用的一个好技巧是使用路径“假人”。

在您的情况下，实现旋转的虚拟对象是半径为零的圆形路径。

  • 级别 1：椭圆有自己的变换动画。
  • 2级：椭圆围绕半径为零的圆形路径旋转360度（使其围绕自己旋转）+假人可以有自己的变换。
  • 3级：假人使用revolve函数或路径跟随另一个半径为100的圆形假人路径（和他自己的变换）

除了使用过渡字符串作为中间层级之外，“假人”作为路径，将允许您随意链接任何类型的动画，为每个层级保留 1 个原始转换函数。

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

将假人动画链接起来后，使用每个假人的计时功能触发每个动画。在关键帧软件中以完全相同的方式完成。

于 2012-05-29T12:57:46.680 回答