Windows Phone development (42): animation easing

When discussing key frame animations, I intentionally ignored several key frame animations with slow animations, such as easingcolorkeyframe, easingdoublekeyframe, and easingpointkeyframe. Because I hope to put it in this course to blow the slow function.

The so-called easing function is the function we talk about in algebra. To put it bluntly, it is the root specific function rule that calculates the final value with the input value, so that the animation is not balanced between two key frames, but with acceleration/deceleration or other effects, of course, also depends onAlgorithm.

 

For example, Function

 

So we can see that slow functions involve complex mathematical operations. Fortunately, the commonly used slow function MS has been encapsulated for us, this is also the migration from WPF/Silverlight to WP, and the Integration compatibility MD is good. Therefore, you can easily implement it when using it. Therefore, when you are practicing, remember to put a cup of coffee on the table while writingCodeTry it. Haha, happy programming, happy programming.

 

If you have worked on WPF or SL, you will think it is very easy. I didn't emphasize it for the first time. Therefore, the foundation is very important and you have made a solid foundation, No matter what new things you have learned, I believe it, whether you believe it or not.

 

It doesn't matter how you don't have an intuitive understanding of the slow function. We recommend you play a game. If you don't play WP, you will regret it. Game address: http://samples.msdn.microsoft.com/Silverlight/silverlight_next/Animations/easing_functions_gallery/testpage.html

Remember to be careful, so that you will be familiar with the slow functions and related classes.

 

CauseFamous sayingWell said, "Do it yourself, make full use of clothes and food", still old rules, the Instance decides everything, do it yourself.

 

Exercise 1. refer to the following XAML code to build your UI.

<Grid loaded = "gridloaded"> <ellipse horizontalalignment = "Left" verticalignment = "TOP" fill = "orange" width = "100" Height = "100" X: name = "elp"> <ellipse. rendertransform> <translatetransform X: Name = "TRM"/> </ellipse. rendertransform> </ellipse> <grid. resources> <storyboard X: Name = "STD"> <doubleanimationusingkeyframes duration = "0: 0" storyboard. targetname = "TRM" storyboard. targetproperty = "Y" repeatbehavior = "30"> <lineardoublekeytime = "0: 0" value = "0"/> <easingdoublekeyframe keytime = "0: 0: 8" value = "485"> <easingdoublekeyframe. easingfunction> <bounceease bounciness = "3" bounces = "3"/> </easingdoublekeyframe. easingfunction> </easingdoublekeyframe> </doubleanimationusingkeyframes> </storyboard> </grid. resources> </GRID>

The C # code in the background enables animation.

 
Private void gridloaded (Object sender, routedeventargs e) {This. STD. Begin ();}
 

Now, running the above example, you will find that the circle has rebounded twice when it falls, and the animation ends, and it starts slowly, and then gradually accelerates, this is the effect of the easing function.

 

 

Exercise 2.

Refer to the following XAML code to create the UI.

<Grid loaded = "gridloaded"> <rectangle margin = "35" X: Name = "REC"> <rectangle. fill> <lineargradientbrush X: Name = "BRS" startpoint = "0, 0.5" endpoint = "1, 0.5 "> <gradientstop color =" blue "offset =" 0 "/> <gradientstop color =" yellow "offset =" 0.5 "/> <gradientstop color =" blue "offset = "1"/> </lineargradientbrush> </rectangle. fill> </rectangle> <grid. resources> <storyboard X: Name = "STD"> <doubleanimationusingkeyframes duration = "0: 0" storyboard. targetname = "BRS" storyboard. targetproperty = "(lineargradientbrush. gradientstops) [1]. (gradientstop. offset) "repeatbehavior =" 35 "autoreverse =" true "> <easingdoublekeyframe keytime =" 0: 0 "value =" 0.2 "/> <easingdoublekeyframe keytime =" 0: 0: 10 "value =" 0.8 "> <easingdoublekeyframe. easingfunction> <elasticease oscillations = "4" springiness = "1"/> </easingdoublekeyframe. easingfunction> </easingdoublekeyframe> </doubleanimationusingkeyframes> </storyboard> </grid. resources> </GRID>

 

