QML における UI アニメーションの種類と使いどころ

要点まとめ

UI アニメーションは見た目の演出ではなく、機能を持っています。家電ディスプレイから医療機器のインターフェースまで、アニメーションは状態の変化を伝え、注意を引き、UI をレスポンシブに感じさせます。
モーショングラフィックスとインタラクションアニメーション — UI アニメーションは大きく2種類に分かれます。モーショングラフィックスは自動再生（スピナー、アンビエントループなど）、インタラクションアニメーションはユーザー操作に反応します（ボタン押下、トグル、メニュースライドなど）。
QML には UI アニメーションの実現手段が豊富に揃っています。プロパティアニメーション、グループアニメーション、構造アニメーション、アニメーター、ビヘイビアなど、幅広い選択肢から選べます。
アニメーション構築の基本は「トランジション」と「タイムライン」です。状態変化に連動させるならトランジション、複数プロパティにまたがる複雑なアニメーションにはタイムラインを選びましょう。

このブログは「UI Animation Types in QML And When To Use Them」の抄訳です。

QML における UI アニメーションの種類についてブログを書きたいとずっと思っていたのですが、いざ準備を始めたところ、以前書いたアトミックデザインシステムに関する記事（私にとって初の投稿でもあります）が大きな反響を呼んでいることに気がつきました。最初のコメントがこちらです。

「AI が生成したマーケティング文章の壁を量産できるからといって、そうすべきとは限りません。もう目も当てられません。」

なるほど。では人間以上に人間らしく聞こえるよう、アニメーション UI について少し暴走気味に書いてみます。校正は最小限、フォーマットも適当、もしかしたら多少の毒舌もあるかもしれません。マーケティングが承認するかどうかはわかりませんが。

UI アニメーションが重要な理由

アニメーションは本来、ユーザーインターフェースのデザインに根ざしたものではありませんが、長年にわたって人間とマシンのインタラクションで重要な役割を果たしてきました。Interaction Design Foundation によれば、「UI アニメーションはユーザーインターフェースの機能性と魅力に大きく貢献する」とされており、「デザイナーはアニメーションを使って変化を強調し、タスクをガイドし、フィードバックを提供し、デザインに磨きをかける」とされています。

車載インフォテインメントシステムや洗濯機のコントロールディスプレイといった組込みデバイス向けのデザインを検討する場合でも、UI アニメーションは視覚的な魅力を超えた役割を果たします。

技術の進歩とハードウェア（MPU・MCU の両方）の性能向上に伴い、モーションデザインはますます実装しやすくなっています。デジタルタッチスクリーンはスライドで画面遷移するようになり、プログレスバーは塗りつぶされた領域内で動きを見せ、ローディング画面にはアニメーションが添えられるようになりました。組込みデバイスの UI をアニメーション化することは今や、ユーザーに関連情報を伝えながら、スマートフォンとの操作感に近いインタラクションへの関与を維持する手段となっています。

UI アニメーションを考える 2 つの視点：モーショングラフィックスとインタラクション

アニメーションを「モーショングラフィックス」と「インタラクション」という 2 つの大きなカテゴリで考えてきました。両方の動作はこちらの車載 HVAC システムデモでご確認いただけます。

これが唯一の分類方法だと言っているわけではありません。機能別（ローディング・進行・トランジションアニメーションなど）や、フォーマット別（Lottie・SVG・.mov）に分類する方法もあります。しかし私はインタラクションのスタイルに注目したいと思います。

モーショングラフィックス

モーショングラフィックスは、ユーザーの操作を必要とせず自動的に再生されるアニメーションです。ローディングスピナー・点滅するインジケーター・背景のアンビエントな動き、あるいはビデオゲームで風に揺れる草のブレードなども該当します。最後の例はかなり具体的でしたね。この種のアニメーションはループ再生やタイマー駆動であることが多く、「非リアルタイムアニメーション」と呼ばれることもあります。

