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

前言

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...