【Raphael.js】指定時間後にアニメーションを動かす方法

【Raphael.js】指定時間後にアニメーションを動かす方法

delay関数

基本的にアニメーションはanimate関数の後に即実行されます。数秒後に動かすディレイ効果を追加したい場合、delay関数を使用します。delay関数はアニメーションオブジェクトが持っている関数なので、まずはアニメーションオブジェクトから作成してやる必要があります。以下の例では3秒後にサークルが小さくなっていきます。

実行結果

FullScreen http://jsfiddle.net/nekosmash/Z8tTU/embedded/result/

解説

アニメーションオブジェクトの中にある関数という事で少し使いにくいですね。animate関数に渡す配列に関連付け出来たら1ラインで書けて楽なのですが。。ひとまずこれでアニメーションのディレイはOKですね！

Animation.delay(time);

• Animation: アニメーションの定義だけを格納したオブジェクト
• time: 何ミリ秒後に動かすかを定義
• 返り値: ディレイ効果が付与されたアニメーションオブジェクト