Silverlight-animation

Silverlight-アニメーション

アニメーションを使用すると、真に動的なユーザーインターフェイスを作成できます。 多くの場合、効果を適用するために使用されます。たとえば、アイコンの上を移動すると拡大するアイコン、回転するロゴ、スクロールして表示されるテキストなどです。

時々、これらの効果は過度の輝きのように見えます。 適切に使用すれば、アニメーションはさまざまな方法でアプリケーションを強化できます。 アプリケーションの応答性、自然性、直感性を高めることができます。

たとえば、クリックしたときにスライドするボタンは、別の灰色の長方形ではなく、実際の物理的なボタンのように感じられます。 アニメーションは、重要な要素に注意を引き、新しいコンテンツへの移行をユーザーに案内することもできます。

Silverlightのアニメーションへのアプローチは、フレームアニメーションのシーケンスに焦点を合わせるのではなく、宣言的です。

アニメーションの定義

アニメーションは通常、リソースセクションで定義されます。 実際、それらは通常、ストーリーボード要素にラップされています。これについては、後ほど詳しく説明します。

• Begin（）メソッドが提供されているため、アニメーションをコードから呼び出すことができます。 *アニメーションは、コントロールテンプレートの視覚状態要素内に配置することもできます。

宣言的なアニメーション

Silverlightのアニメーションは宣言的です。 彼らは何が起こりたいかを説明します。 それを実現する方法については、Silverlightにお任せください。 そのため、アニメーションは通常、Silverlightに変更したい内容を伝えるパターンに従います。

これは常にいくつかの名前付き要素のプロパティです。* TargetName および *TargetProperty 。

<DoubleAnimation
   Storyboard.TargetName = "myRectangle"
   Storyboard.TargetProperty = "Opacity"
   From = "0" To = "1"
   Duration = "0:0:5"
/>

Copy

• この場合、そのプロパティをどのように変更したいかを言います。不透明度を値0から値1に変更しています。 つまり、ターゲット要素が不透明から透明にフェードするのが好きです。
• 最後に、これに要する時間を言います。この場合、5秒かかります。
• このdoubleアニメーションでのdoubleの重要性は、double型、つまり浮動小数点値を持つプロパティを対象とすることです。
• 色を表すプロパティをアニメーション化する場合は、代わりにカラーアニメーションを使用します。

ダブルアニメーションの簡単な例を見てみましょう。 以下に示すのは、2つのボタン、1つの長方形、2つのストーリーボードが追加されたXAMLコードです。

<UserControl x:Class = "DoubleAnimationExample.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">

   <UserControl.Resources>

      <Storyboard x:Name = "fadeDown">
         <DoubleAnimation
            Storyboard.TargetName = "myRectangle"
            Storyboard.TargetProperty = "Opacity"
            From = "1" To = "0"
            Duration = "0:0:5"/>
      </Storyboard>

      <Storyboard x:Name = "fadeUp">
         <DoubleAnimation
            Storyboard.TargetName = "myRectangle"
            Storyboard.TargetProperty = "Opacity"
            From = "0" To = "1"
            Duration = "0:0:5"/>
      </Storyboard>

   </UserControl.Resources>

   <Grid x:Name = "LayoutRoot">
      <Rectangle x:Name = "myRectangle"
         Fill = "Blue" Width = "300" Height = "100"
         HorizontalAlignment = "Center"
         VerticalAlignment = "Top" Margin = "0,30"/>

      <Button x:Name = "fadeUpButton" Content = "Up" Width = "80"
         Height = "30" HorizontalAlignment = "Left"
         VerticalAlignment = "Top" Margin = "50,140,0,0"
         Click = "fadeUpButton_Click"/>

      <Button x:Name = "fadeDownButton" Content = "Down"
         Width = "80" Height = "30" HorizontalAlignment = "Left"
         VerticalAlignment = "Top" Margin = "50,180,0,0"
         Click = "fadeDownButton_Click"/>

   </Grid>

</UserControl>

Copy

C＃のさまざまなイベントの実装を次に示します。

using System.Windows;
using System.Windows.Controls;

namespace DoubleAnimationExample {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void fadeUpButton_Click(object sender, RoutedEventArgs e) {
         fadeUp.Begin();
      }

      private void fadeDownButton_Click(object sender, RoutedEventArgs e) {
         fadeDown.Begin();
      }
   }
}

Copy

上記のコードをコンパイルして実行すると、次の出力が表示されます。

宣言型アニメーション

繰り返しと反転

アニメーションには、自動的に繰り返すいくつかのプロパティと、すべてのリバースアニメーションがあります。

• 繰り返し動作プロパティをタイムスパムに設定すると、指定した時間が経過するまでアニメーションが繰り返しループするか、繰り返したい回数を伝えることができます。
• これは小数点をサポートしているため、4回半繰り返すことができます。
• 永遠に繰り返すことができます。また、アニメーションが最後に到達したら、逆方向に実行して最初に戻るようにアニメーションに指示することもできます。

キーフレームアニメーション

多くの場合、AからBへの単純なアニメーションは少し単純すぎます。 たとえば、地面から跳ね返るボールをアニメーション化します。 これは単純なポイントツーポイントの移動ではありません。 ボールは落下し、徐々にスピードを上げてから、下に当たると方向を逆にします。 旅行の頂点に戻ると、再び減速します。

• キーフレームアニメーション*の簡単な例を見てみましょう。

以下に、XAMLコードを示します。これには、キーフレーム付きの楕円とダブルアニメーションが含まれています。

<UserControl x:Class = "LinearKeyFrames.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d"
   Width = "400" Height = "300">

   <UserControl.Resources>

      <Storyboard x:Name = "ballAnim" SpeedRatio = "0.2">
         <DoubleAnimation From = "0" Duration = "00:00:03" To = "96"
            Storyboard.TargetName = "ellipse"
            Storyboard.TargetProperty = "(Canvas.Left)"/>

         <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName = "ellipse"
            Storyboard.TargetProperty = "(Canvas.Top)">

            <LinearDoubleKeyFrame KeyTime = "00:00:00"   Value = "0"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:01"   Value = "48"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:02"   Value = "48"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:03"   Value = "0"/>

         </DoubleAnimationUsingKeyFrames>

      </Storyboard>

   </UserControl.Resources>

   <Grid x:Name = "LayoutRoot" Background = "White">
      <Canvas>
         <Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50"/>
      </Canvas>
   </Grid>

</UserControl>

Copy

以下は mouse left button downイベントの実装です。これは、ユーザーがWebページ上でマウスの左ボタンを押したときにアニメーションを開始します。

using System.Windows.Controls;
using System.Windows.Input;

namespace LinearKeyFrames {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
         this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
      }

      void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
         ballAnim.Begin();
      }
   }
}

Copy

上記のコードをコンパイルして実行すると、次の出力が表示されます。

キーフレームアニメーション

Webページをクリックすると、ボールが動き始めます。

キーフレームアニメーションの移動