css创建优雅自然的打开动画

浏览: 24 发布日期: 2016-12-13 分类: css3

前言

Google Material Design花了很大篇幅介绍了优雅自然的动画应该具备哪些特性。不仅仅是视觉上的观感,还能帮助提高用户界面的可用性,提升用户体验。官方文档讲的很细致,有很多典型视频示例,可惜缺少代码示例。接下来,用打开一个material surface动画的例子,来说说本人对material motion的认识。

一个最简单的打开动画,可能涉及移动和放大。在Material的世界中,斜向移动是不走直线的,运动速率是变化的,宽和高也不是同时变化的。按照Material motion的设计思想,可以列出打开动画应该具有的几个特点:

  • 动画持续时间(duration)与运动距离有关,但要在150ms-400ms之间,过快让人感觉跟不上,过慢让人感觉反应迟钝,长距离运动时间长些,短距离运动时间短些。

  • 在Material世界中,运动速率曲线分为四种,对于屏幕内的运动,使用标准的贝塞尔曲线。

  • Material元素宽高的变化是不一致的,在放大过程中,宽度变大的速度大于高度,缩小过程则相反。

  • Material元素移动的路径是凹弧线。

CSS代码

打开(放大)过程中宽度比高度先达到目标值,高比宽延迟开始变化;关闭过程(缩小)中,高度比宽度先达到目标值,宽比高延迟开始变化。CodePen: http://codepen.io/huangbuyi/p...

// Open
transition: width 275ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,
            height 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35m;
            
// Close
transition: width 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms,
            height 275ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,

移动过程中,除了水平和竖直移动,Material元素移动路径是凹弧线。向页面下方运动是,就像是弹珠从碗边沿滚到碗里,向页面上方运动,就像弹珠从碗里滚动碗边沿。不过速度是不一样的,运动速率根据Material中的标准运动曲线,曲线是加速启动,减速停止的。CodePen:http://codepen.io/huangbuyi/p...

// 向页面下方运动
transition: left 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms,
            top 305ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms;
            
// 向页面上方运动
transition: left 305ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,
            top 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms;      

需要注意的是,打开和关闭不要用同一套动画,向上移动和向下移动也不要用同一套动画,可以分别放在两个类中,通过改变类名,实现不同动画效果。最后,将两种运动的代码结合在一起就能创建优雅自然的打开动画啦。CodePen: http://codepen.io/huangbuyi/p...

返回顶部