WPFにはストーリーボードという機能が備わっており、これを使うと高度な描写制御を行うことができます。WPFを使ったアニメーションについても作成することが可能です。
この記事では、ストーリーボードを使ったアニメーションについて概要をご紹介します。

PG

ストーリーボードでアニメーションを作りたいんですが、これはどういうものなんですか？

PM

WPFのストーリーボードは少し複雑ですが、まずは概要から説明していきましょう。

WPFのストーリーボードの概要

ストーリーボードとは、WPFで高度な描写制御を行える機能です。xamlで記述され、どのUIをどのタイミングで、どのように動かすかを指定します。これを上手く使うことで、アニメーションを実装することが可能です。指定したタイムラインで描写が変化していくことにより、アニメーションとしての動きを実現しています。

テキストによる編集も可能だが

xamlファイルはテキストでも読めるファイルですので、テキストエディタなどで編集することが可能です。しかし、より複雑な動きを実現するとなると、xamlに記述する内容も膨大かつ複雑になるため、Expression Blendなどの利用が推奨されています。

WPFのアニメーションの概要

WPFのアニメーションは、ストーリーボードクラスで複数のタイムラインを束ねて、各要素の動きを指定することにより実装しています。また、複数の要素についても記述することができるので、細かい複雑な動きにも対応可能です。ストーリーボードクラスで指定した動きを、トリガーと呼ばれるアニメーション開始のスイッチを設定し、所定の状態になったら動かすようにする仕組みになっています。

キーフレームを使うことで処理負荷を軽減

キーフレームとはアニメーションの1コマのことで、指定したタイムラインでの描写の変化を行います。動画などではフレームレートなどにより、1コマごとの情報を記録しているため、処理が重くなってしまいがちです。そこで、キーフレームの時間のみ描写を変えることにより、負荷の少ないアニメーションを実現しています。

PG

記述の仕方が複雑そうですが、いろいろな動きを設定できるので面白そうですね！

PM

細かい動きをつけることもできるので、いろいろ試してみると良いでしょう。

高度に使いこなして見栄えを良くする

目に見えて動きのあるアニメーションを実装することで、ひと際目を引く仕上がりになります。また、「マウスオンなどのアクションごとにライトアップする」などちょっとした工夫を施すのにも役立つでしょう。見栄えの良さや使い易さを追求する工夫の1つとしても、アニメーションを活用していくのは有効な手段です。