手游工作笔记1:合适的动效时长——从APP交互动效看游戏交互动效。
200-500MS(毫秒)。
任何小于100MS的动画人类很难感知到,大于1秒会有延迟感,不够流畅。
在手机上,谷歌设计规范建议动画的持续时间在200-300MS为宜。在平板电脑上,这个时间会稍微长30%,大约在400-450MS。在更大的屏幕上,元素的变化路径会更长。在苹果手表上,持续时间又缩短了30%,大概在150-200MS,因为小屏幕上元素变化的位置路径会更短。
在网页上又是另一种方式。因为习惯快速浏览和在不同状态下相互切换。所以,在网页上的动画要比在手机上的持续时间减少2倍多,在150-200MS之间。一旦超过,就有延迟感。
但此效果不适合装饰性动画,为了吸引用户注意装饰性动画可以延长。
无论在什么平台,动画的持续时间不仅跟它的移动距离有关,还跟它本身的大小有关系。小的元素或者变化不大的动画应该移动的更快,而大的元素或者复杂的元素持续时间稍长一点比较合理。
在大小相同的对象中,移动距离最短的物体应该最先停止。小的对象与大的对象相比较,小对象移动速度显得更慢,因为会产生更大的偏移量。
回避回弹效果。避免使用弹跳效果,因为它会分散注意力。
列表出现的间隔应该在20-25MS之间。
加速曲线应用在物体移出界面时。
减速曲线让动画更自然。
缓入缓出是标准曲线。
按谷歌规范,建议最好是用一些非对称曲线来使得物体运动的更加自然真实。动画的结尾会比动画的开头更加需要去强调,这样的结果是加速时间要小于减速时间。
缓入缓出的动画常被用在界面中对象从一个位置移动到另一个位置时。在这种情况下,动画的目的是为了不让人有过多不必要的关注。
开始动画不等于结束动画,应该分别去设置,比如在抽屉导航效果中,打开是一个减速动画但关闭时却是一个标准曲线动画。另外,根据谷歌设计规范,物体出现的动画持续时间应该略长,以吸引用户更多注意力。
程序员的Alpha曲线应用在手游里可以完美实现缓动、缓出以及加速度,在UI上可以不用SPINE骨骼动画。
https://my.oschina.net/Jacedy/blog/301361
技术实现详解