終于看到動畫章節了，本篇主要針對物體移動、變形和漸變移動進行練習。
完成小球自由落體慢鏡實例，請大家多多拍磚，廢話少說快快操練。

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
下次要搞一個汽車人變形動畫～～

轉載于:https://blog.51cto.com/186067/1280744

總結

以上是生活随笔為你收集整理的Silverlight2 边学边练 之三 小球自由落体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。