Right-click gridloaded and select "navigation to event processing" from the pop-up menu.Program", Complete the following C # code in the generated method.

 
Private void gridloaded (Object sender, routedeventargs e) {STD. Begin ();}
 

 

After running the program, you will see the yellow color block in the middle of the gradient fill move back and forth between the left and right.

 

 

 

Exercise 3:

Refer to the following XAML to create the UI.

<Phone: phoneapplicationpage X: class = "sample. page3 "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Phone =" CLR-namespace: Microsoft. phone. controls; Assembly = Microsoft. phone "xmlns: shell =" CLR-namespace: Microsoft. phone. shell; Assembly = Microsoft. phone "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http: // Configure "fontfamily =" {staticresource quota} "fontsize =" {staticresource quota} "foreground =" {staticresource quota} "supportedorientations =" portrait "orientation =" portrait "MC: ignorable = "D" D: designheight = "768" D: designwidth = "480" shell: systemtray. isvisible = "true"> <! -- Layoutroot is the root mesh that contains all page content --> <grid X: Name = "layoutroot" background = "Transparent"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <! -- Titlepanel contains the application name and page title --> <stackpanel X: Name = "titlepanel" grid. row = "0" margin = ","> <textblock X: name = "applicationtitle" text = "my application" style = "{staticresource phonetextnormalstyle}"/> <textblock X: name = "pagetitle" text = "Page name" margin = "9,-7,0, 0" style = "{staticresource phonetexttitle1style}"/> </stackpanel> <! -- Contentpanel-place other content here --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0 "> <rectangle horizontalalignment =" Left "verticalignment =" bottom "width =" 60 "Height =" 45 "fill =" white "mouseleftbuttondown =" onshow "/> <textblock timeout = "center" verticalignment = "center" text = "click the White Rectangle in the lower left corner. "Textwrapping =" Wrap "margin =" 30,0, 40,0 "fontsize =" 45 "/> <stackpanel X: name = "SP" background = "lightblue" Height = "180" verticalignment = "bottom"> <textblock foreground = "red" margin =, 20, 20 "fontsize =" 32 "text =" Hello, click the button below. "/> <Button content =" Confirm "background =" blue "Click =" onhide "/> <stackpanel. rendertransform> <translatetransform X: Name = "TRM" Y = "180"/> </stackpanel. rendertransform> </stackpanel> <grid. resources> <storyboard X: Name = "stdshow"> <doubleanimationusingkeyframes storyboard. targetname = "TRM" storyboard. targetproperty = "Y" Duration = "1"> <easingdoublekeyframe keytime = "" value = "180"/> <easingdoublekeyframe keytime = "" value = "0"> <easingdoublekeyframe. easingfunction> <powerbench power = "10"/> </easingdoublekeyframe. easingfunction> </easingdoublekeyframe> </doubleanimationusingkeyframes> </storyboard> <storyboard X: Name = "stdhide"> <doubleanimationusingkeyframes duration = "" storyboard. targetname = "TRM" storyboard. targetproperty = "Y"> <easingdoublekeyframe keytime = "" value = "0"/> <easingdoublekeyframe keytime = "" value = "180"> <easingdoublekeyframe. easingfunction> <powerbench power = "10"/> </easingdoublekeyframe. easingfunction> </easingdoublekeyframe> </doubleanimationusingkeyframes> </storyboard> </grid. resources> </GRID> </Phone: phoneapplicationpage>

Right-click onshow and onhide methods, and select "navigate to event handler" from the pop-up menu to complete the background code logic.

 
Private void onshow (Object sender, mousebuttoneventargs e) {If (stdhide. getcurrentstate ()! = Clockstate. Stopped) {stdhide. Stop () ;}stdshow. Begin ();} private void onhide (Object sender, routedeventargs e) {If (stdshow. getcurrentstate ()! = Clockstate. Stopped) {stdshow. Stop () ;}stdhide. Begin ();}
 

 

Now, run the program and click the White Rectangle at the bottom left of the screen. At this time, a panel will pop up at the bottom of the screen, and then click the button on the Panel, the Panel will shrink.

In this way, we have made a tool bar similar to the animation effect.