UWP-Make a relatively cool animated button/Button animation

Tired of the system comes with the button animation why not try to customize a more cool animation by the way to improve the user experience. ：

The animation is divided into several parts, namely: the inner circle is enlarged from the center (1) and also fade (2), the outer circle is enlarged from the center (3) and at the same time fade (4), the whole button is zoomed out from the center (5), it is very simple, the code is also.

For ease of invocation, I use a custom user control to do the icon is used Iconfont, so can be used anywhere, the first new "Animationbutton.xaml" user control, the foreground code will automatically generate the partial replacement:

<UserControl.Resources> <storyboard x:name= "Storyboard" > <!--overall reduction animation--<             DoubleAnimation from= "0.5" to= "1" duration= "00:00:0.5" storyboard.targetname= "ANGRIDSCALETRANSFORM3" storyboard.targetproperty= "ScaleY" > <DoubleAnimation.EasingFunction> <pow                Erease easingmode= "Easeinout"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <doubleanimation from= "0.5" to= " 1 "duration=" 00:00:0.5 "storyboard.targetname=" AnGridScaleTransform3 "storyboard.targetproperty=" S                              Calex "> <DoubleAnimation.EasingFunction> <powerease easingmode=" Easeinout " /> </DoubleAnimation.EasingFunction> &LT;/DOUBLEANIMATION&G                      T  <!--1--> <doubleanimation from= "1" to= "0" duration= "00:00:0.5" Storyboard.targetname= "an                    Grid "storyboard.targetproperty=" Opacity "> <DoubleAnimation.EasingFunction>                 <powerease easingmode= "Easeinout"/>  </DoubleAnimation.EasingFunction> </DoubleAnimation> <doubleanimation from= "0" to= "2" duration= "00:00:0.5" storyboard.targetname= "Angridscaletransform" Storyboard.targ etproperty= "ScaleY" > <DoubleAnimation.EasingFunction> <powerease easingmode = "Easeinout"/> </doubleanimati On.              easingfunction> </DoubleAnimation> <doubleanimation from= "0" to= "2" duration= "00:00:0.5" StoryboaRd. Targetname= "Angridscaletransform" storyboard.targetproperty= "ScaleX" > <doubleanimation.ea                singfunction> <powerease easingmode= "Easeinout"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <!--2--> <doub Leanimation from= "1" to= "0" duration= "00:00:0.5" storyboard.targetname= "Angrid2" Storyboard.target property= "Opacity" > <DoubleAnimation.EasingFunction> <powerease easingmode= "Easeinout"/> </doubleanimatio n.easingfunction> </DoubleAnimation> <doubleanimation from= "0" to= "1" duration= "00:00:0".                5 "storyboard.targetname=" AnGridScaleTransform2 "storyboard.targetproperty=" ScaleY "> <doubleanimatIon.                                                                       easingfunction> <powerease easingmode= "Easeinout"            /> </DoubleAnimation.EasingFunction> </DoubleAnimation> <doubleanimation from= "0" to= "1" duration= "00:00:0.5" Storyboard.targetname= "Angridscaletransform                    2 "storyboard.targetproperty=" ScaleX "> <DoubleAnimation.EasingFunction> <powerease easingmode= "Easeinout"/> </doubleanimation.easingfun ction> </DoubleAnimation> </Storyboard> </UserControl.Resources> <grid x:n Ame= "ABBG" tapped= "tstapped" > <Grid.RenderTransform> <scaletransform x:name= "Angridscaletran SFORM3 "centerx=" centery= "/> </Grid.RenderTransform> <!--<rectangle fill=" Red "x:name= "ANM" opacity= "0" Radiusx= "radiusy=" > <Rectangle.RenderTransform> <scaletransform x:name= "Angri Dscaletransform "centerx=" "centery="/> </Rectangle.RenderTransform> </rectangle>--&        Gt <grid canvas.zindex= "2" x:name= "Angrid" opacity= "1" width= "Auto" horizontalalignment= "Center" verticalalignment= " Center "cornerradius=" {Binding elementname=ab,path=actualwidth} "background=" {StaticResource Abcolora} "> &lt ;            grid.rendertransform> <scaletransform x:name= "Angridscaletransform" centerx= "CenterY="/>  </Grid.RenderTransform> </Grid> <grid canvas.zindex= "2" x:name= "Angrid2" opacity= "1" Width= "Auto" horizontalalignment= "center" verticalalignment= "center" cornerradius= "{Binding elementname=ab,path= ActualWidth} "background=" {StaticResource abcolorb} "> <Grid.RenderTransform> <scalet Ransform x:name= "angridscalETransform2 "centerx=" centery= "/> </Grid.RenderTransform> </Grid> &LT;TEXTB Lock X:name= "Textblock_icon" text= "{Binding Elementname=ab,path=icon}" style= "{StaticResource System_iconfont}" Horizontalalignment= "Center" verticalalignment= "center"/> </Grid>

Note that the modified Section 1 is

{Binding Elementname=ab,path=icon} Here binding a text data, is the Iconfont icon u code, in the way you like to change the line, and 2 is to change

{StaticResource Abcolora}

{StaticResource Abcolorb}
Refers to the resource dictionary, which is the color of the inner circle and the outer circle.

The background code deals with an event:

Responsible for setting the width and center points of the animated grid, respectively

private void Tstapped (object sender, Tappedroutedeventargs e) {angrid.opacity = 1; Angrid.width = this.            ActualWidth; Angrid.height = this.            ActualHeight; Angrid.cornerradius = new Cornerradius (this.            ActualWidth); Angridscaletransform.centerx = this.            ACTUALWIDTH/2; Angridscaletransform.centery = this.            ACTUALHEIGHT/2;                        angrid2.opacity = 1; Angrid2.width = this.            ActualWidth; Angrid2.height = this.            ActualHeight; Angrid2.cornerradius = new Cornerradius (this.            ActualWidth); Angridscaletransform2.centerx = this.            ACTUALWIDTH/2; Angridscaletransform2.centery = this.                                            ACTUALHEIGHT/2; Angridscaletransform3.centerx = this.            ACTUALWIDTH/2; Angridscaletransform3.centery = this.            ACTUALHEIGHT/2;         if (Animation = = 0) {} else {                  } 
Start animation storyboard.begin (); }

This.close ();

UWP-Make a relatively cool animated button/Button animation