终于看到动画章节了,本篇主要针对物体移动、变形和渐变移动进行练习。
完成小球自由落体慢镜实例,请大家多多拍砖,废话少说快快操练。
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
下次要搞一个汽车人变形动画~~