Silverlight 2学びながら練習した三小球自由落体

やっとアニメの章が見えてきました.本編は主に物体の移動、変形、グラデーションの移動について練習します.小球自由落体スローミラーの実例を完成して、みんなにレンガをたくさん撮って、くだらないことを言わないで早く練習してください.
XAML Code:

<UserControl x:Class="FallingBall.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    Width="400" Height="300">

    <!--      -->

    <UserControl.Resources>

        <!--  Storyborad-->

        <Storyboard x:Name="fallDown" Storyboard.TargetName="ellipseFall">

            <!--      -->

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)">

                <!--      -->

                <SplineDoubleKeyFrame KeyTime="0:0:5" Value="50"/>

                <!--      -->

                <SplineDoubleKeyFrame KeyTime="0:0:9" Value="100"/>

            </DoubleAnimationUsingKeyFrames>

            <!--      -->

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)">

                <!--      -->

                <SplineDoubleKeyFrame KeyTime="0:0:5" Value="250"/>

                <!--      -->

                <SplineDoubleKeyFrame KeyTime="0:0:6" Value="255"/>

                <!--      -->

                <SplineDoubleKeyFrame KeyTime="0:0:7" Value="250"/>

                <!--      -->

                <SplineDoubleKeyFrame KeyTime="0:0:9" Value="150"/>

            </DoubleAnimationUsingKeyFrames>

            <!--      -->

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height">

                <!--     -->

                <SplineDoubleKeyFrame KeyTime="0:0:5" Value="50"/>

                <!--      -->

                <SplineDoubleKeyFrame KeyTime="0:0:6" Value="45"/>

                <!--      -->

                <SplineDoubleKeyFrame KeyTime="0:0:7" Value="50"/>

            </DoubleAnimationUsingKeyFrames>

            <!--      -->

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width">

                <!--     -->

                <SplineDoubleKeyFrame KeyTime="0:0:5" Value="50"/>

                <!--      -->

                <SplineDoubleKeyFrame KeyTime="0:0:6" Value="55"/>

                <!--      -->

                <SplineDoubleKeyFrame KeyTime="0:0:7" Value="50"/>

            </DoubleAnimationUsingKeyFrames>

            <!--      -->

            <PointAnimationUsingKeyFrames Storyboard.TargetName="ellipseBrush" 

                                          Storyboard.TargetProperty="GradientOrigin">

                <!--      -->

                <LinearPointKeyFrame KeyTime="0:0:5" Value="0.6,0.1"></LinearPointKeyFrame>

                <!--      -->

                <LinearPointKeyFrame KeyTime="0:0:9" Value="0.3,0.1"></LinearPointKeyFrame>

            </PointAnimationUsingKeyFrames>

        </Storyboard>

    </UserControl.Resources>



    <Grid x:Name="LayoutRoot" Background="White">

        <Canvas>

            <!--    -->

            <Ellipse x:Name="ellipseFall" Width="50" Height="50">

                <Ellipse.Fill>

                    <!--          -->

                    <RadialGradientBrush x:Name="ellipseBrush" RadiusX="1" RadiusY="1" GradientOrigin="1,0.5">

                        <GradientStop Color="White" Offset="0"></GradientStop>

                        <GradientStop Color="Blue" Offset="1"></GradientStop>

                    </RadialGradientBrush>

                </Ellipse.Fill>

            </Ellipse>

            <!--     -->

            <Path Stroke="Black" Data="M0,300 L400,300 Z"/>

        </Canvas>

    </Grid>



</UserControl>

C# Code:

namespace FallingBall

{

    public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

            //    

            fallDown.Begin();

        }

    }

}

効果図:

参考自《Pro Silverlight 2 in C#2008》CHAPTER 9■ANIMATION今度はカーマン変形アニメをやる～～