首页 > 代码库 > uwp - 做一个相对炫酷的动画按钮/按钮动画
uwp - 做一个相对炫酷的动画按钮/按钮动画
看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验。效果图:
动画分为几个部分,分别是:内圆从中心放大(1)并同时渐隐(2),外圆从中心放大(3)并同时渐隐(4),按钮整体从中心缩小放大(5),非常简单对吧,代码也是。
为了方便调用,我用一个自定义用户控件来做,图标是用iconfont,这样可以在任何地方使用,首先新建【AnimationButton.xaml】用户控件,前台代码将自动生成的部分替换:
<UserControl.Resources> <Storyboard x:Name="Storyboard"> <!--整体缩小动画--> <DoubleAnimation From="0.5" To="1" Duration="00:00:0.5" Storyboard.TargetName="AnGridScaleTransform3" Storyboard.TargetProperty="ScaleY"> <DoubleAnimation.EasingFunction> <PowerEase EasingMode="EaseInOut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation From="0.5" To="1" Duration="00:00:0.5" Storyboard.TargetName="AnGridScaleTransform3" Storyboard.TargetProperty="ScaleX"> <DoubleAnimation.EasingFunction> <PowerEase EasingMode="EaseInOut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> <!--1--> <DoubleAnimation From="1" To="0" Duration="00:00:0.5" Storyboard.TargetName="Angrid" 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.TargetProperty="ScaleY"> <DoubleAnimation.EasingFunction> <PowerEase EasingMode="EaseInOut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation From="0" To="2" Duration="00:00:0.5" Storyboard.TargetName="AnGridScaleTransform" Storyboard.TargetProperty="ScaleX"> <DoubleAnimation.EasingFunction> <PowerEase EasingMode="EaseInOut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> <!--2--> <DoubleAnimation From="1" To="0" Duration="00:00:0.5" Storyboard.TargetName="Angrid2" Storyboard.TargetProperty="Opacity"> <DoubleAnimation.EasingFunction> <PowerEase EasingMode="EaseInOut" /> </DoubleAnimation.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="AnGridScaleTransform2" Storyboard.TargetProperty="ScaleX"> <DoubleAnimation.EasingFunction> <PowerEase EasingMode="EaseInOut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </UserControl.Resources> <Grid x:Name="ABBg" Tapped="TsTapped"> <Grid.RenderTransform> <ScaleTransform x:Name="AnGridScaleTransform3" CenterX="25" CenterY="25"/> </Grid.RenderTransform> <!--<Rectangle Fill="Red" x:Name="anm" Opacity="0" RadiusX="100" RadiusY="100"> <Rectangle.RenderTransform> <ScaleTransform x:Name="AnGridScaleTransform" CenterX="25" CenterY="25"/> </Rectangle.RenderTransform> </Rectangle>--> <Grid Canvas.ZIndex="2" x:Name="Angrid" Opacity="1" Width="auto" HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="{Binding ElementName=ab,Path=ActualWidth}" Background="{StaticResource ABColorA}"> <Grid.RenderTransform> <ScaleTransform x:Name="AnGridScaleTransform" CenterX="25" CenterY="25"/> </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> <ScaleTransform x:Name="AnGridScaleTransform2" CenterX="25" CenterY="25"/> </Grid.RenderTransform> </Grid> <TextBlock x:Name="textblock_icon" Text="{Binding ElementName=ab,Path=Icon}" Style="{StaticResource system_iconfont}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid>
要注意修改的部分1是
{Binding ElementName=ab,Path=Icon}这里绑定了一个文本数据,就是iconfont图标u码,用你喜欢的方式改就行了,还有2是要改
{StaticResource ABColorA}
{StaticResource ABColorB}
引用了资源字典,就是内圆颜色和外圆的颜色而已。
后台代码就一个处理事件:
分别负责设置动画GRID的宽高和中心点
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 { }
//启动动画 Storyboard.Begin(); }
this.close();
uwp - 做一个相对炫酷的动画按钮/按钮动画
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。