UWP 動畫系列之模仿網易雲音樂動畫

一、前言

　　最近在弄畢業設計（那時坑爹選了制作個UWP商店的APP），一個人弄得煩躁，在這里記錄一些在做畢業設計時的學習過程。由於我的畢業設計是做一個音樂播放器，那么Windows商店上優秀的軟件當然是網易雲音樂了，為了不用自己去設計一些界面，所以山寨之路走起吧。

 

二、模仿網易雲音樂動畫之播放頁面切換

　　直接觀察網易雲音樂的播放界面切換動圖，可以看得出播放界面的變換中心是左小角，通過縮小和放大實現播放界面的切換，同時播放界面是覆蓋了原界面上。

　　模仿這個動畫用xaml很容易就可以實現出來，下面一步步實現。

1、首先准備播放面板和主界面，布局類似網易雲界面，xaml如下：

<Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <SplitView x:Name="SplitView"   
                                   DisplayMode="CompactInline" 
                                   IsPaneOpen="{TemplateBinding IsLeftPaneContentOpen}"
                                   CompactPaneLength="40" 
                                   OpenPaneLength="200">
                            <SplitView.Pane>
                                <Grid >
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <Grid x:Name="HambegerGrid"
                                          Margin="10,10"
                                          Background="Transparent">
                                        <TextBlock FontFamily="Segoe MDL2 Assets" 
                                                   Text="&#xE700;"
                                                   FontSize="20"
                                                   Foreground="{TemplateBinding Foreground}"/>
                                    </Grid>
                                    <ContentPresenter x:Name="LeftPaneContentPresenter" 
                                                      HorizontalAlignment="Stretch"
                                                      VerticalAlignment="Stretch"
                                                     Grid.Row="1">
                                    </ContentPresenter>
                                </Grid>
                            </SplitView.Pane>
                            <SplitView.Content>
                                <ContentPresenter x:Name="ContentPresenter">
                                    <ContentPresenter.RenderTransform>
                                        <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                            </SplitView.Content>

                        </SplitView>

                        <ContentPresenter x:Name="SplitViewSwapContentPresenter"
                                          Visibility="Collapsed"
                                          VerticalAlignment="Stretch"
                                          HorizontalAlignment="Stretch"
                                          RenderTransformOrigin="0,1">
                            <ContentPresenter.RenderTransform>
                                <CompositeTransform ScaleX="0" ScaleY="0"/>
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                        <ContentPresenter x:Name="FooterContentPresenter"
                                          Grid.Row="1"
                                          VerticalAlignment="Bottom"
                                          HorizontalAlignment="Stretch" />

注：SplitView是主頁面，SplitViewSwapContentPresenter是播放界面，FooterContentPresenter是底部播放面板

 

2、設置播放面板界面的變換中心為左下角，在xaml的SplitViewSwapContentPresenter上即可以設置，如下

 RenderTransformOrigin="0,1"

 

3、制作播放面板界面放大縮小動畫。

　　利用Blend設置這一步十分容易方便。生成的xaml代碼如下，

  　　　　　　　　　　　　　　　　　　<Storyboard x:Name="SplitViewSwapContentIn">
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SplitViewSwapContentPresenter"
                                                               Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                            Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:0.4" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="SplitViewSwapContentPresenter" >
                                    <DoubleAnimation.EasingFunction>
                                        <QuadraticEase EasingMode="EaseIn"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <DoubleAnimation Duration="0:0:0.4" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="SplitViewSwapContentPresenter" >
                                    <DoubleAnimation.EasingFunction>
                                        <QuadraticEase EasingMode="EaseIn"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                            <Storyboard x:Name="SplitViewSwapContentOut">
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SplitViewSwapContentPresenter"
                                                               Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.4"
                                                            Value="Collapsed" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="SplitViewSwapContentPresenter" >
                                    <DoubleAnimation.EasingFunction>
                                        <QuadraticEase EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="SplitViewSwapContentPresenter" >
                                    <DoubleAnimation.EasingFunction>
                                        <QuadraticEase EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>

SplitViewSwapContentIn是放大動畫，在keytime=0時，使播放面板呈現，且在keytime=0.4s的時候，使SplitViewSwapContent的(UIElement.RenderTransform).(CompositeTransform.ScaleX)和

屬性和(UIElement.RenderTransform).(CompositeTransform.ScaleY)屬性值變為1，這樣設置會使播放面板當動畫觸發后0.4s過程中面板從小點變換到原來大小。SplitViewSwapContentOut與上面類似。


4、觸發動畫
接下來的就是什么時刻觸發動畫的問題了，首先在后台代碼獲得動畫_splitViewSwapContentIn和_splitViewSwapContentOut，然后控制兩個動畫即可以控制播放面板的呈現與否。

        void ShowSwapContent()
        {
            _splitViewSwapContentIn.Begin();
        }

        void HideSwapContent()
        {
            _splitViewSwapContentOut.Begin();
        }

 

三、模仿網易雲音樂動畫之播放頁面的旋轉動畫


首先准備一類似的圓，xaml如下

 <Ellipse x:Name="ellipse" 
                             Width="250"
                             Height="250"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Center"
                             Margin="75,45,75,45" 
                             RenderTransformOrigin="0.5,0.5">
                        <Ellipse.RenderTransform>
                            <CompositeTransform/>
                        </Ellipse.RenderTransform>
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="{x:Bind CurrentTrack.PictureUrl, Mode=OneWay}" Stretch="Fill"/>
                        </Ellipse.Fill>
                    </Ellipse>

然后設置動畫，xaml如下：

        <Storyboard x:Name="EllStoryboard" RepeatBehavior="Forever">
            <DoubleAnimation Duration="0:0:20" To="360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
        </Storyboard>

當然需要注意的時候當播放界面沒有呈現的時候需要暫停或停止旋轉動畫的運轉，不然會造成性能負擔。

四、最后的實現的效果
　　
最后山寨的效果就是這樣了，雖然還有很多缺陷，但不要嫌棄我的畢業設計...