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
下次要搞一个汽车人变形动画～～