wpf--Animation

Directory of this document

Objective

1. Linear interpolation animation

2. Key frame animation

3. Path animation

Objective

Using animations is an effective means of enhancing the user experience. Reasonable animation, can make the interface of the application look more natural, real, smooth, comfortable, more effective to show the user information, users are more acceptable. It also increases the fun of software use and increases user viscosity. (such as MSN2011 's splash screen animation, font sliding and fading.) ）

In the previous program development, if you want to build an animation, you need a timer and custom drawing elements, and let these drawing elements according to the timer to make corresponding changes to achieve animation effect, the development difficulty and workload are very high. And the scalability and flexibility of these animations are generally weak, and the code size and complexity are very large. In WPF, animations can be animated using a declarative approach, or even without any background code. The animated model and powerful class library provided by WPF make it easy to implement a general animation. In WPF, creating more complex animations can even be implemented in XAML using design tools or third-party tools. So, the need for more, probably not the amount of code, but your imagination!

This article describes three basic animations in WPF, linear interpolation, keyframes, and path animations.

In the System.Windows.Media.Animation namespace, there are three types of animation classes: linear interpolation Animation class (17), keyframe animation (22), path animation (3).

Using the Animation class in C # code requires the introduction of namespaces:System.Windows.Media.Animation

Using System.Windows.Media.Animation;

1. Linear interpolation animation

The animation behaves as a linear interpolation process in which an attribute of an element is progressively increased between the start and end values. For example, achieve the desired effect by implementing a button fade effect so that its transparency opacity linearly between 0~1.

The following is a 17 linear interpolation animation class in the System.Windows.Media.Animation namespace.

Byteanimation

ColorAnimation

Decimalanimation

DoubleAnimation

Int16animation

Int32animation

Int64animation

Point3danimation

PointAnimation

Quaternionanimation

Rectanimation

Rotation3danimation

Singleanimation

Sizeanimation

Thicknessanimation

Vector3DAnimation

Vectoranimation

Example 1: Use doubleanimation as an example to achieve the fade-in effect of text.

Animations can be defined directly in XAML, and the following examples are animations implemented in the form of background code.

Xaml

< Height = "Width =" "Foreground" = "  #326939" FontSize= " the" Name = "TextBlock1" text= "Text fade in effect"/>           

Cs

New0;    //// end value da. Duration = Timespan.fromseconds (// animation duration this.textBlock1.BeginAnimation (Textblock.opacityproperty, DA); // start animation        

　　

Example 2: Use thicknessanimation to achieve the element translation effect.

Xmal

< Height = "Foreground" = " #326939" Margin = "0,100,0,0" FontSize= " the" Name= "TextBlock1" text= "text translation"/>          

Cs

//Text translation, margin property is thickness type, select Thicknessanimationthicknessanimation ta =NewThicknessanimation (); Ta. from =New Thickness (0, 0,  0); // start value TA. to = new Thickness (0,   0); // end value TA. Duration = Timespan.fromseconds (3); // animation duration this.textBlock1.BeginAnimation (textblock.marginproperty, TA);  start animation                  

2. Key frame animation

A keyframe animation is a time-based node in which a property reaches a value on a specified time node.

The following is a 22 Keyframe animation class in the System.Windows.Media.Animation namespace.

Booleananimationusingkeyframes

Byteanimationusingkeyframes

Charanimationusingkeyframes

ColorAnimationUsingKeyFrames

Decimalanimationusingkeyframes

DoubleAnimationUsingKeyFrames

Int16animationusingkeyframes

Int32animationusingkeyframes

Int64animationusingkeyframes

Matrixanimationusingkeyframes

Objectanimationusingkeyframes

Point3danimationusingkeyframes

PointAnimationUsingKeyFrames

Quaternionanimationusingkeyframes

Rectanimationusingkeyframes

Rotation3danimationusingkeyframes

Singleanimationusingkeyframes

Sizeanimationusingkeyframes

Stringanimationusingkeyframes

Thicknessanimationusingkeyframes

Vector3danimationusingkeyframes

Vectoranimationusingkeyframes

Example 3:border key-frame animation for width

Xaml

<Height= "+" Width= "0" Background= "#326939" Name= "Border1"/> 

Cs

//Border length key frame animation doubleanimationusingkeyframes Dak =NewDoubleAnimationUsingKeyFrames ();//Key frames define DAK. Keyframes.add (New LinearDoubleKeyFrame (0, Keytime.fromtimespan (timespan.fromseconds (0));d AK. Keyframes.add (New LinearDoubleKeyFrame (Keytime.fromtimespan (Timespan.fromseconds (3));d AK. Keyframes.add (New LinearDoubleKeyFrame (Keytime.fromtimespan (Timespan.fromseconds (6)));d AK. Keyframes.add (new LinearDoubleKeyFrame (0, Keytime.fromtimespan (timespan.fromseconds (9))); Dak. BeginTime = Timespan.fromseconds (2);  starting from the 2nd second animation Dak. RepeatBehavior = New RepeatBehavior (3);  animation repeats 3 times // start animation this.border1.BeginAnimation (Border.widthproperty, Dak);     

(Start time when the program is running, 0 seconds)

0~5: The animation has not yet started;

　　5~8:border1 width increased from 0 to 240;

8~11:border1 width remains unchanged at 240;

11~14:border1 width reduced from 240 to 0;

14-17: increased from 0 to 240 ... (i.e. the 5~14 process cycles 3 times)

3. Path animation

Path-based animations are more professional than the first two. It behaves by modifying the value so that it conforms to the shape described by the PathGeometry object and moving the element along the path. The following is an animated class of 3 paths in the System.Windows.Media.Animation namespace.

Doubleanimationusingpath

Matrixanimationusingpath

Pointanimationusingpath

Example 4: A path-based animation demonstration

Xmal (the animation is defined in XAML, uses an event trigger, and starts animating when the form loads)

<Windowx:class= "Wpfapplication9.mainwindow"xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"Xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"Title= "MainWindow"Height= "360"Width= "480"><Window.Resources><!--Path Resource-<PathGeometryx:key= "Path"><PathFigureIsClosed= "True"><ArcSegmentPoint= "200,200"Size= "30,10"SweepDirection= "Clockwise"></ArcSegment><ArcSegmentPoint= "300,200"Size= "5,5"></ArcSegment></PathFigure></PathGeometry></Window.Resources><!---Event trigger, the form loads when the animation starts, cycle 6 seconds, infinite loop-<Window.triggers><EventTriggerRoutedEvent= "Window.Loaded"><BeginStoryboard><Storyboard><DoubleanimationusingpathStoryboard.TargetName= "image"Storyboard.TargetProperty= "(Canvas.Left)"PathGeometry="{StaticResource Path}"Duration= "0:0:6"RepeatBehavior= "Forever"Source= "X"></Doubleanimationusingpath><DoubleanimationusingpathStoryboard.TargetName= "image"Storyboard.TargetProperty= "(Canvas.Top)"PathGeometry="{StaticResource Path}"Duration= "0:0:6"RepeatBehavior= "Forever"Source= "Y"></Doubleanimationusingpath></Storyboard></BeginStoryboard></EventTrigger></Window.triggers><Canvas><!--Show path-<PathMargin= "30"Stroke= "#ddd"Data="{StaticResource Path}"></path> Span style= "color: #008000;" ><!-- animated element --> image name= "Image " Source=" Me.png " Width= " Height=" 48 "/> </canvas< Span style= "color: #0000ff;" >></window>  

My avatar will move along the curve path, and because the RepeatBehavior property is set to Forever, the animation will loop indefinitely.

wpf--Animation