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