記事一覧

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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.01.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

  });

});

 

・配線図

 2016080808.png


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

アニメーションを一時停止には「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);

 

 

スポンサーサイト

コメント

コメントの投稿

非公開コメント

ads

プロフィール

Author:部員3号
FC2ブログへようこそ!

kindle本

最新コメント

温度計

ads

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。