[UWP]使用SpringAnimation创建有趣的动画
1. 什么是自然动画
最近用弹簧动画(SpringAnimation)做了两个番茄钟,关于弹簧动画官方文档已经介绍得够详细了,这篇文章就摘录一些官方文档核心内容。
在传统UI中,关键帧动画(KeyFrameAnimation)是描述运动的主要方式。关键帧为设计人员和开发人员提供了尽可能多的用于定义开始、结束和内插的方式。虽然这在许多情况下非常有用,但关键帧动画动态性不够,其运动没有适应性,在任何情况下都具有相同的外观。
在上图的另一端是物理引擎,它能提供更为鲜活和动态的动画,但设计人员和开发人员对它的控制力较少,因此很难集成到传统UI中。
自然动画(NaturalMotionAnimation) 旨在帮助衔接起这种分离的状况,实现控制力和运动之间的平衡,对于重要的动画元素(如开始/完成)具有控制力,又能保持运动的自然和动态。
2. 什么是弹簧动画
从 Fall Creators Update 开始UWP引入了一种新的动画:弹簧动画(SpringAnimation)。 相对于传统的贝塞尔曲线动画,弹簧的运动不稳定,这通常会为观察它的人带来有趣而令人愉快的情绪反应。它公开以下功能:
• 定义开始和结束值。
• 使用 InteractionTracker 定义 InitialVelocity 并绑定到输入。
• 定义特定于运动的属性(如弹簧的 DampingRatio。)
具体来说:
• DampingRatio – 表示在动画中使用的弹簧运动的阻尼级别。
• Period – 弹簧执行单次振荡所花费的时间。
• Final、Starting Value – 定义弹簧运动的开始和结束位置(如果未定义,则开始值和最终值将是当前值)。
• Initial Velocity – 运动的编程初始速度。
其中DampingRatio是最重要的一个属性
Damping Ratio Value | 描述 |
---|---|
DampingRatio = 0 | Undamped – 弹簧将振荡很长时间 |
0 < DampingRatio < 1 | Criticallydamped – 弹簧不会振荡 |
DampingRatio = 1 | Criticallydamped – 弹簧不会振荡 |
DampingRation > 1 | Overdamped – 弹簧将通过突然减速而不振荡快速到达其目的地 |
定义好这些属性之后,可以将弹簧动画的 NaturalMotionAnimation 传入 CompositionObject 的 StartAnimation 或 InteractionTracker InertiaModifier 的 Motion 属性。
3. 使用弹簧动画
使用弹簧动画的代码和一般合成动画很相似,只需要将动画改为名字带Spring
的函数:
var springAnimation = _compositor.CreateSpringVector3Animation();
springAnimation.DampingRatio = 0.5f;
springAnimation.Period = TimeSpan.FromMilliseconds(200);
springAnimation.FinalValue = new Vector3(offset, 0);
visual.StartAnimation(nameof(visual.Offset), springAnimation);
上面的代码定义了一个位移的Spring动画,效果如下:
将Period
改为50毫秒,DampingRatio
改为0.85f,效果如下:
(又到了用白色背景的季节,偶尔用用全白背景也不错。)
4. 其它组合
在对 Offset 和 Scale/Size 进行动画处理的常见情况下,Windows 设计团队为不同类型的弹簧的 DampingRatio 和 Period 推荐了以下值:
Property | Normal Spring | Dampened Spring | Less-Dampened Spring |
---|---|---|---|
Offset |
Damping Ratio = 0.8 Period = 50 ms |
Damping Ratio = 0.85 Period = 50 ms |
Damping Ratio = 0.65 Period = 60 ms |
Scale/Size |
Damping Ratio = 0.7 Period = 50 ms |
Damping Ratio = 0.8 Period = 50 ms |
Damping Ratio = 0.6 Period = 60 ms |
有兴趣的可以下载Xaml-Controls-Gallery试试这些组合:
5. 结语
上面的动画可以安装我的番茄钟应用试玩一下,安装地址:
一个番茄钟
弹簧动画真是好玩到停不下来。如果和用户的输入关联,运动还能够根据最终用户的速度相应调节适应,这部分在官方文档有详细例子,因为我的番茄钟应用没什么必要做这功能就没深入研究了,有兴趣可以看看官方文档。
6. 参考
弹簧动画 - Windows UWP applications Microsoft Docs
自然运动动画 - Windows UWP applications Microsoft Docs
NaturalMotionAnimation Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs
KeyFrameAnimation Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs
microsoft_Xaml-Controls-Gallery
7. 源码
SpringTextView.xaml.cs at master
KonosubaView.xaml.cs at master
[UWP]使用SpringAnimation创建有趣的动画相关推荐
- Windows Phone 8初学者开发—第22部分:用演示图板创建卷盘的动画
原文 Windows Phone 8初学者开发-第22部分:用演示图板创建卷盘的动画 第22部分: 用演示图板创建卷盘的动画 原文地址:http://channel9.msdn.com/Series/ ...
- CountUp.js – 让数字以非常有趣的动画方式显示
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- dw2017不显示动画_10个创建2017年动画视频的最佳工具
随着YouTube的Swift普及以及从家庭,教育或几乎任何领域的视频教程获得帮助的趋势,具有一些有用技能的人们经常制作培训或讲解视频 . 但是视频制作人没有意识到的是,除了您的技术水平外, 演示样式 ...
- [UWP]使用离散式关键帧播放动画
这篇文章介绍离散式关键帧,并使用它做些有趣的动画. 1. 什么是离散式关键帧 以DoubleAnimationUsingKeyFrames为例,它支持四种Double的关键帧,其中EasingDoub ...
- 如何使用React创建视频和动画
点击上方关注 TianTianUp,一起学习,天天进步 大家好,我是小弋. 分享的内容是: 如何使用 React Remotion 来创建视频的,如果你之前对视频很感兴趣的话,这篇文章可以参考. 正文 ...
- html如何添加加载动画效果,CSS3创建加载动画效果
加载动画在网页设计中是很常见的.用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站. 创建加载效果所需的 ...
- Maya创建科幻3D动画循环场景视频教程
Maya创建科幻3D动画循环场景视频教程 Skillshare – Create a Sci-Fi 3D Animation Loop in Autodesk Maya 持续时间3h 27m 包括项目 ...
- R语言gganimate包创建可视化gif动图、可视化动图:创建动态散点图动画基于transition_time函数、使用shadow_wake函数配置动画的渐变效果(gradual falloff)
R语言gganimate包创建可视化gif动图.可视化动图:创建动态散点图动画基于transition_time函数.使用shadow_wake函数配置动画的渐变效果(gradual falloff) ...
- 代码创建 WPF 旋转动画
原文:代码创建 WPF 旋转动画 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a771948524/article/details/9304001 ...
最新文章
- Vue 2.5中将迎来有关TypeScript的改进!
- java plus方法_Java中MyBatis Plus知识点总结
- TF之DNN:利用DNN【784→500→10】对MNIST手写数字图片识别数据集(TF自带函数下载)预测(98%)+案例理解DNN过程
- 算法函数_关于损失函数和优化算法,看这一篇就够了
- CentOS7.0使用Yum安装Nginx
- 002redis常用的数据结构
- 苹果5G手机因疫情影响 或将推迟至10月发布
- react 树形菜单_react使用antd组件递归实现左侧菜单导航树
- push跳转时隐藏tabBar
- 这几天关心加密的人很多
- 机器学习傻瓜的深入研究
- 客户关系管理系统中对客户及相关数据的导入导出分析处理
- 计算机中丢失无法开机密码,手把手教你“电脑开机密码忘记了,无法登录”的解决方法...
- C#单位档案信息管理系统源码
- oracle百度坐标系火星转换,标准坐标系与火星坐标系(高德)百度坐标系之间互转...
- Java实现 LeetCode 492 构造矩形
- EXCEL作曲线图,如何转成高质量的图片
- 勤哲EXCEL服务器财务进销存系统
- TCP FIN_WAIT2定时器
- 一个python停车管理系统_python简易停车系统
热门文章
- 新随笔--读书笔记《学会提问》:学习提出好问题的思维方法
- leetcode 5473. 灯泡开关 IV medium (智力题,O(n)思路详解)
- oppo手机怎么查计算机记录,oppo怎样查通话记录(oppo手机怎么查以前的通话记录)...
- 公司企业如何设计微信小程序?
- Java中的委托和继承(Delegation and Inheritance)
- Matlab学习笔记(1) - 符号变量及其运算
- php 7.3 新特性
- 我的window10中没有Windows Subsystem for Linux
- WIN10,配置adb环境
- Java new Date() 获取的时间不正确 【已解决】