1

アイデアは、2 つの Raphael オブジェクトを一緒に動かし、そのうちの 1 つを回転させるというものです。以下の例では、移動用と回転用の 2 つのアニメーションを作成しましたが、うまく動作しませんでした。

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/

4

1 に答える 1

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

コードの最後の行に小さな構文エラーがありました。

leg.animateWith(body, rotation_anim, translation_anim)

Raphael.js のドキュメントによると、正しい構文は次のとおりです。

element.animateWith(element_to_sync_with, animation_to_sync_with, animation)

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

お役に立てれば。

于 2013-06-13T14:47:34.797 に答える