​​​​​​​Storyboard_故事板

1、先创建一个正方形和一个椭圆

 

2、然后创建事件触发器 ，在页面加载后触发事件 ， 当创建事件触发器时，需要指定开始触发器的路由事件和路由触发器执行的一个或多个动作。

 

3、对于动画，最常用的动作是BeginStoryboard，该动作相当于调用BeginStoryboard()方法 ，所以，在事件触发器后加上一个BeginStoryboard作为开始的标志；接下来就是故事板，再加上需要变化的Animation，就是一个完整的动画了！

 

4、Animation提供一种简单的“渐变”动画，我们为一个Animation指定开始值和一个结束值，并指定由开始值到达结束值所需的时间，便可形成一个简单的动画。

 

5、Animation有三种，分别是DoubleAnimation、ColorAnimation、PointAnimation，分别用于数值、颜色、路径。现在我们就分别用这三种Animation加在已经创建好的故事板上

 

DoubleAnimation： <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:1"/>

<DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Height" From="100" To="200" Duration="0:0:1"/>

上面变化的是长和宽，所以用DoubleAnimation，Storyboard.TargetName是目标属性 ，From属性是元素的开始值，To属性是元素属性的结束值，Duration是整个动画执行的时间

 

ColorAnimation：<ColorAnimation Storyboard.TargetName="MySolidColorBrush" Storyboard.TargetProperty="Color" From="Blue" To="Red" Duration="0:0:1"/>

上面变化的是颜色，所以用ColorAnimation

 

PointAnimation：  <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="AnimatedEllipse" From="50 , 50" To="100 , 100" RepeatBehavior="Forever" Duration="0:0:2"/>

上面变化的是位置，所以用PointAnimation

 

效果如下：

 

全部代码：

<StackPanel Margin="20">

        <Rectangle Name="MyRectangle" Width="100" Height="100" >

            <Rectangle.Fill>

                <SolidColorBrush x:Name="MySolidColorBrush" Color="Blue"/>

            </Rectangle.Fill>  

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Page.Loaded">

                    <BeginStoryboard>

                        <Storyboard RepeatBehavior="Forever" AutoReverse="True">

                            <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:1"/>

                            <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Height" From="100" To="200" Duration="0:0:1"/>

                            <ColorAnimation Storyboard.TargetName="MySolidColorBrush" Storyboard.TargetProperty="Color" From="Blue" To="Red" Duration="0:0:1"/>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

        <Canvas>

            <Path Fill="Maroon" Margin="5 , 5 , 5 , 5">

                <Path.Data>

                    <EllipseGeometry x:Name="AnimatedEllipse" Center="20 , 40" RadiusX="15" RadiusY="30"/>

                </Path.Data>

                <Path.Triggers>

                    <EventTrigger RoutedEvent="Path.Loaded">

                        <BeginStoryboard Name="BeginStoryboard">

                            <Storyboard>

                                <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="AnimatedEllipse" From="50 , 50" To="100 , 100" RepeatBehavior="Forever" Duration="0:0:2"/>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger>

                </Path.Triggers>

            </Path>

        </Canvas>

    </StackPanel>