Event&Trigger之三——Animation
Implementing Animation
动画（Animation）是WPF的一个特性。可根据时间变化设置不同属性，例如：视图的变化，颜色的逐渐变化，随时间改变属性。其中Storyboard对象能够控制动画的反馈。
1.1. Using Animations
Animation类是一个巨大的类群。有42个类群,从下面namespace中出来
using System.Windows.Media.Animation namespace；
最后可以归为3个基础:
l Linear animations(Overview);
线形的属性变化，命名规范为<TypeName>Animation，eg :DoubleAnimation
l key frame–based animations(Key-Frame);
从一个起点到多个点（waypoints）进行属性变化，命名规范为<TypeName>AnimationUsingKeyFrames，其中<TypeName>为动态变化的类型，eg: StringAnimationUsingKeyFrames
l path-based animations(Path-Based);
使用预设的PathGeometry 对象进行属性变化，通常用于很复杂的视图属性变化,命名规范：<TypeName>AnimationUsingPath eg:PointAnimationUsingPath, DoubleAnimationUsingPath
3 types: PointAnimationUsingPath, DoubleAnimationUsingPath, and MatrixAnimationUsingPath
see EasingFunction (from practice question that tripped me up)
Important properties of the Animation and Storyboard class
l Note that if you create an animation in code, you need to execute the FrameworkContentElement.RegisterName method , to register the element within the namespace, as shown in this example.
See this page for examples of different possible values for the RepeatBehavior property.
1.2. Important Properties of Animations
尽管有很多的Animation类，但是很多类都是有共同的属性的，特别是大多数amimation都靠Storyboard来组织animation对象。
|
属性 |
描述 |
|
AccelerationRatio |
Gets or sets a value specifying the percentage of the Duration property of the animation that is spent accelerating the passage of time from zero to its maximum rate |
|
AutoReverse |
Gets or sets a value that indicates whether the animation plays in reverse after it completes a forward iteration |
|
BeginTime |
Gets or sets the time at which the animation should begin, relative to the time it is executed. eg, an animation with BeginTime set to 0:0:5 exhibits a 5-second delay before beginning. |
|
DecelerationRatio |
Gets or sets a value specifying the percentage of the duration of the animation spent decelerating the passage of time from its maximum rate to zero |
|
Duration |
Gets or sets the length of time for which the animation plays |
|
FillBehavior |
Gets or sets a value that indicates how the animation behaves after it has completed |
|
RepeatBehavior |
Gets or sets a value that indicates how the animation repeats |
|
SpeedRatio |
Gets or sets the rate at which the animation progresses relative to its parent |
l LineAnimation的一些重要参数
|
属性 |
描述 |
|
From |
Gets or sets the starting value of the animation. If omitted, the animation uses the current property value. |
|
To |
Gets or sets the ending value of the animation |
|
By |
Gets or sets the amount by which to increase the value of the target property over the course of the animation. If both the To and By properties are set, the value of the By property is ignored. |
例子：
<DoubleAnimation Duration="0:0:10" From="1" To="200" />
Animation控件一定要和StoryBoard一起用。
1.3. Storyboard Objects
Storyboard overview是组织了Animation，Storyboard类内部有一个Children集合，能够控制timeline集合，来达到控制动画的目的。
<Storyboard>
<DoubleAnimation Duration="0:0:10" From="1" To="200" />
</Storyboard>
1.3.1. USING A STORYBOARD TO CONTROL ANIMATIONS
l 如何使用Storyboard来控制动画？使用TatgetName和TargetProperty参数
<Storyboard TargetName="Button1" TargetProperty="Height">
<DoubleAnimation Duration="0:0:10" From="1" To="200" />
</Storyboard>
l 可以这么写，把TargetName和TargetProperty作为attached property：
<Storyboard>
<DoubleAnimation Duration="0:0:10" From="1" To="200"
Storyboard.TargetName="Button1" Storyboard.TargetProperty="Height" />
</Storyboard>
l Storyboard中可以有多个Animation，所以这种写法更常见，
1.3.2. SIMULTANEOUS ANIMATIONS
在Storyboard中的子元素是同时开始的，所以可以设置成为同时的动态变化
<Storyboard>
<DoubleAnimation Duration="0:0:10" From="1" To="200"
Storyboard.TargetName="Button1"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:10" From="1" To="100"
Storyboard.TargetName="Button1"
Storyboard.TargetProperty="Widtht" />
</Storyboard>
1.4. Using Animations with Triggers
l 在什么时候使用Animation? 在程序中，需要制定什么时候Animation才开始，则可以触发Animation：先用EventTrigger中的RoutedEvent定义click事件；然后使用EventTrigger.Actions类；Action类控制BeginStoryboard元素，里面才是Storyboard overview：
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:5"
Storyboard.TargetProperty="Height" To="200" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
l 在Action类中控制Animation的参数
|
属性 |
描述 |
|
Begins the child Storyboard object | |
|
Pauses the playback of an indicated storyboard at the current playback position | |
|
Resumes playback of an indicated storyboard | |
|
Fast-forwards to a specified position in a target storyboard | |
|
Sets the speed ratio of the specified storyboard | |
|
Moves the specified storyboard to the end of its timeline | |
|
Stops playback of the specified storyboard and returns the animation to the starting position |
Examples:
l A StopStoryboard action that stops the BeginStoryBoard object named “stb1”:
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Name="stb1">
<Storyboard>
<DoubleAnimation Duration="0:0:5"
Storyboard.TargetProperty="Height" To="200" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<StopStoryboard BeginStoryboardName="stb1" />
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
l 作用于同一个Storyboard的东西，都需要写在一个Trigger里面，写在不同trigger里，可能有些对于这个Storyboard没有用。
l 这个例子讲了SetStoryboardSpeedRatio，速率2倍的变化
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Name="stb1">
<Storyboard>
<DoubleAnimation Duration="0:0:5"
Storyboard.TargetProperty="Height" To="200" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<SetStoryboardSpeedRatio BeginStoryboardName="stb1" SpeedRatio="2" />
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
l 这个例子讲了SeekStoryboard 例其中Origin属性一般填写“BeginTime”和“Duration”，
beginTime指的offset参数和storyboard的beginning相关；Duration指的是offset参数和storyboard的Duration相关；offset参数指的是开始的偏移量，一般指timeline
<SeekStoryboard BeginStoryboardName="stb1" Origin="BeginTime"
Offset="0:0:5" />
l Action been hosted in EventTrigger对象，可以在Trigger,MultiTrigger, DataTrigger, and MultiDataTrigger 对象托管两个Action集合： EnterActions&ExitActions 集合；
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Name="stb1">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="FontSize"
To="20" Duration="0:0:.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="stb1" />
</Trigger.ExitActions>
</Trigger>
1.5. Managing the Playback Time Line
在Animation类和Storyboard类中都有属性对播放时间线做精确的管理。使用playback时注意其作用范围，如果是在整个storyboard设置，则作用在storyboard中，如果作用在某个属性中，则只能作用这个属性。
System.Windows.Media.Animation.Timeline
AccelerationRatio and DecelerationRatio
l ACCELERATIONRATIO AND DECELERATIONRATIO
表示以标准速度多少百分比的速度，进行加速或者减速放映。例子是指以20%的速度加速放映。
<DoubleAnimation Duration="0:0:5" AccelerationRatio="0.2"
Storyboard.TargetProperty="Height" To="200" />
l AUTOREVERSE
表示到底了之后，是否会自动反转，默认值为false，设置为true则表示可以自动反转。
<DoubleAnimation Duration="0:0:5" AutoReverse="True"
Storyboard.TargetProperty="Height" To="200" />
l FILLBEHAVIOR
表示到动画完成之后，如何操作，如果是HoldEnd，则表示动画完成之后，取最后一个值，如果是Stop，则表示动画完成之后，动画停止，并且回到最初的timeline.
<DoubleAnimation Duration="0:0:5" FillBehavior="Stop"
Storyboard.TargetProperty="Height" To="200" />
l REPEATBEHAVIOR
表示是否或者如何重复。参数Forever,nx(2x),Duration; Forever表示动画一直重复；nx表示重复的数字；Duration表示总共的字数；
<DoubleAnimation Duration="0:0:5" RepeatBehavior="Forever"
Storyboard.TargetProperty="Height" To="200" />
<DoubleAnimation Duration="0:0:5" RepeatBehavior="3x"
Storyboard.TargetProperty="Height" To="200" />
<DoubleAnimation Duration="0:0:5" RepeatBehavior="0:1:0"
Storyboard.TargetProperty="Height" To="200" />
l SPEEDRATIO
表示加速和减慢速度；
<DoubleAnimation Duration="0:0:5" SpeedRatio="0.5"
Storyboard.TargetProperty="Height" To="200" />
1.6. Animating Non-Double Types
例如ColorAnimation标签；
<Button Height="23" Width="100" Name="Button1">
<Button.Background>
<SolidColorBrush x:Name="myBrush" />
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="myBrush"
Storyboard.TargetProperty="Color" From="Red" To="LimeGreen"
Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
1.6.1. ANIMATION WITH KEY FRAMES
Key frames are waypoints in an animation；
Key frames把动画分成多个短segment,每个key frame都可以有定义自己的Value参数和Key参数；
每个数据类型支持线性动画的一定支持key-frame animation,有些没有线性动画的，却支持key-frame animation.
命名 <TypeName>AnimationUsingKeyFrames，其中<TypeName>为动态变化的类型，有3种类型的key frames动画
l Linear<TargetType>KeyFrame. These key frames provide points in an animation that are interpolated between in a linear fashion.
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height">
<LinearDoubleKeyFrame Value="10" KeyTime="0:0:1" />
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="30" KeyTime="0:0:4"/>
</DoubleAnimationUsingKeyFrames>
高度，1秒的时候变成10，2秒时候变成100,4秒的时候比办成30；
1.6.2. DISCRETE KEY FRAMES
l Discrete<TargetType>KeyFrame. You can use discrete key frame objects to make discrete changes in the value of an animated property
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteStringKeyFrame Value="Soup" KeyTime="0:0:0" />
<DiscreteStringKeyFrame Value="Sous" KeyTime="0:0:1" />
<DiscreteStringKeyFrame Value="Sots" KeyTime="0:0:2" />
<DiscreteStringKeyFrame Value="Nots" KeyTime="0:0:3" />
<DiscreteStringKeyFrame Value="Nuts" KeyTime="0:0:4" />
</StringAnimationUsingKeyFrames>
1.6.3. SPLINE KEY FRAMES
是一个曲线能让你能够做复杂的动画，在两个控制点中间起作用。曲线的开始点和结束点永远是（0,0）和（1,1）；
<SplineDoubleKeyFrame Value="300" KeyTime="0:0:6" KeySpline="0.1,0.8 0.6,0.6" />
可定义两个点（0.1,0.8），（0.6,0.6）来定义曲线的开始和结束
1.6.4. USING MULTIPLE TYPES OF KEY FRAMES IN AN ANIMATION
几种 key frame? 各有什么作用？
1.7. CREATING AND STARTING ANIMATIONS IN CODE
l 上面讲了在XAML中使用animation,也可以再c#中使用animation；
System.Windows.Media.Animation.DoubleAnimation aAnimation = new
System.Windows.Media.Animation.DoubleAnimation(); //创建实例
aAnimation.From = 20; //设置参数
aAnimation.To = 300;
aAnimation.Duration = new Duration(new TimeSpan(0, 0, 5));
aAnimation.FillBehavior = Animation.FillBehavior.Stop; // 设置填充动作
l 在c#用函数BeginAnimation来使用；
button1.BeginAnimation(Button.HeightProperty, aAnimation);
浙公网安备 33010602011771号