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ページをクリックすると、ボールが動き始めます。
