Raphael 애니메이션을 결합하는 방법은 무엇입니까?

Question

두 개의 라파엘 (Raphael) 물체가 함께 움직이는 동안 하나의 물체가 회전하는 것이 좋습니다. 아래 예제에서는 번역을위한 애니메이션과 회전을위한 애니메이션 두 가지를 만들었지 만 운 좋게도 작동하지 않았습니다.

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); 

바이올린 : http://jsfiddle.net/hx22d/

Answer 1

바이올린 : 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); 

. Raphael.js documentation 따른

---

올바른 구문

leg.animateWith(body, rotation_anim, translation_anim)

이다 :

element.animateWith(element_to_sync_with, animation_to_sync_with, animation)

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

희망이 돕는다.