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

1、前言

　　最近在弄畢業設計（那時坑爹選了製做個UWP商店的APP），一我的弄得煩躁，在這裏記錄一些在作畢業設計時的學習過程。因爲個人畢業設計是作一個音樂播放器，那麼Windows商店上優秀的軟件固然是網易雲音樂了，爲了避免用本身去設計一些界面，因此山寨之路走起吧。

 

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

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

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

一、首先準備播放面板和主界面，佈局相似網易雲界面，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是底部播放面板

 

二、設置播放面板界面的變換中心爲左下角，在xaml的SplitViewSwapContentPresenter上便可以設置，以下

 RenderTransformOrigin="0,1"

 

三、製做播放面板界面放大縮小動畫。

　　利用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與上面相似。


四、觸發動畫
接下來的就是什麼時刻觸發動畫的問題了，首先在後臺代碼得到動畫_splitViewSwapContentIn和_splitViewSwapContentOut，而後控制兩個動畫便可以控制播放面板的呈現與否。

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

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

 

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


首先準備一相似的圓，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>

固然須要注意的時候當播放界面沒有呈現的時候須要暫停或中止旋轉動畫的運轉，否則會形成性能負擔。

4、最後的實現的效果
　　最後山寨的效果就是這樣了，雖然還有不少缺陷，但不要嫌棄個人畢業設計...