uwp - 做一個相對炫酷的動畫按鈕/按鈕動畫
阿新 • • 發佈:2018-11-07
原文:
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();