【IT168技术文档】终于看到动画章节了，本篇主要针对物体移动、变形和渐变移动进行练习。
完成小球自由落体慢镜实例，请大家多多拍砖，废话少说快快操练。
XAML Code:
<UserControl x:Class="SilverlightApplication1.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 SilverlightApplication1
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
//开始动画
fallDown.Begin();
}
}
}
