WPFのストーリーボードを使えばアニメーションを実装できる

WPF

.NET
WPF

公開日時: 2020-04-09 　更新日時: 2022-06-13

この記事でわかること

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

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

プロジェクト マネージャー: WPFのストーリーボードは少し複雑ですが、まずは概要から説明していきましょう。

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

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

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

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

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

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

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

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

プログラマー: 記述の仕方が複雑そうですが、いろいろな動きを設定できるので面白そうですね！

プロジェクト マネージャー: 細かい動きをつけることもできるので、いろいろ試してみると良いでしょう。

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

WPFのストーリーボードを使えばアニメーションを実装できる