用UWP模仿网易云音乐的动画

1. 前言

        众所周知，网易云音乐是一种装机量特别大，而且设计不错的应用，我们尝试去模仿一下他的应用效果。

2. 正文

        直接观察网易云音乐的播放界面切换动图，可以看得出播放界面的变换中心是左小角，通过缩小和放大实现播放界面的切换，同时播放界面是覆盖了原界面上。

        

        模仿这个动画用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=""
                                                   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" />

2、设置播放面板界面的变换中心为左下角，在xaml的SplitViewSwapContentPresenter上即可以设置，如下

 RenderTransformOrigin="0,1"

3、制作播放面板界面放大缩小动画。

这个可以利用blend动画

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

4. 触发逻辑

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

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

5. 主要用到的控件

1.ContentPresenter

2. SplitView

3. CompositeTransform

4. Storyboard

6. 注释

SplitViewSwapContentIn是放大动画，在keytime=0时，使播放面板呈现，且在keytime=0.4s的时候，使SplitViewSwapContent的(UIElement.RenderTransform).(CompositeTransform.ScaleX)

属性和(UIElement.RenderTransform).(CompositeTransform.ScaleY)属性值变为1，这样设置会使播放面板当动画触发后0.4s过程中面板从小点变换到原来大小。SplitViewSwapContentOut与上面类似。

7. more

更多细节可以查看

https://docs.microsoft.com/en-us/windows/uwp

另外值得一提的是，Visual Studio 2017 Blend真的是个好东西

其他的能模仿的厉害的特性：

1. 听歌识曲功能。 
在使用听歌识曲功能时，要打开本地的录音设备等才能获得音源。使用Enable device capabilities下的功能就能实现打开需要的设备。 

https://docs.microsoft.com/en-us/windows/uwp/devices-sensors/enable-device-capabilities 

2. 音乐播放功能

https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/media-playback

3. 与系统媒体传输控制集成

https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/integrate-with-systemmediatransportcontrols

4. Audio graph

这个功能网易云没有，但是我觉得十分酷

https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/audio-graphs