Written in WPF animation

Written in WPF animation

开发工具与关键技术：Visual Studio 2015、WPF
作者：黄元进
撰写时间：2019年5月5日

In WPF we use your storyboard (storyboard) way to write animation, and uses Animation ( "gradient" animation), we specify the width of the rectangle changes from 100 to 200, the time required for 1 second, an animation effect can be achieved , we define a code DoubleAnimation, and specify the start and by the time it reaches the end value of the desired value of its start and end values. With XAML code to achieve:

<Window x:Class="XAML高级教程.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:XAML高级教程"
Title="MainWindow" Height="350"Width="525">
<!--渐变动画-->
<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="500"Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>

Note that we use here is DoubleAnimation, because we want to change that value. So if we want to change the color is not to use ColorAnimation of it, yes, in fact, there are those outside the PointAnimation and so on, and you can achieve IAnimatable interface to implement a custom version of Animation. With regard to these you can see System.Windows.MediaAniamtion name space
but it is worth noting that not every property will be able to use Animation, it must meet the following conditions:
1. it must be a Property Dependency
2, it must be in a class inherits from DependencyObject, IAnimatable must implement the interface.
3, must have the same type Animation type (i.e. Color type used ColorAniamtion, Point type using PointAnimation etc.)

A simple Animation defines a simple animation, it is easy to think that if a number of Animation at the same time acting on an object, then the object is not complex animation can show you, right, that's Storyboard
Storyboard can be seen as animation container, it contains a number of simple animation to finish a complicated animation.
Reference the following code:

<Window x:Class="XAML高级教程.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:XAML高级教程"
Title="MainWindow" Height="350"Width="525">
<!--变化矩形的颜色-->
<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>
<StoryboardRepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Width"
From="100" To="700"Duration="0:0:0.1" />
<ColorAnimation
Storyboard.TargetName="MySolidColorBrush"
Storyboard.TargetProperty="Color"
From="YellowGreen" To="NavajoWhite"Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>

Here we define the width of the Storyboard to change DoubleAnimation rectangular, and defines the color of the rectangle to change ColorAnimation.