WPF programming learning-Animation

Contents

Preface

1. Linear interpolation Animation

2. Key Frame Animation

3. Path Animation

Preface

Animation is an effective way to enhance user experience. Reasonable animation allows applicationsProgramThe interface looks more natural, real, smooth, and comfortable, and displays information to users more effectively, making it easier for users to accept. It also increases the fun of using the software and increases the user viscosity. (For example, msn2011's startup interface animation, font sliding and fade-in and fade-out .)

In previous program development, if you want to build an animation, you need a timer and custom drawing elements, and make corresponding changes to these drawing elements according to the timer to achieve the animation effect, the development difficulty and workload are both high. In addition, these animations have poor scalability and flexibility,CodeLarge volume and complexity. In WPF, you can build an animation using the declaration method, or even achieve the animation effect without any background code. The animation model and powerful class libraries provided by WPF make it easy to implement general animations. In WPF, you can create more complex animations, or even use design tools or third-party tools to implement them in XAML. So what you need is not the amount of code, but your imagination!

This article describes three basic animations in WPF: linear interpolation, key frame, and path animation.

InSystem. Windows. Media. AnimationThis namespace contains three animation classes:Linear interpolation Animation(17 ),Key Frame Animation(22 ),Path Animation(3 ).

To use the animation class in C # code, you need to introduce the namespace:System. Windows. Media. Animation

Using system. Windows. Media. animation;

1. Linear interpolation Animation

This animation shows that an attribute of an element is gradually increased between the start value and the end value. It is a linear interpolation process. For example, implement the fade-in effect of a button to make it transparent. The Opacity is between 0 and ~ 1. linear growth can achieve the expected results.

Below isSystem. Windows. Media. AnimationThere are 17 linear interpolation animation classes in the namespace.

Byteanimation

Coloranimation

Decimalanimation

Doubleanimation

Int16animation

Int32animation

Int64animation

Point3danimation

Pointanimation

Quaternionanimation

Rectanimation

Rotation3danimation

Singleanimation

Sizeanimation

Thicknessanimation

Vector3danimation

Vectoranimation

Example 1: UseDoubleanimationFor example, the text fades in.

You can directly define an animation in XAML. The following example shows an animation in the form of background code.

XAML

<TextblockHeight= "50"Width= "220"Foreground= "#326939"Fontsize= "36"Name= "Textblock1"Text= "Text fade-in effect"/>
 

CS

Doubleanimation da =NewDoubleanimation (); da. From=0;//Start ValueDa. To =1;//End valueDa. Duration = timespan. fromseconds (3);//Animation durationThis. Textblock1.beginanimation (textblock. opacityproperty, DA );//Start Animation
 

Example 2: UseThicknessanimationTo achieve the element translation effect.

Xmal

<TextblockHeight= "50"Foreground= "#326939"Margin= "0,100"Fontsize= "36"Name= "Textblock1"Text= "Text Translation"/>
 

CS

 //  Text translation. The margin attribute is of the thickness type. Select thicknessanimation. Thicknessanimation TA = New Thicknessanimation (); TA. From = New Thickness ( 0 , 100 , 0 , 0 ); //  Start Value Ta. To = New Thickness ( 240 , 100 , 0 , 0 );//  End value Ta. Duration = timespan. fromseconds ( 3 ); //  Animation duration  This . Textblock1.beginanimation (textblock. marginproperty, TA ); //  Start Animation 

2. Key Frame Animation

The Key Frame Animation uses time as the node. On the specified time node, the attribute reaches a certain value.

Below isSystem. Windows. Media. AnimationIn the namespace, there are 22 key frame animation classes.

Booleananimationusingkeyframes

Byteanimationusingkeyframes

Charanimationusingkeyframes

Coloranimationusingkeyframes

Decimalanimationusingkeyframes

Doubleanimationusingkeyframes

Int16animationusingkeyframes

Int32animationusingkeyframes

Int64animationusingkeyframes

Matrixanimationusingkeyframes

Objectanimationusingkeyframes

Point3danimationusingkeyframes

Pointanimationusingkeyframes

Quaternionanimationusingkeyframes

Rectanimationusingkeyframes

Rotation3danimationusingkeyframes

Singleanimationusingkeyframes

Sizeanimationusingkeyframes

Stringanimationusingkeyframes

Thicknessanimationusingkeyframes

Vector3danimationusingkeyframes

Vectoranimationusingkeyframes

Example 3: animation of the Border Width Key Frame

XAML

 
<BorderHeight= "32"Width= "0"Background= "#326939"Name= "Border1"/>
 

CS

 // Border length Key Frame Animation Doubleanimationusingkeyframes Dak = New  Doubleanimationusingkeyframes ();  //  Key Frame Definition Dak. keyframes. Add ( New Lineardoublekeyframe ( 0 , Keytime. fromtimespan (timespan. fromseconds ( 0  ); Dak. keyframes. Add (  New Lineardoublekeyframe ( 240 , Keytime. fromtimespan (timespan. fromseconds ( 3 ); Dak. keyframes. Add (  New Lineardoublekeyframe ( 240 , Keytime. fromtimespan (timespan. fromseconds ( 6  ); Dak. keyframes. Add (  New Lineardoublekeyframe ( 0 , Keytime. fromtimespan (timespan. fromseconds ( 9  ); Dak. begintime = Timespan. fromseconds ( 2 ); //  Animation starts in 2nd seconds Dak. repeatbehavior =New Repeatbehavior ( 3 ); //  Animation repeat three times  //  Start Animation  This . Border1.beginanimation (border. widthproperty, DAK );

(Start timing when running the program, 0th seconds)

0 ~ 5: The animation has not started yet;

5 ~ 8: The border1 width increases from 0 to 240;

8 ~ 11: The width of border1 remains unchanged at 240;

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

14-17: increased from 0 to 240 ...... (That is, 5 ~ 14)

3. Path Animation

Path-based animation is more professional than the first two. It is represented by modifying a value to conform to the shape described by the pathgeometry object and moving the element along the path.Below isSystem. Windows. Media. AnimationIn the namespace, there are three path animation classes.

Doubleanimationusingpath

Matrixanimationusingpath

Pointanimationusingpath

Example 4: Path-based animation demonstration

Xmal (this animation is defined in XAML. When an event trigger is used, the animation starts when the form is loaded)

 <  Window  X: 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  -->          < Pathgeometry  X: Key  = "Path"  >              <  Pathfigure  Isclosed  = "True"  >                  <  Arcsegment  Point  = "200,200"  Size  = "30,10"  Sweepdirection = "Clockwise"  > </  Arcsegment  >                  <  Arcsegment  Point  = "300,200"  Size  = "5, 5"  > </  Arcsegment  >              </  Pathfigure  >          </ Pathgeometry  >      </  Window. Resources  >      <! --  -Event trigger: the animation starts when the form is loaded, with a 6-second cycle and an infinite loop  -->      <  Window. triggers  >          <  Eventtrigger  Routedevent  = "Window. Loaded"  >             <  Beginstoryboard  >                  <  Storyboard  >                      <  Doubleanimationusingpath  Storyboard. targetname  = "Image"  Storyboard. targetproperty  = "(Canvas. Left )"  Pathgeometry  ="  {Staticresource path} "  Duration  = "0: 0"  Repeatbehavior  = "Forever"  Source  = "X"  > </  Doubleanimationusingpath  >                      <  Doubleanimationusingpath  Storyboard. targetname  = "Image"  Storyboard. targetproperty = "(Canvas. Top )"  Pathgeometry  ="  {Staticresource path}  "  Duration  = "0: 0"  Repeatbehavior  = "Forever"  Source  = "Y"  > </  Doubleanimationusingpath  >                  </  Storyboard >                              </  Beginstoryboard  >          </  Eventtrigger  >      </  Window. triggers  >      <  Canvas  >          <! --  Display path  -->          < Path  Margin  = "30"  Stroke  = "# DDD"  Data  ="  {Staticresource path}  "  > </  Path  >          <! --  Animation Elements  -->          <  Image Name  = "Image"  Source  = "Me.png"  Width  = "48"  Height  = "48"   />      </  Canvas  >  </  Window  > 

My avatar will be moved along the curve path. Because the repeatbehavior attribute is set to forever, the animation will be infinite.