C1ProgressBar コントロールは、31 種類の組み込みアニメーションを備えています。このトピックでは、デザインビュー、ソースビュー、およびコードで、アニメーション、アニメーションの持続時間、およびアニメーションの遅延時間を設定します。

デザインビューでのアニメーションの設定

以下の手順を実行します。

1. 〈デザイン〉ボタンをクリックして、デザインビューに入ります。
2. C1ProgressBar コントロールを右クリックしてそのコンテキストメニューを開き、［プロパティ］を選択します。
   プロパティウィンドウが開いて、C1ProgressBar コントロールのプロパティがフォーカス状態になります。
3. プロパティウィンドウで、以下のプロパティを設定します。
   • AnimationOptions.Easing プロパティを EaseOutBounce に設定します。これによって、アニメーション効果が設定されます。
   • AnimationOptions.Duration プロパティを「6000」に設定します。これによって、アニメーションの長さが設定されます。
   • AnimationDelay プロパティを「500」に設定します。これにより、アニメーションが始まるまでの経過時間が設定されます。
   • Value プロパティを「100」に設定します。これによって、実行時に進捗インジケータがトラック上を進行するようになります。
4. ［F5］を押してプロジェクトを実行します。アニメーションの開始までに約 0.5 秒かかり、完了には６秒かかることを確認してください。アニメーション EaseOutBounce が設定されると、進捗インジケータはトラックの終端に当たってバウンドしてから安定した状態に落ち着きます。

ソースビューでのアニメーションの設定

以下の手順を実行します。

1. 〈ソース〉ボタンをクリックしてソースビューに入ります。
2. AnimationDelay="500" を <cc1:C1ProgressBar> タグに追加して、マークアップを次のように記述します。

   ソースビュー	コードのコピー
   <cc1:C1ProgressBar ID="C1ProgressBar1" runat="server" AnimationDelay="500"></cc1:C1ProgressBar>

3. <cc1:C1ProgressBar> タグの間に次のマークアップを置きます。

   ソースビュー	コードのコピー
   <AnimationOptions Duration="6000" Easing="EaseOutBounce" />

4. ［F5］を押してプロジェクトを実行します。アニメーションの開始までに約 0.5 秒かかり、完了には６秒かかることを確認してください。アニメーション EaseOutBounce が設定されると、進捗インジケータはトラックの終端に当たってバウンドしてから安定した状態に落ち着きます。

コードでのアニメーションの設定

以下の手順を実行します。

1. Visual Studio ツールバーで、［表示］→［コード］をクリックしてコードビューに入ります。
2. 次のコードを Page_Load イベントに追加します。

   Visual Basic コードの書き方

   Visual Basic	コードのコピー
   ‘ アニメーションのプロパティを設定 C1ProgressBar1.AnimationDelay = 500; C1ProgressBar1.AnimationOptions.Duration = 6000; C1ProgressBar1.AnimationOptions.Easing = C1.Web.Wijmo.Controls.Easing.EaseOutBounce; ‘ 進捗インジケータが実行時に自動的に進行するように Value プロパティを設定 C1ProgressBar1.Value = 100

   C# コードの書き方

   C#	コードのコピー
   // アニメーションのプロパティを設定 C1ProgressBar1.AnimationDelay = 500; C1ProgressBar1.AnimationOptions.Duration = 6000; C1ProgressBar1.AnimationOptions.Easing = C1.Web.Wijmo.Controls.Easing.EaseOutBounce; // 進捗インジケータが実行時に自動的に進行するように Value プロパティを設定 C1ProgressBar1.Value = 100;

3. ［F5］を押してプロジェクトを実行します。アニメーションの開始までに約 0.5 秒かかり、完了には６秒かかることを確認してください。アニメーション EaseOutBounce が設定されると、進捗インジケータはトラックの終端に当たってバウンドしてから安定した状態に落ち着きます。