Silverlight動畫制作之From/To/By基本動畫 From/To/By基本動畫其中包含了三個最重要的屬性：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，表示動畫播放完畢后會自動從后向前反向播放，并且是無限制的播放。

?

轉載于:https://blog.51cto.com/wzk89/441585

總結

以上是生活随笔為你收集整理的Silverlight动画制作之From/To/By基本动画的全部內容，希望文章能夠幫你解決所遇到的問題。

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