WPF之动画

                             WPF之动画

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： Visual Studio 2015 * SQL Server

作者：叶

撰写时间：2019年01月01日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

动画：动画无疑是WPF中最吸引人的特色之一，其可以像Flash一样平滑的播放并程序逻辑进行很好的交互。在WPF中我们采用Storyboard（故事板）的方式编写动画。

   故事板：1、Storyboard（故事板）是动画的基本单元。

1. Storyboard控制动画的播放、暂停、停止等操作。
2. 需要指定TargetName和TargetProperty属性
3. 动画类型声明过后，需要使用EventTrigger（事件触发器）触发。

 

首先先定义一个简单的故事板：如果是所要变化的是数值，那么我们使用DoubleAnimation ，如果变化的是颜色，那么我们要使用的是ColorAnimation，我们为Animation指定开始值和一个结束值，并指定由开始值到达结束值所需的时间，即可形成一个简单的动画。如下：如指定长方形的宽度由100变化到200，所需时间为0.5秒，这里用事件触发器EventTrigger，再给个点击事件当页面一加载就触发。

              <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:5"/>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

    </StackPanel>

               

 

简单的动画只需定义一个DoubleAnimation，而如果想实现多个动画同时变化，把Storyboard看做是Aniamtion的容器，它就可以包含多个简单DoubleAnimation和ColorAnimation 动画，但值得注意的是并非每个属性都能够使用Animation，它必须满足以下条件：

1. 它必须是Dependency Property
2. 它所在类必须继承于DependencyObject，必须实现了IAnimatable接口。
3. 必须有类型一致的Animation Type（即Color 类型使用 ColorAniamtion，Point类型使用PointAnimation等）

例：

<StackPanel Margin="15">

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

            <Rectangle.Fill>

                <!--<SolidColorBrush x:Name="MySolidColorBrush" Color="YellowGreen"/>-->

                <ImageBrush ImageSource="176110115.jpeg"/>

            </Rectangle.Fill>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Page.Loaded">

                    <BeginStoryboard>

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

                            <DoubleAnimation Storyboard.TargetName="MyRectangle"

                                                 Storyboard.TargetProperty="Width"

                                                 From="200" To="300" Duration="0:0:5"/>

                            <DoubleAnimation Storyboard.TargetName="MyRectangle"

                                                 Storyboard.TargetProperty="Height"

                                                 From="200" To="300" Duration="0:0:4"/>

                            <DoubleAnimation Storyboard.TargetName="MyRectangle"

                                                 Storyboard.TargetProperty="Opacity"

                                                  To="0.5" Duration="0:0:0.3"/>

                            <!--<ColorAnimation Storyboard.TargetName="MySolidColorBrush"

                                                 Storyboard.TargetProperty="Color" From="YellowGreen" To="Pink" Duration="0:0:5"/>-->

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

    </StackPanel>

这里我定义了三个DoubleAnimation动画，一个定义它的宽度，当时间到0.05秒时，使它由宽200变为300，第二个DoubleAnimation动画，定义了它的高度，当时间到0.04时，使它由200变为300，最后一个定义它的透明度，当时间为0.03秒时，使它由不透明变为半透明