|
.NET TIPS ［ASP.NET AJAX］AnimationコントロールでWebページにアニメーション効果を適用するには？（アニメーション要素編）［2.0のみ、C#、VB］山田 祥寛2007/11/29 |
 |
|
|
|
「TIPS：［ASP.NET AJAX］AnimationコントロールでWebページにアニメーション効果を適用するには？（基本編）」（以下、基本編）では、Animationコントロールを使ってページ上の任意の要素に対してアニメーション効果を適用する初歩的な例を解説した。
Animationコントロールは、アニメーション動作を定義するためのAnimationsプロパティを公開するだけのごくシンプルなコントロールだが、このAnimationsプロパティの配下（＝<Animations>要素の内部）にXML形式の定義を記述することで（JavaScriptコードなどの記述を一切行うことなく）フェードアウト／インやリサイズ、色の変更など、さまざまなアニメーション効果を実現できる。
基本編では、Animationコントロールの基本的な構文を解説したが、そこで紹介したのはAnimationコントロールが提供するアニメーション・フレームワークのごく入り口であるにすぎない。本稿と後日公開予定の2つのTIPSでは、Animationsプロパティの定義情報を構成する――そうした意味で、Animationコントロールの中核ともいうべき――以下の3つについて順に解説を進めていく。
- アニメーション要素
- 制御要素（後日公開予定）
- アクション要素（後日公開予定）
今回は、まずその中から「アニメーション要素」について扱うことにしよう。
アニメーション要素は、まさにアニメーション動作そのものを定義するための要素で、以下のような種類の要素が用意されている。
| 要素 | 概要 |
| <Color> | 一定時間内で2色間を変化させる |
| <FadeIn> | フェードイン効果 |
| <FadeOut> | フェードアウト効果 |
| <Pulse> | フェードアウト／フェードインの繰り返し |
| <Resize> | 指定要素のリサイズ |
 |
|
| Animationコントロールで利用可能な主なアニメーション要素 | |
以下では、まずこれらアニメーション要素で利用可能な共通属性を解説した後、個々のアニメーション要素について、用法を紹介していく。
●アニメーション要素で利用可能な共通属性
アニメーション要素を利用するうえで、まず理解しておきたい共通要素は2つ、Duration／Fps属性だ。Duration属性はアニメーション効果にかける時間を、Fps属性は秒当たりにレンダリングするフレーム数をそれぞれ表す。つまり、Fps属性を大きな値にするほど、アニメーションはより滑らかに動作するということだ。
ただし、Fps属性の値をあまりに大きくしてしまうと、結果として、レンダリング処理が間に合わずに、（アニメーションの実行に）Duration属性で指定した値よりも長い時間がかかってしまい、アニメーションとしての動作がぎこちなくなってしまう可能性があるので注意が必要だ。
●要素の色を徐々に変化させる - <Color>要素 -
まずは、基本編でも登場した<Color>要素だ。<Color>要素を利用することで、ターゲット要素の色を一定時間（Duration属性）の中で徐々に変化させることができる。<Color>要素で利用可能な属性は、以下のとおりだ。
| 属性 | 概要 |
| Property | 色を適用するターゲット要素のプロパティ（通常は「style」を指定） |
| PropertyKey | Property属性で指定したプロパティに指定するオプショナル・キー |
| StartValue | 開始時の色 |
| EndValue | 終了時の色 |
|
|
| <Color>要素で利用可能な属性 | |
| Property属性に「style」、PropertyKey属性に「backgroundColor」、StartValue属性に「#000000」を指定した場合、JavaScriptコードで「＜ターゲット要素＞.style.backgroundColor = "#000000"」のような意味になる。 | |
例えば、パネル内の文字色を黒から緑に変化させたい場合には、以下のように記述すればよい。サンプルは、基本編で作成したBasic.aspxを基にしているものとする（以降も同様）。
|
|
| <Color>要素でパネル内の文字色を変化させるコード（Color.aspx） |
次の画面はこのコードの実行例だ。
|
 （パネルをクリック） |
 |
| （次第にテキスト色が変わっていく） |
 |
| <Color>要素によってパネル内の文字色が黒から緑に徐々に変化する |
基本編では、パネルの背景色（backgroundColor）を変化させたが、このようにPropertyKey属性を指定することで、任意の個所の色を変化させることができるというわけだ（ここでは、テキスト色なので「color」を指定している）。
なお、PropertyKey属性を指定するに際しては、JavaScriptで記述する際に使用する形式で指定する必要がある点に要注意だ。例えば、背景色を指定する際に、CSS形式である“background-color”（ハイフン付き）を指定することはできない。
●フェードイン／フェードアウト効果を適用する - <FedeIn>／<FadeOut>／<Pulse>要素 -
フェードイン／フェードアウト効果を適用するのは、<FadeIn>／<FadeOut>要素の役割だ。また、フェードイン／フェードアウト効果を繰り返し実行する<Pulse>要素も用意されている。以下に、各要素で利用可能な属性をまとめてみた。
| 要素 | 属性 | 概要 | デフォルト値 |
| <FadeIn>／<FadeOut>／<Pulse> | maximumOpacity | フェードアウト／フェードインの際の最大の透明度（0〜1） | 1 |
| minimumOpacity | フェードアウト／フェードインの際の最大の透明度（0〜1） | 0 | |
| <Pulse> | Duration | フェードアウト／フェードインの周期間隔（秒） | 1 |
| Iterations | 処理を繰り返す回数 | 3 | |
|
|||
| <FedeIn>／<FadeOut>／<Pulse>要素で利用可能な属性 | |||
例えば、パネルをクリックしたタイミングで、パネルの内容をフェードアウトさせたいならば、以下のように記述すればよい。ここではminimumOpacity属性の設定を確認するために、完全にフェードアウトさせるのではなく、わずかに残像を残すようにしている。
|
|
| <FadeOut>要素でパネルをフェードアウトさせるコード（FadeOut.aspx） |
次の画面はこのコードの実行例だ。
|
| （パネルをクリック） |
 |
