原文:
Expression Design與Blend制作滾動的小球動畫教程一，開發工具
Microsoft Expression Design & Blend 4.0 （3.0亦可）。
這兩款軟體可以在微軟Expression官方網站上下載下傳：
http://expression.microsoft.com/en-us/default.aspx二，建立解決方案
在Blend中建立解決方案，菜單欄->File->New Project 輸入解決方案名稱為WPFAnimations，如下：
建立後視圖如下：
三，建立小球控件
選中WPFAnimations項目，右擊在ContextMenu中選擇New Item，輸入名稱Ball
從工具欄拖入一個Ellipse，取名為EllipseBall，調整其效果如下：
Ball.xaml的内容如下：
<UserControl
xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="
http://schemas.microsoft.com/winfx/2006/xamlxmlns:d="
http://schemas.microsoft.com/expression/blend/2008xmlns:mc="
http://schemas.openxmlformats.org/markup-compatibility/2006mc:Ignorable="d"
x:Class="WPFAnimations.Ball"
x:Name="UserControl"
d:DesignWidth="200" d:DesignHeight="200">
<Grid x:Name="LayoutRoot">
<Ellipse x:Name="EllipseBall" Height="200" Margin="0,0" Stroke="Black" VerticalAlignment="Top">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF1A1747" Offset="0.99"/>
<GradientStop Color="#FF4B5DFB"/>
<GradientStop Color="#FF161FAD" Offset="0.604"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</UserControl>
四，建立整體場景添加小球到MainWindow.xaml
打開MainWindow.xaml檔案，調整其背景，添加Canvas，以及相關的元素，并将小球拖拽至其中。
注意：添加使用者控件可以通過生成項目後在Assets下面添加：
最終效果如下：
MainWindow.xaml的内容如下：
<Window xmlns="
" xmlns:x="
" xmlns:local="clr-namespace:WPFAnimations"
x:Class="WPFAnimations.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="800" Height="480">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FF3594ED" Offset="1"/>
<GradientStop Color="White"/>
</LinearGradientBrush>
</Grid.Background>
<Canvas x:Name="CanvasMain" Margin="50,20,20,20">
<local:Ball Canvas.Left="-23.333" Canvas.Top="196.667" Width="200" Height="200" RenderTransformOrigin="0.5,0.5">
<local:Ball.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.4" ScaleY="0.4"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</local:Ball.RenderTransform>
</local:Ball>
</Canvas>
</Window>
五，添加動畫效果
用鋼筆工具在Canvas中添加如下如所示的路徑：
路徑的XML為
<Path Data="M70.5,210.5 C175.5,143 181,136.5 244,136.5 307,136.5 319,189 331,207 343,225 347.5,298.5 347.5,298.5 L491.5,340.5 C491.5,340.5 520,391.5 551.5,325.5 583,259.5 622,359.99974 610,244.49988 598,129.00001 614.50012,179.99995 595.00012,135 575.50011,90.000054 664.90289,84.724203 664.90289,84.724203 L489.72622,50.377374 462.77596,162.37791 C462.77596,162.37791 570.57699,278.85847 462.77596,207.17812 354.97494,135.49778 347.48875,72.77748 347.48875,72.77748 L170.81485,65.310778 70.5,78.750842 45.046979,116.08435" Height="310.3" Canvas.Left="45" Stretch="Fill" Canvas.Top="50" Width="621"/>
如果你足夠熟悉，這裡的路徑資料也可以直接通過XML建構或者通過自己編寫路徑資料，具體參考
http://msdn.microsoft.com/en-us/library/ms752293.aspx。
在菜單欄将工作區切換為Animation，如下：
選中Ball對象，在Triggers頁籤中點選Events按鈕，添加
單擊+event按鈕後，設定事件為窗體Window加載後Loaded，單擊+按鈕添加StoryBoard：
在彈出對話框，點選okay按鈕，建立Storyboard後，修改其名稱為BeginRollBall
如下圖：
在0秒與12秒之間為小球添加路徑動畫，最終MainWindow.xaml的代碼如下：
<Window.Resources>
<PathGeometry x:Key="MyPath" Figures="M70.5,210.5 C175.5,143 181,136.5 244,136.5 307,136.5 319,189 331,207 343,225 347.5,298.5 347.5,298.5 L491.5,340.5 C491.5,340.5 520,391.5 551.5,325.5 583,259.5 622,359.99974 610,244.49988 598,129.00001 614.50012,179.99995 595.00012,135 575.50011,90.000054 664.90289,84.724203 664.90289,84.724203 L489.72622,50.377374 462.77596,162.37791 C462.77596,162.37791 570.57699,278.85847 462.77596,207.17812 354.97494,135.49778 347.48875,72.77748 347.48875,72.77748 L170.81485,65.310778 70.5,78.750842 45.046979,116.08435"/>
<Storyboard x:Key="BeginRollBall" RepeatBehavior="Forever">
<DoubleAnimationUsingPath Duration="0:0:12" PathGeometry="{StaticResource MyPath}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X" Storyboard.TargetName="ball">
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath Duration="0:0:12" PathGeometry="{StaticResource MyPath}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y" Storyboard.TargetName="ball">
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="BeginRollBall_BeginStoryboard" Storyboard="{StaticResource BeginRollBall}"/>
</EventTrigger>
</Window.Triggers>
<local:Ball x:Name="ball" Canvas.Left="10.25" Canvas.Top="95.25" Width="200" Height="200" RenderTransformOrigin="0.5,0.5">
<Path Data="M70.5,210.5 C175.5,143 181,136.5 244,136.5 307,136.5 319,189 331,207 343,225 347.5,298.5 347.5,298.5 L491.5,340.5 C491.5,340.5 520,391.5 551.5,325.5 583,259.5 622,359.99974 610,244.49988 598,129.00001 614.50012,179.99995 595.00012,135 575.50011,90.000054 664.90289,84.724203 664.90289,84.724203 L489.72622,50.377374 462.77596,162.37791 C462.77596,162.37791 570.57699,278.85847 462.77596,207.17812 354.97494,135.49778 347.48875,72.77748 347.48875,72.77748 L170.81485,65.310778 70.5,78.750842 45.046979,116.08435" Height="310.3" Canvas.Left="45" Stretch="Fill" Canvas.Top="50" Width="621"/>
運作我們可以看到效果：
由于剛才添加了Canvas導緻了小球移動的路徑并不是按照鋼筆所畫路徑而是有所偏移。
六，總結
在整個執行個體中由于對路徑的資料處理不是很好 是以導緻最終的效果和路徑有所偏移，大家可以針對自己的情況作相應的調整。如果對WPF足夠的熟悉所有的代碼都可以自己的編寫，所有的效果動畫也都都可以通過code-behind中用c#或者VB.NET等直接編寫代碼來實作。
如需要本示例源碼請回複你的郵箱位址或者發消息~~~
原諒位址：
http://kosmisch.net/archive/2010/08/09/befecb03aea741e108fa9301.aspx