The Duolingo bird Duo, used to showcase a motion graphics animation. モーショングラフィックスは自動的に再生されるアニメーションです。Duolingo の Duo を使った例（出典：Verge）

インタラクション

インタラクションは、ユーザーイベントによってトリガーされるアニメーションです。ボタンの押下・ホバー・スライドするメニュー・めくれるカード・オン/オフが切り替わるトグルスイッチなどがその例です。これらのアニメーションはユーザー入力に対するフィードバックを提供し、UI をよりレスポンシブに感じさせます。「リアルタイムアニメーション」とも呼ばれます。

A button animated with an hover interaction that changes the color of the item.

インタラクションはユーザーイベントによってトリガーされます。ユーザーがカーソルを合わせると現れるホバー状態のボタンの例（出典：NNG Group）

QML と UI アニメーションの関係

はじめてお読みの方へ：QML は Qt の UI 構築用宣言型言語であり、アニメーションは QML とそれで作成できる UI の基本的な要素です。

QML では、アニメーションはプロパティの変化に適用されます。アニメーションは、プロパティ値が変化するときに、ある値から別の値への補間カーブを定義します。これらのアニメーションカーブにより、値間のスムーズなトランジションが実現されます。

アニメーションは、アニメーション化する一連のターゲットプロパティ・補間カーブのイージングカーブ・継続時間によって定義されます。Qt Quick のすべてのアニメーションは同一のタイマーによって制御されるため、同期されます。これによりアニメーションのパフォーマンスと視覚品質が向上します。

QML には多数の UI アニメーションが用意されており、すべてドキュメントに説明されています。この記事では、最も一般的なものの概要を紹介します。

QML の UI アニメーションの種類

QML のすべてのアニメーションの基底クラスは Animation です。以下のすべては Animation を継承しており、Animation の共通プロパティ（running・loops・paused など）がすべてのアニメーション型で利用できます。

QML のアニメーション型を、継承ツリーではなく機能別に整理しました。

プロパティアニメーション

プロパティアニメーションは、プロパティをある値から別の値へ、指定した時間をかけて補間します。

PropertyAnimation — 汎用型です。数値・色・ベクターなど補間可能な値を持つプロパティをアニメーション化します。from・to・duration、オプションで easing.type を指定します。
NumberAnimation — PropertyAnimation の便利なサブタイプです。機能的には PropertyAnimation と同一ですが、数値に特化しています。
ColorAnimation — 色間を補間します。
RotationAnimation — 方向（時計回り・反時計回り・最短パス）を制御できる回転アニメーションです。
Vector3dAnimation — Vector3d 値が変化するときに適用するアニメーションを定義します。複数の方法（トランジション・ビヘイビア・プロパティ値ソース）で適用できます。
SmoothedAnimation — プロパティをターゲット値に向けてアニメーション化します。継続時間ではなく速度を指定します。カーソルなど移動するターゲットをスムーズに追跡するのに優れています。
SpringAnimation — 物理ベースのスプリングアニメーションです。spring・damping・mass を設定すると、実際のスプリングのように振動して落ち着きます。プルトゥリフレッシュのような自然なインタラクションに最適です。

animation-types-in-QML-spring-animation-example QML における SpringAnimation の例。プルトゥリフレッシュのような自然なインタラクションに最適です。

グループアニメーション

グループアニメーションは複数のアニメーションを管理します。

ParallelAnimation — 複数のアニメーションを同時に実行します（フェードインしながらスライドアップなど）。
SequentialAnimation — アニメーションを順番に実行します。複数ステップ（スライドイン、その後フェードアップ）に使用します。
PauseAnimation — SequentialAnimation 内に遅延を挿入します。継続時間のみを持ち、プロパティの変化はありません。

構造アニメーション

構造アニメーションはオブジェクトの構造変化を表現します。

