uwp - 做一个相对炫酷的动画按钮/按钮动画 - JavaScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

原文: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> 
<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>

<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>

<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();