| （フェードアウトしていく） |
 |
| <FadeOut>要素によってパネルが徐々にフェードアウトする |
minimumOpacity属性を「0.1」に設定しているので、パネルの残像がやや残って見えるはずであるが、デフォルトの0とした場合には、完全にフェードアウトすることになる。
また、<FadeOut>／<FadeIn>要素は、一度、フェードアウト／フェードインしたらそれで終わりであるが、フェードアウト／フェードインを繰り返したい場合には、<Pulse>要素を利用すればよい。
|
|
| <Pulse>要素でフェードアウトとフェードインを繰り返し実行するコード（Pulse.aspx） |
次の画面はこのコードの実行例だ。
|
| （パネルをクリック） |
 |
| （フェードアウトとフェードインを5回繰り返す） |
 |
| <Pulse>要素によってフェードインとフェードアウトを交互に繰り返す |
繰り返しの回数はIterations属性で指定が可能だ。また、<Pulse>要素では、Duration属性は（アニメーション全体ではなく）フェードアウト／フェードインの1周期当たりにかかる秒数を表す点に注意。つまり、ここでは3秒周期でフェードアウト／フェードインを5回繰り返すようなアニメーション効果を定義していることになる。
●ターゲットのサイズを変更する - <Resize>／<Scale>要素 -
最後に、ターゲット要素のサイズを変更する<Resize>／<Scale>要素を紹介する。<Resize>／<Scale>要素は、いずれもサイズ変更の役割を担うアニメーション要素であるが、両者の機能は微妙に異なるので要注意だ。
|
<Resize>要素 | <Scale>要素 |
| サイズ指定 | 絶対値で指定 | 倍率／縮小率で指定 |
| 対象 | ターゲット要素のみ | ターゲット要素と配下のテキスト |
|
||
| <Resize>要素と<Scale>要素の違い | ||
<Resize>／<Scale>要素それぞれで利用可能な属性は、以下のとおり。
| 要素 | 属性 | 概要 |
| <Resize> | Height | リサイズ後の高さ |
| Width | リサイズ後の幅 | |
| Unit | 指定単位（デフォルトは“px”） | |
| <Scale> | ScaleFactor | 拡大／縮小率（デフォルトは1） |
| ScaleFont | フォントの倍率も変更するか | |
| Center | ターゲットをセンタリングするか | |
|
||
| <Resize>／<Scale>要素で利用可能な主な属性 | ||
では、具体的なサンプルで<Resize>／<Scale>要素による挙動の違いを確かめてみよう。
|
|
| <Resize>要素でパネルサイズを拡大するコード（Resize.aspx） |
次の画面はこのコードの実行例だ。
|
| （パネルをクリック） |
 |
| （パネルが徐々にリサイズされていく） |
 |
| <Resize>要素によってパネル・サイズを拡大する |
ここでは、Height／Width属性にそれぞれ「200px」「300px」と指定しているので、パネルは元のサイズから指定サイズまで徐々に拡大されるはずだ。前述したように、拡大するのはあくまでパネル領域のみで、配下のテキストのサイズは変わらないことが確認できる。
一方、<Scale>要素はどうだろう。
|
|
| <Scale>要素でパネル・サイズとその配下の文字列を拡大するコード（Scale.aspx） |
次の画面はこのコードの実行例だ。
|
| （パネルをクリック） |
 |
| （パネルが徐々にスケールされていく） |
 |
| <Scale>要素によってパネル・サイズとパネル内の文字列を拡大する |
ScaleFactor属性に「2」を指定しているので、パネル・サイズは2倍に拡大される。また、それだけではない。ScaleFont属性を「True」に設定しているので、パネルの拡大に合わせて、配下のフォント・サイズも拡大していることが確認できる。
| 利用可能バージョン：.NET Framework 2.0のみ カテゴリ：Webフォーム 処理対象：ASP.NET AJAX 使用ライブラリ：Animationコントロール 関連TIPS：［ASP.NET AJAX］AnimationコントロールでWebページにアニメーション効果を適用するには？（基本編） 関連TIPS：［ASP.NET AJAX］AnimationコントロールでWebページにアニメーション効果を適用するには？（制御要素編）（後日公開予定） 関連TIPS：［ASP.NET AJAX］AnimationコントロールでWebページにアニメーション効果を適用するには？（アニメーション要素編）（後日公開予定） |
 |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために （2017/7/26）
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 （2017/7/21）
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために （2017/7/19）
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator （2017/7/18）
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
