Johnny-Fiveでマイコン制御28 - アニメーション

○Animationオブジェクトを作成する

　LEDやサーボモーターをアニメーションで制御するには、Animationオブジェクトを使います。Animationオブジェクトは、単一のアニメーションを表すオブジェクトです。Animationオブジェクトを作成するには、Animationクラスのコンストラクタを使います。引数には、対象のオブジェクトを指定します。

new five.Animation(オブジェクト);

　アニメーションできるオブジェクトは、次のとおりです。

・Servo, Servos

・Led, Leds

・Led.RGB, Led.RGBs

たとえば、単一のサーボモーター(Servoオブジェクト)をアニメーションするためのAnimationオブジェクトを作成するには、次のように書きます。

var servo = new five.Servo(9); var animation = new five.Animation(servo);

　複数のサーボモーター(Servosオブジェクト)をアニメーションするためのAnimationオブジェクトを作成するには、次のように書きます。

var servos = new five.Servos([9,10,11]); var animation = new five.Animation(servos);

○アニメーションキューにセグメントを追加する

　オブジェクトをアニメーション化するには、アニメーションキューにセグメントを追加します。アニメーションキューにセグメントを追加するには、「enqueue」メソッドを使います。

enqueue(セグメントオブジェクト)

　引数には、セグメントオブジェクトを指定します。セグメントオブジェクトで利用可能なプロパティ(セグメントプロパティ)は、次のとおりです。

プロパティ	説明
target	アニメーションが作成されたときに渡されたターゲットをオーバーライドする
duration	セグメントの持続時間(ミリ秒単位)、規定値は「1000」
cuePoints	それぞれのアニメーションの開始と終了を表す0.0～1.0の値の配列(規定値：[0, 1])
keyFrames	時間経過におけるデバイスの状態または位置を表す1または2次元の配列
easing	キーフレームに適用するイージング関数、(規定値："linear")
loop	trueでループ再生(規定値：false)
loopback	ループバックするキューポイント(規定値：0.0)
metronomic	trueでキューポイントの再生し、その後逆再生する。ループに設定されている場合、next(), pause() or stop()が呼び出されるまで、前後に繰り替えし再生される(規定値：false)
progress	再生ヘッドの出発点(規定値：0.0)
currentSpeed	再生ヘッドの速度(規定値：1.0)
fps	セグメントの秒あたりの最大フレーム数(規定値：60)
onstart	セグメントが開始されたときに実行する関数(規定値:なし)
onpause	セグメントが一時停止されたときに実行する関数(規定値:なし)
onstop	アニメーションが停止しているときに実行する関数(規定値:なし)
oncomplete	セグメントが完了したときに実行する関数(規定値:なし)
onloop	セグメントループ時に実行する関数(規定値:なし)

　たとえば、キューポイント「0」「0.25」「0.75」「1」の各ポイントで「90度」「0度(イージング「outQuad」)」「90」「180度(イージング「outQuad」)」でアニメーションするには、次のように書きます。

var five = require("johnny-five"); var board = new five.Board(); board.on("ready", function() {   // Servoオブジェクトを作成   // (10ピンをサーボモーター制御用に設定)   var servo = new five.Servo(10);   // Animationオブジェクトを作成   var animation = new five.Animation(servo);   // アニメーションの設定   animation.enqueue({     cuePoints: [0, 0.25, 0.75, 1],     keyFrames: [90, { value: 180, easing: "inQuad" }, { value: 0, easing: "outQuad" }, 90],     duration: 2000   }); });

・配線図

 

○アニメーションを一時停止・停止・再生する

アニメーションを一時停止には「pause」メソッド、停止するには「stop」メソッドを、再生するには「play」メソッドを使います。「pause」から「play」した場合は、一時停止したキューポイントから再開します。「stop」から「play」した場合は、最初のキューポイントから再生します。

animation.enqueue({     cuePoints: [0, 0.25, 0.75 , 1],     keyFrames:[90, { value: 0, easing: "outQuad" }, 90,  { value: 180, easing: "outQuad" }],     loop: true   });   // 5秒後   this.wait(5000,function(){     // 一時停止     animation.pause();   });   // 10秒後   this.wait(10000,function(){     // 再生(再開)     animation.play();   });   // 15秒後   this.wait(15000,function(){     // 再生(再開)     animation.stop();   }); });

○アニメーションの速度を設定する

アニメーションの速度を設定するは、「speed」メソッドを使います。値には、スピードをパーセンテージ(0(停止)～1(最大))の少数)を指定します。引数を省略した場合、現在のスピードが返されます。

// スピードを50％(0.5)に設定     animation.speed(0.5);