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();

        }
    }
}