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"
/>- この場合、そのプロパティをどのように変更したいかを言います。不透明度を値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>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への単純なアニメーションは少し単純すぎます。 たとえば、地面から跳ね返るボールをアニメーション化します。 これは単純なポイントツーポイントの移動ではありません。 ボールは落下し、徐々にスピードを上げてから、下に当たると方向を逆にします。 旅行の頂点に戻ると、再び減速します。
- キーフレームアニメーション*の簡単な例を見てみましょう。
以下に、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 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();
}
}
}上記のコードをコンパイルして実行すると、次の出力が表示されます。
Webページをクリックすると、ボールが動き始めます。
