新版MATERIAL DESIGN 官方动效指南(二)
继上一篇,本文继续第二部分,从动效的速度、动态持续时间、通用持续时间和缓动曲线4个部分,教你创建平滑一致的Material Design 动效。再系统的干货都比不上官方的动效指南,西瓜就在这,赶紧来捡。
Material Design的动效设计是响应式的,自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。
速度
某个元素移动或者改变状态的时候,运动速度应该足够快,使用户不用等待。出现频率高的转场动画应该短一点,而有些转场动画要慢一点,来保证用户能理解它。
正确:动效应该足够快,让用户不用等待动画完成。
错误:不要做无意义的拖延。
动态持续时间
应该调整每个持续时间,来适应不同的移动距离、每个元素的速度、和表面的变化。而不是所有动画都用同样的持续时间。物体离开屏幕应该是一个很短的持续时间,这样用户就会减少对他的注意力。
当物体需要移动较大位移,或有很巨大的变化时,应该占用更长的持续时间。
当物体移动较小距离,或者有很微小的变化时,应该减少持续时间,这样就不会使动效看起来很慢很迟钝。
通用持续时间
移动设备
移动设备上,动画通常会持续300ms左右:
大而复杂的全屏移动设备上,通常需要更长的持续时间,375ms左右。
物体进入屏幕的持续时间大概是225ms。
物体离开屏幕的持续时间大概是195ms。
动画超过400ms会显得慢而拖沓。
大屏幕移动设备
在大屏幕移动设备上,同一时间段内,物体移动较长的距离速度比移动较短的距离更快。越大的屏幕物体移动的持续时间应该更长,这样动效不会显得太快。
平板设备
平板设备上动效的持续时间应该比移动设备长30%左右。移动设备上300ms的持续时间,在平板设备上应该是390ms左右。
可穿戴设备
可穿戴设备上的动效时间应该比移动设备上短30%左右。移动设备上300ms的持续时间,在可穿戴设备上应该是210ms左右。
动效元素在大屏幕设备上会移动很大的距离,动画可能会比小屏幕设备上看起来略为放缓。
桌面
桌面动画应该比移动设备上的动画更快、更简单。通常只会持续150ms到200ms。
由于桌面动画可能不太引人注目,他们的响应应该更敏捷、更迅速。
复杂的网页动画肯能会导致掉帧(除非他们专门为GPU加速)。更短的持续时间可以让动效快速完成,减少注意。
桌面动效明显看起来更快。
自然的缓动曲线
缓动曲线可以对物体的速度、透明度、大小产生效果。
加速和减速变化应该是应该是平滑的贯穿于动画的持续时间之中的,使动效看起来不会那么机械化。(红色无缓动,蓝色有缓动)
当加速和减速不对称时,动效会看起来更自然,更令人愉悦。(红色对称,蓝色不对称)
缓动曲线
缓动曲线可能会在不同的平台或者软件上有所不同。不同平台上的缓动曲线准则会涉及到普通缓动曲线、减速缓动曲线、加速缓动曲线,和急转缓动曲线。
标准缓动曲线
这是最常见的缓动曲线。物体可以根据在屏幕上的位置迅速加速或缓慢减速。这个曲线适用于增加或减少元素,和其他属性的变化。
减速曲线(“缓出”)
物体全速进入进入屏幕时,然后慢慢减速静止在屏幕上的某个点。
在减速过程中,物体可能从很小变到正常大小,也可能从透明变到不透明。有时候,当物体透明进入屏幕,可能从稍大的大小缩小到正常的大小。
加速曲线(“缓进”)
物体离开屏幕是以全速离开,他们离开屏幕时不会减速。
急转曲线
急转曲线被用于随时离开屏幕随时回到屏幕的情况。
物体可能会在屏幕上某一点迅速加速,然后以一个对称的曲线快速减速运动到屏幕外的某一点。减速会稍快于标准曲线,因为他们不会尊循于一个准确的路径到屏幕外的某一点。物体可能会随时回到原点。
新版MATERIAL DESIGN 官方动效指南(二)的更多相关文章
- 新版MATERIAL DESIGN 官方动效指南(一)
Google 刚发布了新版Material Design 官方动效指南,全文包括三个部分:为什么说动效很重要?如何制作优秀的Material Design动效及转场动画,动效的意义.新鲜热辣收好不谢! ...
- 新版MATERIAL DESIGN 官方动效指南(三)
运动 Material design 的动效会被类似真实世界中的力的影响,类似重力. 物体在屏幕内的运动 屏幕内物体在两点之间的运动,是沿着一条自然.凹陷的弧线.屏幕上所有的运动都可以使用标准曲线. ...
- Android Material Design控件使用(二)——FloatButton TextInputEditText TextInputLayout 按钮和输入框
FloatingActionButton 1. 使用FloatingActionButton的情形 FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App ...
- Android Material Design控件学习(二)——NavigationView的学习和使用
前言 上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件--NavigationView. 正如其名,NavigationView,导航View.一般 ...
- flutter学习之二Material Design设计规范
前言: 最近在自学flutter跨平台开发,从学习的过程来看真心感觉不是那么一件特别容易的事.不但要了解语法规则, 还要知晓常用控件,和一些扩展性的外延知识,所以套一句古人的话“路漫漫其修远矣,无将上 ...
- 【Android】进入Material Design时代
由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...
- 进入Material Design时代
------------------------------------------------------------------------------ GitHub:lightSky 微博: ...
- Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果
前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...
- Android(Lollipop/5.0) Material Design(二) 入门指南
Material Design系列 Android(Lollipop/5.0)Material Design(一) 简介 Android(Lollipop/5.0)Material Design(二) ...
随机推荐
- For oracle databases, if the top showing the oracle database, then oracle process is using the top c
Note 805586.1 Troubleshooting Session Administration (Doc ID 805586.1)Note 822527.1 How To Find ...
- (一二七)NSURLSession的基本用法 下载与数据获取
简介 NSURLSession是苹果官方提供的一系列网络接口库,使用他们可以轻松实现下载和数据获取等任务.在上一篇文章中,我们介绍了使用NSURLConnection下载文件和断点续传的功能,实现起来 ...
- windows与linux的文件夹共享
公司配备了一台性能还算不错的电脑,不过是台式机.我在上面装了ubuntu,但是我的代码工作目录全部都在我自己的win7笔记本上.有时程序开多了就容易卡,于是想到用装ubuntu的台式机来访问我win7 ...
- JQuery纵向下拉菜单实现心得
jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...
- (八十九)用AutoLayout实现动画和Label根据内容自动调整
[AutoLayout动画] 对于storyboard每个约束,都可以像控件那样通过拖线的方式来建立和代码的连接. 约束是一个对象,通过这个对象的constant属性可以修改约束的点数. 在修改之后, ...
- UNIX网络编程——并发服务器(TCP)
在迭代服务器中,服务器只能处理一个客户端的请求,如何同时服务多个客户端呢?在未讲到select/poll/epoll等高级IO之前,比较老土的办法是使用fork来实现. 网络服务器通常用fork来同时 ...
- Gradle笔记——关于Gradle 1.12
到目前为止,Gradle已经出到2.1版本了,从1.12这个版本开始看,主要是因为我使用Gradle是Android开发所需要.公司里面是采用Android Studio来进行Android项目的开发 ...
- pig强制转换(字符到整数):首位0怎么处理,‘01’到1的转化,
pig支持的类型转换(cast) Pig Latin supports casts as shown in this table. from / to bag tuple map int long f ...
- Dynamics CRM2013 去除界面顶部黄色的CRM For Outlook条框
Dynamics CRM2013中每次打开系统页面上方都会有个黄条看着很是烦人,效果如下图 庆幸的是系统提供了关闭的开关,设置-管理-系统设置,把"设置CRM For Outlook消息是否 ...
- 基于java自身技术实现消息方式的系统间通信
这篇博客基本照搬了分布式java应用基础与实践一书的内容 java自带的远程调用分两种一种是rmi,一种是webservice 我们先看rmi(remote method invoke)# 使用rmi ...