基本動畫其中包含了三個最重要的屬性：From；To；By。

From指的是物件目標屬性的起始值

To指的是物件目標屬性的結束值

By指的是結束狀態相對於起始狀態的偏移量。

這裡我們需要注意的是動畫物件不能同時包括To和By兩個屬性，否則編譯器會忽略掉By屬性的作用。

Silverlight為From/To/By基本動畫提供了3個Timeline的派生類：

1）DoubleAnimation：指定時間內，使用線性內插屬性處理屬性值為Double的動畫。

2）ColorAnimation：指定時間內，使用線性內插屬性處理屬性值為Color的動畫。

3）PointAnimation：指定時間內，使用線性內插屬性處理屬性值為Point的動畫。

在使用方法上這3中動畫沒有太大的區別，唯一的不同點就是我們怎麼樣給From，To，By屬性進行賦值。

下面我們通過一個小的Demo演示一下From/To/By基本動畫。

演示效果如圖：

剛開始時的動畫：

結束時的動畫：

我們可以從兩張圖很明顯看到這個圓形從半徑，顏色，位置上都發生了變化。下面我們通過程式碼看一下這樣的效果是如何實現的。

<Canvas x:Name="LayoutRoot"Background="White"> <Path x:Name="PathAnimate"> <Path.Fill> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="Black" Offset="0"/> <GradientStop x:Name="BrushAnimate" Offset="0.5"/> <GradientStop Color="Chocolate" Offset="1"/> </RadialGradientBrush> </Path.Fill> <Path.Data> <EllipseGeometry x:Name="EllipseGeometryAnimate"/> </Path.Data> <Path.Triggers> <EventTrigger RoutedEvent="Path.Loaded"> <BeginStoryboard> <Storyboard> <!--控制圓形的水平半徑--> <DoubleAnimation Storyboard.TargetName="EllipseGeometryAnimate" Storyboard.TargetProperty="RadiusX" From="25" To="80" Duration="0:0:4" RepeatBehavior="Forever" AutoReverse="True"/> <!--控制圓形的垂直半徑--> <DoubleAnimation Storyboard.TargetName="EllipseGeometryAnimate" Storyboard.TargetProperty="RadiusY" From="25" To="80" Duration="0:0:4" RepeatBehavior="Forever" AutoReverse="True"/> <!--控制圓形的填充顏色--> <ColorAnimation Storyboard.TargetName="BrushAnimate" Storyboard.TargetProperty="Color" From="Black" To="Chocolate" Duration="0:0:4" RepeatBehavior="Forever" AutoReverse="True" SpeedRatio="2"/> <!--控制圓形的中心點--> <PointAnimation Storyboard.TargetName="EllipseGeometryAnimate" Storyboard.TargetProperty="Center" From="25,25" To="150,150" Duration="0:0:4" RepeatBehavior="Forever" AutoReverse="True"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Path.Triggers> </Path> </Canvas>

下面我們來說一下這段程式碼的基本意思：

1）首先我們聲明瞭3個物件，分別是路徑圖形，放射漸變畫刷和橢圓幾何圖形。這些物件我們只進行了命名，相關屬性的設定需要我們在接下來的程式碼中去實現。

2）接下來我們宣告動畫播放的觸發器事件：Path.Loaded；

3）然後我們向情節串聯圖版Storyboard中新增動畫元素。在我們這個Demo中首先添加了兩個DoubleAnimation物件，目的是為了改變橢圓幾何圖形的水平半徑和垂直半徑，所以我們設定的目標屬性分別是RadiusX和RadiusY。我們還聲明瞭ColorAnimation物件用來改變放射漸變畫刷停止點的顏色，除了我們宣告From和To之外，還設定了SpeedRatio的值為2，說明其他動畫執行一次，顏色卻已經變換了2次。最後聲明瞭PointAnimation物件，用於控制橢圓幾何圖形的中心Center屬性。Center屬性值型別為Point型別，所以我們宣告From和To的時候需要按照座標形式。

4）最後需要注意的是我們還聲明瞭RepeatBehavior和AutoReverse兩個屬性，RepeatBehavior屬性值為Forever，AutoReverse屬性值為True，表示動畫播放完畢後會自動從後向前反向播放，並且是無限制的播放。