CSS 揭秘(8)--缓动效果

Posted by liveipool on February 9, 2017

缓动效果

给过渡和动画加上缓动效果是一种让界面更真实、生动的表现手法。比如这个小球落下弹地的例子

若没深入研究,我们可能就想用一个简单的动画来解决问题:

@keyframes bounce {
	60%, 80%, to { transform: translateY(350px); }
	70% { transform: translateY(250px); }
	90% { transform: translateY(300px); }
}

.ball {
	/*样式尺寸*/
	animation: 3s;
}

但实际上要是这么写代码,我们会发现,实际上小球的运动一直都是持续加速的,看起来并不自然。
产生这个结果的原因在于,它的调数函数在所有关键帧的衔接中都是一样的。
所有过渡和动画都是跟一条曲线有关的,这条曲线指定了动画过程在整段时间中是如何推进的。
这个曲线是通过三次贝塞尔曲线来指定的,在CSS中的属性为animation-timing-function。
42.3.png

animation-timing-function

  • animation-timing-function: value;
  • animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:
  • linear 动画从头到尾的速度是相同的。
  • ease 默认。动画以低速开始,然后加快,在结束前变慢。(默认值)
  • ease-in 动画以低速开始。
  • ease-out 动画以低速结束。
  • ease-in-out 动画以低速开始和结束。
  • cubic-bezier(n,n,n,n) 可能的值是从 0 到 1 的数值。允许我们指定自定义的调数函数。

五个给出的值的曲线:
42.1.png
42.2.png

最终的小球弹地代码:

@keyframes bounce {
	60%, 80%, to {
		transform: translateY(400px);
		animation-timing-function: ease;
	}
	70% { transform: translateY(300px); }
	90% { transform: translateY(360px); }
}

.ball {
	width: 0; height: 0; padding: 1.5em;
	border-radius: 50%;
	margin: auto;
	background: red radial-gradient(at 30% 30%, #fdd, red);
	animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards;
}

body {
	background: linear-gradient(skyblue, white 450px, yellowgreen 0);
	min-height: 100vh;
}