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
positeTransform
4.Storyboard
6. 注释
SplitViewSwapContentIn是放大动画，在keytime=0时，使播放面板呈现，且在keytime=0.4s的时候，使SplitViewSwapContent的(UIElement.RenderTransform).(CompositeTransform.ScaleX)
属性和(UIElement.RenderTransform).(CompositeTransform.ScaleY)属性值变为1，这样设置会使播放面板当动画触发后0.4s过程中面板从小点变换到原来大小。SplitViewSwapContentOut与上面类似。
7. more
更多细节可以查看
/en-us/windows/uwp
另外值得一提的是，Visual Studio Blend真的是个好东西
其他的能模仿的厉害的特性：
1. 听歌识曲功能。
在使用听歌识曲功能时，要打开本地的录音设备等才能获得音源。使用Enable device capabilities下的功能就能实现打开需要的设备。
/en-us/windows/uwp/devices-sensors/enable-device-capabilities
2. 音乐播放功能
/en-us/windows/uwp/audio-video-camera/media-playback
3.与系统媒体传输控制集成
/en-us/windows/uwp/audio-video-camera/integrate-with-systemmediatransportcontrols
4. Audio graph
这个功能网易云没有，但是我觉得十分酷
/en-us/windows/uwp/audio-video-camera/audio-graphs
如果觉得《用UWP模仿网易云音乐的动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
