WPF 动画笔记
Demo在这里 https://files.cnblogs.com/xiaokang088/WpfAnimation.zip
- Animation结构
以DoubleAnimation 来看结构，如下：
System.
Object
System.Windows.Threading.
DispatcherObject
System.Windows.
DependencyObject
System.Windows.
Freezable
System.Windows.Media.Animation.
Animatable
System.Windows.Media.Animation.
Timeline
System.Windows.Media.Animation.
AnimationTimeline
System.Windows.Media.Animation. DoubleAnimationBase
System.Windows.Media.Animation.
DoubleAnimation
System.Windows.Media.Animation.
DoubleAnimationUsingKeyFrames
System.Windows.Media.Animation.
DoubleAnimationUsingPath
DoubleAnimtionBase以下有三种动画类型
最常用的是DoubleAnimation，最熟悉的了。
其次是DoubleAnimtionUsingKeyFrames，这个最丰富，他的KeyFrams能够接受三种类型的KeyFrame，分别是离散、线性、样条，后面详述。
最后是DoubleAnimtionUsingPath，这个最有意思，可以沿着一个指定的轨迹来进行动画，最好玩的是MatrixAnimtionUsingPath。
DoubleAnimtionBase 是Double类动画的一个基础类，如果要自定义一个Double动画，可以继承DoubleAnimtionBase来写，如下，其中GetCurrentValueCore和CreateInstanceCore是一定要重写的。
public class TestAnimation : DoubleAnimationBase
{
public static readonly DependencyProperty FromProperty = DependencyProperty.Register("From", typeof(double?), typeof(TestAnimation));
public double? From
{
get { return (double?)GetValue(FromProperty); }
set { SetValue(FromProperty, value); }
}
public static readonly DependencyProperty ToProperty = DependencyProperty.Register("To", typeof(double?), typeof(TestAnimation))
public double? To
{
get { return (double?)GetValue(ToProperty); }
set { SetValue(ToProperty, value); }
}
public static readonly DependencyProperty IntervalProperty = DependencyProperty.Register("Interval", typeof(double?), typeof(TestAnimation))
public double? Interval
{
get { return (double?)GetValue(IntervalProperty); }
set { SetValue(IntervalProperty, value); }
}
protected override double GetCurrentValueCore(double defaultOriginValue, double defaultDestinationValue, AnimationClock animationClock)
{
double returnValue;
double from = 0, delta = 0;
from = From.HasValue ? From.Value : defaultOriginValue;
delta = To.HasValue ? To.Value - from : defaultDestinationValue - from;
returnValue = (int)(animationClock.CurrentProgress.Value * delta / 30) * 30 + from;
if (animationClock.CurrentProgress.Value == 1)
returnValue = from + delta;
return returnValue;
}
protected override Freezable CreateInstanceCore()
{
return new TestAnimation();
}
}
往上看
AnimationTimeline，这个是Animtion的鼻祖了，提供了多个对动画来说很重要的方法，如下：
public AnimationClock CreateClock();
public virtual object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock);
关于CreateClock，据说，用clock的效率会比较高，如下代码：
AnimationClock myClock = myAnimation.CreateClock();
//1.据说这样写效率比较高
myScaleTransform.ApplyAnimationClock(
ScaleTransform.ScaleXProperty, myClock);
myScaleTransform.ApplyAnimationClock(
ScaleTransform.ScaleYProperty, myClock);
//myScaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, myAnimation);
//myScaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, myAnimation);
Timeline，动画进行的基础，这些动画都是基于时间轴进行的，所以提供了很多基础的成员，例如属性：
public double AccelerationRatio { get; set; }
public bool AutoReverse { get; set; }
public TimeSpan? BeginTime { get; set; }
public double DecelerationRatio { get; set; }
public Duration Duration { get; set; }
public FillBehavior FillBehavior { get; set; }
public RepeatBehavior RepeatBehavior { get; set; }
public double SpeedRatio { get; set; }
看例子：
<Storyboard >
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="(Canvas.Left)">
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
<DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="10" KeyTime="0:0:6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
LinearDoubleKeyFrame 线性动画，3秒钟后到left=500，匀速移动到500的位置
DiscreteDoubleKeyFrame 离散动画，接上一个动画，4秒的时候突然蹦到400的位置
SplineDoubleKeyFrame 样条动画，这个最复杂了，6秒后到达10的位置。
若要了解 KeySpline 的工作原理，首先需要了解三次方贝塞尔曲线。 一条三次方贝塞尔曲线由一个起点、一个终点和两个控制点来定义。KeySpline 中的两个坐标定义了这两个控制点。 在描述关键样条时，贝塞尔曲线的起点始终为 0，终点始终为 1，这也就是只定义两个控制点的原因。得到的曲线指定了如何在一个时间段内内插动画；也就是说，该曲线表示动画的目标属性在该时间段内的变化速度。为了更好地了解动画进度与贝塞尔曲线之间的关系，请参见 Key Spline Animation Sample（关键样条动画示例http://msdn.microsoft.com/zh-cn/library/ms771640(VS.85).aspx）。
附件Demo里面也有例子，请仔细看。
另外，KeyTime也是很有讲究的，
<LinearDoubleKeyFrame Value="400" KeyTime="00:00:04" />
为普通的计时方式，00：00：04即为本段动画时间为4秒
<LinearDoubleKeyFrame Value="100" KeyTime="10%" />
10%代表本段动画耗时占全部时间的10%
<LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
所有KeyFrame耗时都是一样的
<LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
所有KeyFrame都是匀速的，个人觉得这个很鸡肋。
详见Demo
3.接上，阐述MatrixAnimationUsingPath
让元素沿着轨迹走，而且DoesRotateWithTangent=True可以控制元素朝着轨迹的方向。
<Button Width="50" Height="50" Canvas.Left="10" Canvas.Top="10" RenderTransformOrigin=".5,.5">
<Button.RenderTransform>
<MatrixTransform x:Name="myMatrix" >
<MatrixTransform.Matrix>
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath Storyboard.TargetName="myMatrix" Storyboard.TargetProperty="Matrix"
Duration="00:00:5" DoesRotateWithTangent="True" >
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathFigure>
<BezierSegment Point1="35,310" Point2="610,35" Point3="610,310" />
</PathFigure>
</PathGeometry>
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
4.关注比较少的属性
By 以往只注意了From、To ，起始值和终止值，By可以获取或设置动画更改其起始值时依据的总量。如果同时设置了 To 和 By 属性，则 To 属性优先，而 By 属性会被忽略。
IsAdditve：获取或设置一个值，该值指示是否应将目标属性的当前值与此动画的起始值相加。如果动画仅设置了其 From、 To 或 By 属性之一，则设置此属性将无效。
IsCumulative 获取或设置动画更改其起始值时依据的总量。如果同时设置了 To 和 By 属性，则 To 属性优先，而 By 属性会被忽略。
5.关于StoryBoard，先看继承结构
System. Object
System.Windows.Threading.
DispatcherObject
System.Windows. DependencyObject
System.Windows.
Freezable
System.Windows.Media.Animation.
Animatable
System.Windows.Media.Animation.
Timeline
System.Windows.Media.Animation.
TimelineGroup
System.Windows.Media.Animation. ParallelTimeline
System.Windows.Media.Animation.
Storyboard
Storyboard 继承与ParallelTimeline，那么ParallelTimeline是个什么东西呢？看例子：
<Canvas.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="button1">
<BeginStoryboard>
<Storyboard>
<!-- "ParallelTimelines are..." fades into view. -->
<DoubleAnimation Storyboard.TargetName="FirstTextBlock"
Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />
<!-- "ParallelTimelines are..." skews to the left. -->
<DoubleAnimation Storyboard.TargetName="FirstTextBlockSkew"
Storyboard.TargetProperty="AngleX" Duration="0:0:2" BeginTime="0:0:2" From="0" To="45" />
<!-- This ParallelTimeline contains all the animations for the TextBlock with the text
"Useful" in it. This ParallelTimeline begins 4 seconds after the Storyboard timeline begins and all child
animations begin relative to this parent timeline. -->
<ParallelTimeline BeginTime="0:0:4">
<!-- "Useful" fades into view. -->
<DoubleAnimation Storyboard.TargetName="SecondTextBlock"
Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />
<!-- "Useful" slides in from the right. -->
<DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
Storyboard.TargetProperty="AngleX" Duration="0:0:2" From="90" To="180" />
<!-- "Useful" skews to the right. -->
<DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
Storyboard.TargetProperty="AngleX" BeginTime="0:0:3" Duration="0:0:0.2" From="0" To="-60" />
<!-- "Useful" Gets taller. -->
<DoubleAnimation Storyboard.TargetName="SecondTextBlockScale"
Storyboard.TargetProperty="ScaleY" BeginTime="0:0:3" Duration="0:0:0.2" From="1" To="3" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
ParallelTimeline 把几个动画放到一起，可以控制开始时间。
StoryBoard在继承了ParallelTimeline后，增加了一个常用的操作，例如Begin/Stop/Pause等操作和TargetProperty等属性
