Silverlight-アニメーション

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

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

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

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

アニメーションの定義

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

  • Begin()メソッドを提供するため、コードからアニメーションを呼び出すことができます。

  • アニメーションは、コントロールテンプレートの視覚状態要素内に配置することもできます。

宣言型アニメーション

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

これは常にいくつかの名前付き要素のいくつかのプロパティです。 TargetName そして TargetProperty

<DoubleAnimation 
   Storyboard.TargetName = "myRectangle" 
   Storyboard.TargetProperty = "Opacity" 
   From = "0" To = "1" 
   Duration = "0:0:5"  
/>
  • この場合、不透明度をゼロの値から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>

これは、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(); 
      } 
   } 
}

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

繰り返しと逆転

アニメーションには、アニメーションを自動的に繰り返したり、すべて反転したりするためのいくつかのプロパティがあります。

  • 繰り返し動作プロパティをタイムスパムに設定すると、指定された時間が経過するまでアニメーションが繰り返しループします。または、繰り返したい回数を指定することもできます。

  • これは小数点をサポートしているので、4回半繰り返すことができます。

  • 永遠に繰り返すことができ、アニメーションが最後に到達すると、最初に逆方向に実行する必要があることをアニメーションに伝えることもできます。

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

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

の簡単な例を見てみましょう Key Frame animation

以下に示すのは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>

これがの実装です mouse left ボタンダウンイベント。ユーザーが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(); 
      } 
   } 
}

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

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