グラフィックスビューのアイテムのアニメーション
グラフィックスビューのQGraphicsItemアイテムにアニメーションフレームワークを適用するには、QGraphicsItemアイテムのプロパティでアニメーションすることなります。しかし、ほとんどのQGraphicsItemアイテムはQObjectを継承してはいないので、そのようなアイテムでアニメーションするには、以下の2つの方法を用います。
- 1.QGraphicsObjectをサブクラス化して、アイテムを作成する。
- 2.QObjectとQGraphicsRectItemやQGraphicsPixmapItemを多重継承したアイテムを作成する。
QGraphicsSvgItem、QGraphicsTextItem、QGraphicsWidgetなどのようにQObjectを継承しているアイテムは、そのままでアニメーションを適用できます。
ここでは、2番目の方法でQGraphicsItemアイテムにアニメーションを適用してみましょう。
今回紹介するアニメーションプログラムのソースリストはこちらからダウンロードしてください。
examples.zip
2番目の方法を用いた、QObjectとQGraphicsPixmapItemを多重継承したクラスです。posプロパティを既存のゲッターpos()とセッターsetPos()を用いて定義し、アイテムをプロパティを介して操作できるようすれば、アニメーションフレームワークが適用できるようになります。親のオブジェクトを指定せずに、QObjectを初期化することに注意します。
動くアイテムがあるグラフィックスビューを置くためのクラスです。今迄のサンプルプログラムと同じように、Animate ボタンがクリックされたならば、startAnimation() スロットを呼出して、アニメーションを開始するようにします。
グラフィックスシーンの左端に、アニメーションが可能なようにしたアイテムを配置しています。
posプロパティを使ってアニメーションするのは、今までのサンプルプログラムとまったく同じようになります。つまり、QObjectを継承するQtのオブジェクトは、グラフィカルなものも非グラフィカルなものも、アニメーションフレームワークを用いてアニメーションできるのです。
リスト1のサンプルプログラムを実行すると、以下の動画のように黄色いボールが左から右に移動します。
複数のアニメーションの扱い方
アニメーションフレームワークには、複数のウィジェットやアイテムがアニメーションの対象となっている場合に、各アニメーションを順番に実行したり、並行して実行させるために、アニメーショングループという機能が用意されています。
シーケンシャルアニメーションによるアニメーションの順次実行
図1のように、QSequentialAnimationGroupクラスを用いて3つのアニメーションを順番に実行してみましょう。
コードの変更箇所はリスト2のようになります。
QSequentialAnimationGroup クラスを使うため、そのヘッダファイルのインクルードを追加します。
30行目で、QPropertyAnimationの代わりにQSequentialAnimationGroupを使うようにします。
黄、緑、赤の3つのボールを縦に並べ、上から順番に1つずつ実行するので、ボールのアイテムを生成するメソッドを47行目で宣言します。
3つのボールがあるので、59行目のボールの上下の空白の求め方を変えています。
64~72行目で緑と赤のボールを追加しています。
93~100行目では各ボールを5秒ずつ動かすアニメーションを作り、97行目でQSequentialAnimationGroupでグループ化しています。このようにすると、まず黄のボールが5秒かけて左から右に移動し終わると、緑のボールが同じように5 秒かけて移動し、最後に赤のボールが移動するという動きになります。
114~116行目で、3つのボールを左端に戻しています。次回に説明するステートマシンフレームワークを用いれば、初期状態に戻すのをわかりやすく記述できますが、今はこのようにして初期状態に戻します。
119行目でアニメーショングループのstart()を呼んで、アニメーションの開始をさせています。この場合には、グループ内のQPropertyAnimationが順番に実行されます。
各ボールのアニメーションを生成するための補助メソッドです。このプログラムを実行すると、次の動画のようになります。
パラレルアニメーションによるアニメーションの並行実行
今度は、図2のように、アニメーションとシーケンシャルアニメーションを並行に実行してみます。シーケンシャルアニメーションのサンプルプログラムへの変更箇所はリスト3のようになります。
QParallelAnimationGroupクラスを使うために、そのヘッダファイルのインクルードを追加します。
ballAnimationGroupをQParallelAnimationGroupに変更します。
94~96行目では黄色のボールのアニメーション時間を20秒にし、緑と赤のボールは10秒ずつにしています。このようにすると、黄色のボールが20秒かけて移動する間に、緑ボールが移動してから赤のボールが移動するようになります。
98行目でQParallelAnimationGroupのインスタンスを生成し、100~103行でその中にアニメーションとシーケンシャルアニメーションを入れています。
このプログラムを実行すると、次の動画のようになります。
おわりに
Qtのオブジェクトのプロパティのアニメーションが、メタオブジェクトシステムによってうまく実装され、簡単に使えるというのを把握していただけたと思います。今回は、アニメーションフレームワークの基本的な機能のみを説明したので、どのようにして、ダイナミックに滑らかな動きをする効果的なGUIが作れるのかについては、わかりにくいかもしれません。これは、次回以降の説明と連載後半の宣言的UIの説明で、具体的に掴めるように解説する予定です。