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

2019年8月3日 222次阅读

我正在尝试同时旋转和旋转拉斐尔形状.这是我尝试过的(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")

*第二种变化的问题是我不能单独改变旋转和旋转的缓动功能.另外,变换：’… r360’不起作用(覆盖第一个动画).

这是一个working demo on jsFiddle供您随意使用.

最佳答案 显然,没有办法实现这一目标.为了证明这一点,您可以在第二个使用延迟时链接两个动画,并使用大约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.

点赞