AnchorAnimation — アンカーベースのレイアウト変更をアニメーション化します。アイテムが使用するアンカーを変更すると（左アンカーから右アンカーへ）、位置の変化を補間します。
ParentAnimation — 親の変更をアニメーション化します。アイテムの親が変更されると、視覚的な位置変化をスムーズに処理します。
PathAnimation — アイテムをパスに沿って移動させるアニメーションです。

An example of a parent animation in QML, ensuring smooth changes to the visual position when the item's parent changes. QML における ParentAnimation の例。アイテムの親が変更される際に、視覚的な位置がスムーズに変化します。

ユーティリティアニメーション

ScriptAction — JavaScript スニペットを実行します。アニメーション中にエフェクトをトリガーするのに役立ちます。
PropertyAction — アニメーション内の特定の時点でプロパティ値を即座に設定します。SequentialAnimation 内でアニメーションステップ間にプロパティをスナップさせる必要がある場合に便利です。

Animator

これは特殊な型です。GUI スレッドで実行される標準のアニメーション型とは異なり、レンダースレッドで実行されます。つまり GUI がビジーな状態でもスムーズに動作できます。トレードオフとして、使用できるプロパティは少数（x・y・opacity・rotation・scale）に限られます。

Behavior

Behavior は厳密にはアニメーション型ではありませんが、プロパティに直接アニメーションをアタッチして、そのプロパティが変化するたびに自動的に実行する方法です。

Rectangle{
  width: 100
  Behavior on width {
    NumberAnimation { duration: 1000}
  }
}

このインラインの NumberAnimation は、width の値が変わるたびに実行されます。

Transition と Timeline の使い分け

Transition と Timeline は競合するツールではありません。それぞれ異なる問題を解決するものであり、実際の QML プロジェクトの多くで両方が使用されることになります。

Transition

Transition はステート駆動です。State システムと緊密に統合されており、状態が変化すると（ユーザーがボタンをクリックしたときや特定のアクションが完了したときなど）自動的に発火します。状態を定義し、Transition でその間のアニメーション方法を記述します。

ステート駆動の UI アニメーションを扱う場合は、Transition を基本の選択肢とすべきです。

A screenshot that shows a transition in Qt Design Studio, a way to handle UI animations in QML.

Qt Design Studio で Transition を使って UI アニメーションを作成する様子。

Timeline

Timeline はキーフレームベースのアニメーションシステムで、特定の時点またはフレームでのプロパティ値を精密に制御できます。複雑なアニメーションに最適で、currentFrame プロパティをスライダーなど任意のものでも駆動できます。Timeline は Qt Design Studio ビジュアルエディタでインタラクティブなアニメーションを作成する優れた方法です。State/Transition システムとは統合されていないため、Timeline でステート駆動の動作を実現するには手動で接続する必要があります。

シンプルなプロパティアニメーションには過剰な場合もありますが、Timeline は複雑な複数プロパティのアニメーションに最適です。キーフレーミングが必要な場合や、ステート以外のものでアニメーションを駆動したい場合は Timeline を使用すべきです。

A screenshot that shows a timeline in Qt Design Studio, a way to handle UI animations in QML.

Qt Design Studio で Timeline を使って UI アニメーションを作成する様子。

まとめ

UI アニメーションは後付けではありません。インターフェースに生き生きとした印象を与えるための核心的な要素です。最新の家電ディスプレイを開発する場合でも、医療機器の安全クリティカルなユーザーインターフェースを開発する場合でも、モーショングラフィックスとインタラクションの違いは、多くの判断を導く指針となるはずです。進行状況を伝えたりユーザーの関与を維持するために自動再生されるものであれば、モーショングラフィックスと Timeline が適しています。一方、ユーザーのアクションに応答するものであれば、インタラクションと Transition を活用してください。

もちろん、意味のある場面では両者を組み合わせることも可能です。実際の UI（と実際のユースケース）が単一のパターンに収まることはほとんどないからです。目標は常に同じであるべきです。ユーザーインターフェースが、無限の可能性のショーケースではなく、それを使う人に応答しているように感じられること。