WPF Animation 1---base animation

Basic animations

1. Similar to DoubleAnimation, if you want to change two at the same time, to write two times more trouble, can not pause or stop the animation

Any animation must have a minimum of three details, form-initial value to-end value duration-length of time

Other animated notes: Speedradio increase or decrease animation speed AutoReverse automatically returns the initial value Fillbehavior

　　

1         Private voidButton1_Click (Objectsender, RoutedEventArgs e)2         {3DoubleAnimation widthanimation =NewDoubleAnimation ();4Widthanimation.from = Max;5Widthanimation.to = $;6Widthanimation.duration = Timespan.fromseconds (0.5);7 Image1. BeginAnimation (Button.widthproperty, widthanimation);8}

2. Storyboard

A storyboard is an enhanced timeline that you can use to group multiple animations and have the ability to control animation playback-pausing, stopping, changing the playback position, and so on. It enables the Tagetproperty and Tagetname properties to point to a specific property and to a specific element

In other words, the storyboard plays a bridge before animating and hoping to apply animated properties.

1         Private voidButton2_Click (Objectsender, RoutedEventArgs e)2         {3Storyboard SB =NewStoryboard ();4 5DoubleAnimation da =NewDoubleAnimation ();6Da. from =135;//Set Start value7Da. to = $;//Set End Value8Da. Duration = Timespan.fromseconds (0.5);//Animation Run Time9Sb. Children.add (DA);//add an Animated object to the storyboardTen  One             //specifies the object to execute the storyboard on A Storyboard.settarget (DA, image1); -             //specify the properties to animate -Storyboard.settargetproperty (DA,NewPropertyPath (Button.widthproperty)); the  -  -             //sb.completed + = new EventHandler ((Object Sender1, EventArgs e1) = {MessageBox.Show ("completed");}); - sb. Begin (); +}

3.TranslateTransform

You can change the x-coordinate of the button1 by TranslateTransform the Xproperty property. Notice that we are not directly related to a property of the button, such as the previous Widthproperty, as before. Instead, it is indirectly associated through the xproperty of its Rendertransformproperty property, which is called the "attribute Chain" (Propertychain)

EXPLANATION Propertychain---Set Rendertransformproperty to the TranslateTransform type, so the second element property is Translatetransform.xproperty), Simply put is (Type 1. Property 1, type 2. Property 2,.... Type N. property n)

Explain the new PropertyPath ("(0)." ( 1) ", Propertychain in (0). (1) meaning---Propertychain is an array that represents the Translatetransform.xproperty attribute in the Propertychain array (the second property)

1         Private voidButton3_Click (Objectsender, RoutedEventArgs e)2         {3              This. Image1. RenderTransform =NewTranslateTransform ();4 5Storyboard SB =NewStoryboard ();6DoubleAnimation da =NewDoubleAnimation ();7Da. from = A;8Da. to = -;9Da. Duration = Timespan.fromseconds (0.5);Ten sb. Children.add (DA); One  Adependencyproperty[] Propertychain =Newdependencyproperty[] -             { - Image.rendertransformproperty, the Translatetransform.xproperty -             }; -  -Storyboard.settarget (DA, This. Image1); +Storyboard.settargetproperty (DA,NewPropertyPath ("(0). (1)", Propertychain)); -  +             //sb.completed + = new EventHandler ((Object Sender1, EventArgs e1) = {MessageBox.Show ("completed");}); A sb. Begin (); at}

4.TransformGroup

1. Storyboard Add TransformGroup is a container that combines multiple elements of change into a change.

2. Storyboard begin to animate only once.

1         //Storyboard Add TransformGroup is a container that combines multiple elements of change into a change.2         //Storyboard begin animation write only once3         Private voidButton5_click (Objectsender, RoutedEventArgs e)4         {5DoubleAnimation dascx =NewDoubleAnimation ();6DoubleAnimation Dascy =NewDoubleAnimation ();7DoubleAnimation Dacor =NewDoubleAnimation ();8 9             //zoom, rotate, twist, and so on change effect merge together. The following basic changes are only a single change, if you want to achieve a variety of effects of the overlay, then you need to use to TransformGroup, or will error. TransformGroup is similar to the role of StackPanel embedded in the layout of a control, and is a container that combines various elements of change into a change. TenTransformGroup TG =NewTransformGroup ();//It can be used to combine the zoom, rotation, twist and other effects of an object. is to combine multiple elements of change into a changing container. One  A  -ScaleTransform sc =NewScaleTransform ();//Zoom -  theRotateTransform RT =NewRotateTransform ();//Rotate -TranslateTransform TT =NewTranslateTransform ();//panning -SkewTransform st =NewSkewTransform ();//Twisted -MatrixTransform MT =NewMatrixTransform ();//Enables an object to achieve more complex transformations through a matrix algorithm.  +  -  +  A TG. Children.add (SC); atImage1. RenderTransform = TG;//The RenderTransform class is designed for the purpose of directly changing the shape of an object (such as scaling, rotating an element), and the RenderTransform contains a Variant attribute member that is specifically designed to change the shape of an object, which can be used to stretch the elements, rotate , twisting and other effects, while deformation effects are often used to help produce various animation effects.  -Image1. Rendertransformorigin =NewPoint (0.5,0.5); -             //set up a story version -  - Storyboard.settarget (Dacor, image1); -Storyboard.settargetproperty (Dacor,NewPropertyPath ("(uielement.opacity)")); in  -  to Storyboard.settarget (Dascx, image1); +Storyboard.settargetproperty (Dascx,NewPropertyPath ("(Uielement.rendertransform). (TransformGroup.Children) [0]. (Scaletransform.scalex)")); -  the Storyboard.settarget (Dascy, image1); *Storyboard.settargetproperty (Dascy,NewPropertyPath ("(Uielement.rendertransform). (TransformGroup.Children) [0]. (Scaletransform.scaley)")); $ Panax Notoginseng  -Storyboard SB =NewStoryboard (); the sb. Children.add (dascx); + sb. Children.add (Dascy); A sb. Children.add (Dacor); the             //set the transform and time +Dascx.duration =NewDuration (Timespan.frommilliseconds ( -)); -Dascy.duration =NewDuration (Timespan.frommilliseconds ( -)); $Dacor.duration =NewDuration (Timespan.frommilliseconds ( -)); $Dacor.from =1; -Dacor.to =0.7; -  theDascx.from =1; -Dascx.to =0.7;WuyiDascy.from =1; theDascy.to =0.7; -Sb. AutoReverse =true; Wu sb. Begin (); -}

This is my simple animation demo, wrote 20, a simple comparison of the whole. If you have a mistake, you can tell me.

SOURCE download

WPF Animation 1---base animation