次の方法で共有

コントロールにアニメーションを追加する (C#)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 このチュートリアルでは、そのようなアニメーションを設定する方法について説明します。

概要

ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 このチュートリアルでは、そのようなアニメーションを設定する方法について説明します。

手順

最初のステップは、通常どおり、ページに ScriptManager を含めることです。これにより、ASP.NET AJAX ライブラリが読み込まれ、Control Toolkit が使用できるようになります。

<asp:ScriptManager ID="asm" runat="server" />

このシナリオのアニメーションは、次のようなテキストのパネルに適用されます。

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
 more interactive and highly-personalized Web experiences that work across all the
 most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
 more interactive and highly-personalized Web experiences that work across all the
 most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
 more interactive and highly-personalized Web experiences that work across all the
 most popular browsers.<br />
</asp:Panel>

パネルに関連付けられている CSS クラスでは、背景色と幅が定義されています。

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

次に、AnimationExtender が必要です。 ID といつもの runat="server" を指定した後、TargetControlID 属性をアニメーション化するコントロール (この場合はパネル) に設定する必要があります。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

アニメーション全体は、XML 構文を使って宣言によって適用されますが、残念ながら、現時点では Visual Studio の IntelliSense では完全にはサポートされていません。 ルート ノードはこのノード内の <Animations>; であり、アニメーションを実行するタイミングを決定するいくつかのイベントが許可されています。

  • OnClick (マウス クリック)
  • OnHoverOut (マウスがコントロールから離れたとき)
  • OnHoverOver (マウスがコントロールをポイントしたとき、OnHoverOut アニメーションを停止する)
  • OnLoad (ページが読み込まれたとき)
  • OnMouseOut (マウスがコントロールから離れたとき)
  • OnMouseOver (マウスがコントロールをポイントしたとき、OnMouseOut アニメーションを停止しない)

フレームワークには一連のアニメーションが付属しており、それぞれ独自の XML 要素で表されます。 以下を選択できます。

  • <Color> (色の変更)
  • <FadeIn> (フェードイン)
  • <FadeOut> (フェードアウト)
  • <Property> (コントロールのプロパティの変更)
  • <Pulse> (脈動)
  • <Resize> (サイズの変更)
  • <Scale> (サイズを比例的に変更)

この例では、パネルをフェードアウトします。アニメーションには 1.5 秒かかり (Duration 属性)、1 秒間に 24 フレーム (アニメーション ステップ) 表示します (Fps 属性)。 AnimationExtender コントロールの完全なマークアップを次に示します。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <FadeOut Duration="1.5" Fps="24" />
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

このスクリプトを実行すると、パネルが表示され、1 秒半でフェードアウトします。

The panel is fading out

パネルがフェードアウトしています (クリックすると全画面の画像が表示されます)

次へ