WPF animation notes

Demo http://files.cnblogs.com/xiaokang088/WpfAnimation.zip here

1. Animation Structure

The structure shown in doubleanimation is as follows:

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 has three animation types:

Doubleanimation is the most common one.

The second is doubleanimtionusingkeyframes, which is the most abundant. Its keyframs can accept three types of keyframes: discrete, linear, and spline.

The last is doubleanimtionusingpath, which is the most interesting. It can be animated along a specified track. The most interesting thing is matrixanimtionusingpath.

Doubleanimtionbase is a basic class of double animation. If you want to customize a double animation, You can inherit doubleanimtionbase to write it as follows. getcurrentvaluecore and createinstancecore must be rewritten as follows.

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();        }    }

Look up

Animationtimeline, the originator of animtion, provides multiple important methods for animation, as follows:

Public animationclock
Createclock ();

Public Virtual Object getcurrentvalue (Object
Defaultoriginvalue, Object
Defaultdestinationvalue, animationclock
Animationclock );

About createclock, it is said that the efficiency of using clock is relatively high, the following code:

Animationclock myclock = myanimation. createclock (); // 1. it is said that the write efficiency is relatively high. myscaletransform. applyanimationclock (scaletransform. scalexproperty, myclock); myscaletransform. applyanimationclock (scaletransform. scaleyproperty, myclock); // myscaletransform. beginanimation (scaletransform. scalexproperty, myanimation); // myscaletransform. beginanimation (scaletransform. scaleyproperty, myanimation );

Timeline is the basis of animation. These animations are based on the timeline, so many basic members are provided, such as attributes:

     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; }

2. Explain doubleanimtionusingkeyframes in detail.

Example:

 

<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 linear animation, 3 seconds later to left = 500, moving at a constant speed to the position of 500

Discretedoublekeyframe: a discrete animation connected to an animation. It suddenly jumps to the position of 400 in 4 seconds.

Splinedoublekeyframe spline animation, which is the most complicated. It takes 6 seconds to reach the position of 10.

To understand the working principle of keyspline, you must first understand the cubic beiser curve. A Cubic beiser curve is defined by a starting point, an ending point, and two control points. The two coordinates in keyspline define these two control points. When describing a key spline, the starting point of the besell curve is always 0, and the ending point is always 1, which is why only two control points are defined. The obtained curve specifies how the animation is interpolated within a period of time. That is, the curve represents the change speed of the animation's target attribute within the period of time. For a better understanding of the relationship between the animation progress and the beiser curve, see key spline animation sample (key spline animation sample http://msdn.microsoft.com/zh-cn/library/ms771640 (vs.85). aspx ).

There are examples in the appendix demo. Please take a closer look.

In addition, keytime is also very exquisite,

<Lineardoublekeyframe value = "400" keytime = "00:00:04"/>

It is a common timing method. 00:00:04 indicates that the animation time for this segment is 4 seconds.

<Lineardoublekeyframe value = "100" keytime = "10%"/>

10% indicates that the animation takes 10% of the total time.

<Lineardoublekeyframe value = "100" keytime = "Uniform"/>

The time consumed by all keyframes is the same.

<Lineardoublekeyframe value = "100" keytime = "paced"/>

All keyframes are at a constant speed. I personally think this is a weakness.

For details, see the demo.

3. Next, describe matrixanimationusingpath

Let the element go along the trajectory, and doesrotatewithtangent = true can control the direction of the element towards the trajectory.

     <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. focus on fewer attributes

In the past, only from, to, start value, and end value were noticed. By can be used to obtain or set the total amount based on which the starting value of an animation is changed. If both the to and by attributes are set, the to attribute takes precedence over the by attribute.

Isadditve: gets or sets a value that indicates whether to add the current value of the Target attribute to the starting value of the animation. If an animation only sets one of its from, to, or by attributes, setting this attribute is invalid.

Iscumulative gets or sets the total amount that an animation uses to change its start value. If both the to and by attributes are set, the to attribute takes precedence over the by attribute.

5. For storyboard, first check the inheritance structure.

 

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 inherits from paralleltimeline, so what is paralleltimeline? Example:

 

  <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 puts several Animations together to control the start time.

Storyboard adds a common operation after inheriting paralleltimeline, such as begin/Stop/pause and targetproperty.