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为属性来回运动。

祝大家圣诞节快乐~~。