1

RaphaelJS を使用して HTML5 キャンバスでアニメーションを作成しているのですが、アニメーション イベントを作成する方法とそれらをトリガーする方法がよくわかりません。ドキュメントはあまり役に立ちません。ありがとう

4

1 に答える 1

0

まず、HTML5 Canvas を利用していないと指摘したように、raphael は実際に SVG を使用しています。実際、raphaelJS でアニメーションを作成するのは非常に簡単です。以下の行をニーズに合わせて調整するだけです。

raphaelObject.animate({ attribute: value } , time , easing );

raphaelObjectは、アニメーション化しようとしているものです。たとえば、以前に作成した形状です。

属性は、アニメーション化するものです。たとえば、色です。

値は、たとえば「赤」に変更するものです

timeは、アニメーションにかかる時間 (ミリ秒) です。

イージングは​​、アニメーションの性質を説明します。まず、期待どおりに単純なアニメーションを実行する "<>" を使用します。イージング「バウンス」により、アニメーションがうまくバウンスします。さまざまなイージングの例: http://raphaeljs.com/easing.html

オブジェクト「アイコン」を 90 度回転させ、色を赤に変更してアニメーション化する例を次に示します。アニメーションには 300 ミリ秒かかり、派手なバウンス効果があります。

    icon.stop().animate({
            transform: "r90",
            fill: "red"
        }, 300 , 'bounce' );
于 2013-07-17T12:14:47.453 に答える