MSDN 教學視頻 WPF 13(2D動畫)

文章目錄

• 備忘：

2D動畫

今天主要講2D動畫，講其中的StoryBoard屬性。

Storyboard 是一種為其所包含的時間軸提供目標資訊的容器時間軸。 示範圖板可以包含任意類型的 Timeline，包括其他容器時間軸和動畫。 可以使用 Storyboard 對象將影響各種對象和屬性的時間軸組合成一個時間軸樹，以便於組織和控制複雜的計時行為。

下面我們來做個demo示範。

我們畫個Rectangle,使他能夠旋轉。

代碼：

<Rectangle Name="rectangle1" Width="100" Height="50"  Stroke="Red" Fill="Blue">            <Rectangle.RenderTransform>                <RotateTransform Angle="0" x:Name="rectangle" CenterX="0" CenterY="0"/>            </Rectangle.RenderTransform>            <Rectangle.Triggers>                <EventTrigger RoutedEvent="Page.Loaded" >                    <BeginStoryboard>                        <Storyboard  RepeatBehavior="Forever">                            <DoubleAnimation Storyboard.TargetName="rectangle"                                             Storyboard.TargetProperty="Angle"                                              From="0" To="360" Duration="0:0:5" />                        </Storyboard>                    </BeginStoryboard>                </EventTrigger>            </Rectangle.Triggers>        </Rectangle>

這裡我們給rectangle1一個RenderTransform使他能夠旋轉，這裡設定Angle為0度，以CenterX和CenterY=0為中心點旋轉。

我們要使他旋轉就要給他一個事件，這裡就是Rectangle.Triggers的Page.Loaded。載入時促發。

備忘：

BeginStoryboard 用作正在觸發的 Storyboard 對象的封裝。BeginStoryboard 對象只能包含一個 Storyboard，而不能包含它們的集合。

除了使用 BeginStoryboard 在對象載入時自動啟動示範圖板之外，還可以使用 Storyboard 對象的互動式方法來啟動、暫停、繼續和停止動畫。

RepeatBehavior=Forever 是重複執行這個動作。

Duration是時間。這裡是5秒執行360度。

效果：

旋轉了。

這裡也可以對其顏色啊，寬度啊。多可以變。

下面我們來畫個圓，使它來回走動。

 <Path Fill="Red">            <Path.Data>                <EllipseGeometry x:Name="e1" Center="30,30" RadiusX="20" RadiusY="20">                </EllipseGeometry>            </Path.Data>            <Path.Triggers>                <EventTrigger RoutedEvent="Page.Loaded">                    <BeginStoryboard>                        <Storyboard AutoReverse="True">                            <PointAnimation                                Storyboard.TargetName="e1"                                 Storyboard.TargetProperty="Center"                                From="30,30" To="200,200"                                Duration="0:0:5"                                />                        </Storyboard>                    </BeginStoryboard>                </EventTrigger>            </Path.Triggers>        </Path>

這裡以Center為屬性來回運動。

祝大家聖誕節快樂~~。