[uwp-small white Diary 13] Composition Animation

Objective

First, compare the traditional animation with the composition animation. Look at the picture to understand the advantages of composition animation is too obvious as the official said significantly reduced the animation of the implementation of the difficulty and the amount of code.

Traditional animation, take the most common is over animation: Enter and exit, if your animation is very complex, the code is simply sour. And this animation was executed during the execution, and handled improperly, duang! duang! To give you an error prompt to execute will have to stop the previous animation.

Now the composition animation solves the problem perfectly. Go over the effects I play once, exit over effect I'm going to play it out in reverse order. Mom doesn't have to worry about my animations any more. Pro, this can still n fly yo!!

1.Composition Rotate Animation First step: Create a composition

var composition = Elementcompositionpreview.getelementvisual (this). compositor;

Step Two: Create an animation

//--------------------------------------------------------------------            //1. Create a scalaranimation and a linear easing function. //--------------------------------------------------------------------            varAnimation =composition.            Createscalarkeyframeanimation (); vareasing =composition.            Createlineareasingfunction (); //--------------------------------------------------------------------            //1. Set the animation, rotate from 0 degrees 360 degrees, 3 seconds, repeat playback//--------------------------------------------------------------------Animation. Insertkeyframe (0.0f,0.0f); Animation. Insertkeyframe (1.0f,360.0f, easing); Animation. Duration= Timespan.frommilliseconds ( the); Animation. Iterationbehavior= Animationiterationbehavior.forever;

Part III: Start animation

//--------------------------------------------------------------------            //1. Get the visual of the button//2. Start animation, center rotation//--------------------------------------------------------------------            varButtonvisual =elementcompositionpreview.getelementvisual (Animatingbutton); Buttonvisual.centerpoint=NewVector3 ((float) animatingbutton.actualwidth/2.0f,(float) animatingbutton.actualheight/2.0f,0.0f); Buttonvisual.startanimation (nameof (buttonvisual.rotationangleindegrees), animation);

　　

2.Composition animation plays in sequence and reverse order, performing animations in parallel. 1. Reverse-order playback animation

In fact, the last time the code was modified under. First the declaration changed the next range.

 Public Sealed Partial classMainpage:page { PublicMainPage () { This.            InitializeComponent (); Loaded+ = (s, a) = ={initcomposition ();        };        } compositor composition;        Scalarkeyframeanimation animation;        Visual buttonvisual;        Spritevisual Visual; Private voidinitcomposition () {//--------------------------------------------------------------------            //1. Gets the current object's visual object used to create the composite//2. Create a spritevisual and use it to host our content and brush//--------------------------------------------------------------------Composition = Elementcompositionpreview.getelementvisual ( This).    compositor; <----This place is the object that you want to animate, and who you want to animate and special effects is going to get it . Visual=composition.            Createspritevisual (); //--------------------------------------------------------------------            //1. We want to set the size of visual to 150*150//2. In addition we set its offset to 50,50//Note that this offset is relative to its parent. //3. Finally we set Bursh to this visual, filling any color. //--------------------------------------------------------------------Visual. Size =NewVector2 ( Max, Max); Visual. Offset=NewVector3 ( -, -,0); Visual. Brush=composition.            Createcolorbrush (Colors.black); //--------------------------------------------------------------------            //This method is used to set our visual to page//--------------------------------------------------------------------Elementcompositionpreview.setelementchildvisual ( This, visual); //--------------------------------------------------------------------            //1. Create a scalaranimation and a linear easing function. //--------------------------------------------------------------------Animation =composition.            Createscalarkeyframeanimation (); vareasing =composition.            Createlineareasingfunction (); //--------------------------------------------------------------------            //1. Start painting, rotate from 0 degrees to 360 degrees, 3 seconds, repeat play//--------------------------------------------------------------------Animation. Insertkeyframe (0.0f,0.0f); Animation. Insertkeyframe (1.0f,360.0f, easing); Animation. Duration= Timespan.frommilliseconds ( the); Animation. Iterationbehavior=Animationiterationbehavior.forever; //--------------------------------------------------------------------            //1. Create a rotated center point. //2. Set the animation to manipulate the properties, here rotation of course is the angle//Note that nameof () is used here to avoid the problem of certain methods that set the target property to use a string that does not cause a smart prompt.//--------------------------------------------------------------------Visual. CenterPoint =NewVector3 (visual. size.x/2.0f, Visual. size.y/2.0f,0); Visual. Startanimation (Nameof (visual.            rotationangleindegrees), animation); //--------------------------------------------------------------------            //1. Get the visual of the button//2. Start the animation
3.elementcompositionpreview.getelementvisual ( Synthesizer object )

            //--------------------------------------------------------------------Buttonvisual =elementcompositionpreview.getelementvisual (Animatingbutton);<----The same thing about this place, who do you want to animate and special effects to get it?

Buttonvisual.centerpoint=NewVector3 ((float) Animatingbutton.actualwidth/2.0f, (float) Animatingbutton.actualheight/2.0f,0.0f); //-------------------------------------------------------------------- //Create a group to perform an animation//--------------------------------------------------------------------Compositionscopedbatch CSB =composition. Createscopedbatch (compositionbatchtypes.animation); Buttonvisual.startanimation (nameof (buttonvisual.rotationangleindegrees), animation); Visual. Startanimation (Nameof (visual. rotationangleindegrees), animation); Csb. End (); }

Add a Click event to the button on the last code. Look at the code above and you know there's only one scalar keyframe animation named animation.

 // <summary>        ///animate forward and reverse/// </summary>        /// <param name= "Sender" ></param>        /// <param name= "E" ></param>        Private voidAnimatingbutton_click (Objectsender, RoutedEventArgs e) {            if(animation. direction==Windows.UI.Composition.AnimationDirection.Normal) {animation. Direction=Windows.UI.Composition.AnimationDirection.Alternate; }            Else{animation. Direction=Windows.UI.Composition.AnimationDirection.Normal;            } buttonvisual.startanimation (Nameof (buttonvisual.rotationangleindegrees), animation); Visual. Startanimation (Nameof (visual.        rotationangleindegrees), animation); }

[uwp-small white Diary 13] Composition Animation