一、前言

　　最近在弄毕业设计（那时坑爹选了制作个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=""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>

当然需要注意的时候当播放界面没有呈现的时候需要暂停或停止旋转动画的运转，不然会造成性能负担。

四、最后的实现的效果　　最后山寨的效果就是这样了，虽然还有很多缺陷，但不要嫌弃我的毕业设计...

转载于:https://www.cnblogs.com/NEIL-X/p/5461934.html

UWP 动画系列之模仿网易云音乐动画相关推荐

  1. android 网易云音乐上滑动画,Android_Activity切换动画OverridePendingTransition（Cover 网易云音乐动画）...

    今天我想讲一个研究别人好动画的方法,并实现出来,我是网易云音乐的铁粉啊,很喜欢网易音乐那个开屏切换动画,还有点击一个页面然后返回的那个退出动画,所以呢,我把它实现出来了,还是蛮开心的,依然,我不讲那个 ...

  2. Qt之模仿网易云音乐 广告Banner

    文章目录 环境 代码 使用 效果 代码分享 环境 vs2013 + Qt5.6.2 代码 NetEasyBanner.h #ifndef NETEASYBANNER_H #define NETEASY ...

  3. 自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法二）

    环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...

  4. 自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法一）

    环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...

  5. 基于Qt模仿网易云音乐播放器

    基于Qt模仿网易云音乐界面,目前只实现了部分界面,后续继续完善改造. 部分代码: #ifndef MYSQLDATAMGR_H #define MYSQLDATAMGR_H#include <Q ...

  6. 模仿网易云音乐鲸云特效动效

    JinyunEffect 项目地址:tyhjh/JinyunEffect  简介: 模仿网易云音乐鲸云特效动效 更多:作者   提 Bug 标签: # Android 粒子特效--网易云鲸云特效 文 ...

  7. 微信小程序实战教程：模仿—网易云音乐（二）

    接上一篇:微信小程序实战教程:模仿-网易云音乐(一) wxml进行渲染: <!--歌词--> <view class="lyric-content" hidden ...

  8. duilib 模仿网易云音乐

    duilib 模仿网易云音乐 duilib+cef+html实现,目前只有前端简单框架 想要交流的,可以加qq:1021766106,或者微信:Official6-8一起交流技术栈

  9. 模仿网易云音乐黑胶唱片的交互实现

    今天在 .NET MAUI 中我们来实现这个交互效果,先来看看效果: 使用.NET MAU实现跨平台支持,本项目可运行于Android.iOS平台. 创建页面布局 项目模拟了网易云音乐的播放主界面,可 ...

  10. 模仿网易云音乐java桌面程序,瓣呀，一个模仿网易云音乐的豆瓣开源项目

    瓣呀 介绍: 优酷视频演示: 项目介绍:整体采用material design 风格,本人是网易云音乐的粉丝,所以界面模仿了网页云音乐,另外,项目中尽量使用了5.0之后的新控件. 项目整体采用mvp+ ...

最新文章

  1. 16.oauth2 + oidc 实现 client部分
  2. leetcode算法题--二叉树的最近公共祖先
  3. DPM2010恢复整个邮箱数据库
  4. 十六、去年写的pandas使用方法梳理，2020年5月13日整理
  5. P4570-[BJWC2011]元素【线性基,贪心】
  6. discuz NT!整合
  7. Android 系统性能优化（76）--- 如何抓取traceview？
  8. 箫 音之乐 生（声）之乐
  9. C++ std::function怎么用
  10. 基于FPGA的数字频率计设计
  11. 教你联想一体机win7系统安装教程
  12. mount挂载不上，不提示任何信息
  13. C++ and C# 从TLS握手二进制中获取SNI(服务器名称指示)域名
  14. 网页设计html怎么做五星红旗,用CSS做各国国旗方法
  15. 网络安全——无线局域网安全技术——802.11i
  16. Swi-Prolog借助XPCE可视化-显示图片
  17. adb流化显示功能_化工原理复试真题选择填空
  18. 【Linux】E: Release file for http://ports.ubuntu.comxxxxxxxxxxxxxInRelease is not valid关于时间设置的问题解决
  19. Decimal是什么类型
  20. unity塔防游戏怪物转向_萌宠打怪物红包福利版-萌宠打怪物红包版(可提现)下载v1.0...

热门文章

  1. ML之SHAP：机器学习可解释性之SHAP值之理解单样本单特征预测
  2. 计算机网络课程设计组建大型网吧局域网,计算机网络课程设计报告—组建大型网吧局域网.doc...
  3. oracle教程课件,Oracle入门教程(PPT课件)
  4. 关于 Google play 上架的缺失 64 位版本问题
  5. c语言语法基础知识,英语语法_英语语法基础知识
  6. 程序员须学计算机语言,新手程序员需要学什么编程语言
  7. pycharm2019+破解补丁
  8. C语言const用法详解
  9. python中count方法
  10. Uniapp|Vue-汉字转拼音|获取汉字的首字母js实现