javascript - 如何组合拉斐尔动画？

Question

这个想法是让两个拉斐尔物体一起移动，同时其中一个物体旋转。在下面的示例中，我创建了两个动画 - 一个用于平移，一个用于旋转，但我没有运气让它们工作。

var paper = Raphael(0,0,800,400);
var body  = paper.rect(10,10,50,30);
var leg   = paper.rect(30,35,10,30);

// translation - should be applied to both body and leg
var translation_anim = Raphael.animation( {transform: "t300,0"}, 2000 );

// rotation - to be applied to the leg only
var rotation_anim = Raphael.animation( {
    "50%":  { transform: "R" +    (45).toString() },
    "100%": { transform: "R" + (-1*45).toString() }
}, 2000);

body.animate(translation_anim);
leg.animateWith(body,rotation_anim,translation_anim);

fiddle :http://jsfiddle.net/hx22d/

Answer 1

fiddle :http://jsfiddle.net/hx22d/4/

这是更新后的代码:

var paper = Raphael(0,0,800,400);
var body  = paper.rect(10,10,50,30);
var leg   = paper.rect(30,35,10,30);

var translation_anim = Raphael.animation({transform: "t300,0"}, 2000);

var rotation_anim = Raphael.animation({
    "50%": { transform: "r45 T150,0"},
    "100%": { transform: "r-45 T300,0"}
}, 2000);

body.animate(translation_anim);
leg.animateWith(body,translation_anim,rotation_anim);

<小时/>

最后一行代码中存在一个小语法错误。

leg.animateWith(body,rotation_anim,translation_anim)

<小时/>

根据 Raphael.js documentation 的正确语法是:

element.animateWith(element_to_sync_with，animation_to_sync_with，动画)

-> leg.animateWith(body、translation_anim、rotation_anim)

希望这有帮助。