AnimatedAppComponentクラスを使ってアニメーションさせてみた

Last updated at 2018-12-07Posted at 2018-12-07

#はじめに

去年に続いて今年も JUCE Advent Callender に参加しました。kawaです。
今回は "AnimationAppComponent" クラスを使ってアニメーション描画に挑戦してみたいと思います。
中身の内容で間違っている場所や、おかしなところがあるかもしれないですが、その時はコメント欄にて教えていただけると嬉しいです。
よろしくお願いします。

テスト環境 JUCE v5.4.1
Windows 10 64bit

※ この記事はopenGLを使わずに描画しています。より本格的なアニメーションをする場合はCPUの負荷が大きくなる場合があります。内容に合わせてFPSを下げたり、OpenGLAppComponentを使った方が良いかもしれません。

#AnimationAppComponentについて

Projucerで Animated Application を選択し、プロジェクトを作成すると AnimationAppComponent クラスを継承した MainComponentクラスが作られます。このクラスを使ってアニメーションを描画していきます。

AnimationAppComponentクラスで追加された関数は [AnimatedAppComponent Class Reference] (https://docs.juce.com/master/classAnimatedAppComponent.html)によると以下の4つのようでした。

void          setFramesPerSecond (int framesPerSecond); // 更新間隔を設定する(FPS)
virtual void  update () =0; // 純粋仮想関数
int 	      getFrameCounter () const noexcept; // コンポーネントの実行が開始されてからupdate()が実行された回数を取得する
int 	      getMillisecondsSinceLastUpdate () const noexcept; // 前回update()呼び出してからの時間をミリ秒単位で取得する

処理の流れとして、
設定したFPSのタイミングで **update()**が実行され、その後に描画を更新する。
という流れになっているようです。( setFramePerSecond(int) 関数でFPSを設定しないと親クラスのTimerがスタートせずアニメーションがスタートしないようです。)

今回は、MainComponentクラスのコンストラクタで setFramePerSecond(int) でFPSを60に設定し
update() 関数の中で getMillisecondsSinceLastUpdate() 関数を使ってアニメーションに使う時刻、変数を計算して **paint()**関数で使っていきたいと思います。

#アニメーション時刻を計算する。

MainComponentクラスにアニメーション時刻として使う変数を追加して、update() 関数の中で計算します。"0.0 ~ 1.0" の範囲に調節することで、計算がとてもしやすくなります。

// MainComponentクラス
// アニメーション時刻用の変数をクラスに追加
double m_animationTime; // コンストラクタで、0.0の値で初期化しておく

void MainComponent::update()
{
    //=========================================================================
    int deltaTimeMs = this->getMillisecondsSinceLastUpdate(); // ミリ秒単位で取得
    this->m_animationTime += (deltaTimeMs / 1000.0);// 1000.で割って秒単位にしたものを足していく。
    //=========================================================================
    if( this->m_animationTime > 1.0 ) // 1.0を超えた瞬間 == 1秒経過 
        this->m_animationTime = 0.0;  // 0.0にしてリセットする。
    //=========================================================================
}