Silverlight2 边学边练 之三 小球自由落体

终于看到动画章节了，本篇主要针对物体移动、变形和渐变移动进行练习。
完成小球自由落体慢镜实例，请大家多多拍砖，废话少说快快操练。

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 Silverlight2 in C# 2008》CHAPTER 9 ■ ANIMATION
下次要搞一个汽车人变形动画～～