《Motion Design for iOS》(十二)
2023-03-15 23:21:04 时间
## 自然的动作
标准的动画时间曲线是好用的,但还可以更好,而且它们不足以让你的用户觉得对你的界面感到惊奇和愉悦,因为它们仍然是机器人的感觉,而不是如人类或受外力驱动的物体般完全流动性和自然。如果我们想要让动画变得真正的自然,我们就需要去观察自然世界以及真实的物体的行为,这样我们就可以模仿其动作。这就是软件中迷人、自然的动画的秘密本质:让你的物体动作符合物理法则,这样你界面中的元素就仿佛有了质量和动量,就如在屏幕上滑动或就在你的用户手指下方一般。
所以自然的动作时怎样的呢?符合物理法则的移动例子是什么?好吧,就如下面这个一般。
弹簧的阻尼
一个挂着方块的弹簧。它就如你所期望弹簧上的方块一样移动,因为你之前已经看过或体验过类似的弹簧运动很多次了。它的运动和之前说的简单动画时间曲线有很大的不同。让我们看一下弹簧上物体的动画曲线。
阻尼的震荡运动
这个曲线表示了挂在弹簧上的物体的运动,有很多的属性(例如拉力、摩擦力和阻力)都影响了其动作。如果你观察上图中的深蓝色曲线,它表示欠阻尼的系统,意味着物体在到达最终稳定位置前会来回震荡(反弹)。这就是让动画如上面的例子一般感觉像弹簧上挂着的方块一样需要的动画曲线类型。这种欠阻尼的弹簧动作可以让动画变得有弹性,很多app都在界面动画中采用了这种类型的动作。比如说,Facebook Paper几乎对所有界面动作使用了这种弹簧动作。
上图中中间的蓝色曲线也显示了一个欠阻尼的系统(在稳定前反弹过最终点),但它是一个反弹较少的更加平滑的动作类型。这会导致一个更精细的感觉,而过度反弹的动画会让你的界面变得太丰富或热情。
红色曲线描述了一个很少反弹而且只在到达最终位置前越过一点点的动作。如果物体一点都不震荡和反弹,只是缓慢地到达最终位置,这种弹簧就叫欠阻尼。
相关文章
- 面试问了分布式锁,你会答吗?
- Docker正式将Docker Distribution贡献给CNCF
- 面试被问线程池,真香
- 图解:volatile 和原子类的异同
- 只用VMware开虚拟机?来了解一下更强大KVM虚拟化技术
- 三种Kubernetes资源类型的使用指南
- VS Code 中的 Vim 操作
- Redis 6 中的多线程是如何实现的 !
- 2021年前端发展预测
- 图解一致性哈希算法
- 基于IDEA插件开发和字节码插桩技术,实现研发交付质量自动分析
- 数据湖治理:优势、挑战和入门
- NPOI操作Excel之三解析Excel
- 面试官常问的垃圾回收器,这次全搞懂
- Tubes响应性数据系统的设计与原理
- Docker 的底层原理,了解它只需要 5分钟!
- VS Code Go 语言扩展将默认启用 gopls
- 10 个 GitHub 上超火和超好看的管理后台模版,后台管理项目有着落了
- Kubernetes如何支撑边缘计算平台
- NPOI操作Excel之二创建Excel并设置样式