Silverlight アニメーション
今回は長方形を回したり、平行移動させたりしました。
こんな感じ
簡単なアニメーションをさせているだけなのにソースが結構難しくて若干長い。
もっと、簡単に短く書く方法があるのかな?
ソース
<UserControl x:Class="SilverlightApplication7.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Loaded="onLoaded"><!--読み込みが完了したらonLoad関数を実行--> <UserControl.Resources> <!--Storyboard内に一連のアニメーションを定義する--> <Storyboard x:Name="Storyboard1" AutoReverse="True" RepeatBehavior="Forever"> <!--X軸方向回転のアニメーションを設定--> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rect_Translate" Storyboard.TargetProperty="(UIElement.Projection). (PlaneProjection.RotationX)"> <!--RotationXをValueの値まで動かす。 KeySplineはイージングの設定--> <SplineDoubleKeyFrame KeyTime="00:00:03" Value="360" KeySpline="0.5,0,0.5,1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rect_Translate" Storyboard.TargetProperty="(UIElement.Projection). (PlaneProjection.RotationY)"> <SplineDoubleKeyFrame KeyTime="00:00:03" Value="500" KeySpline="0.5,0,0.5,1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rect_Translate" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> <SplineDoubleKeyFrame KeyTime="00:00:03" Value="200" KeySpline="0.5,0,0.5,1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rect_Translate" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <SplineDoubleKeyFrame KeyTime="00:00:03" Value="100" KeySpline="0.5,0,0.5,1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Rectangle Margin="97,106,238,159" Fill="#FFA14040" Stroke="#FF000000" x:Name="Rect_Translate" RenderTransformOrigin="0.5,0.5"> <!--上でアニメーションの設定をするために中身が空だけど書いておく--> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.Projection> <PlaneProjection/> </Rectangle.Projection> </Rectangle> </Grid> </UserControl>
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightApplication7 { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } private void onLoaded(object sender, RoutedEventArgs e) { //アニメーションスタート this.Storyboard1.Begin(); } } }