Page 230 - css揭秘

transform: translateY(400px);
animation-timing-function: ease-out;
}
70% { transform: translateY(300px); }
90% { transform: translateY(360px); }
}

.ball {
/* 其余样式写在这里 */
animation: bounce 3s ease-in;
}

如果你试着运行这段代码，就会发现，虽然这个改动很小，但明显让回
弹效果变得真实起来。不过，这五种内置的缓动曲线明显不够用。如果我们
可以按照自己的需要来选择任意的调速函数，那应该可以实现更加真实的效
果。举个例子，如果这个回弹动画是用来模拟自由落体的，那么一个更高的
加速度（类似 ease 所提供的效果）应该可以产生出一种更加真实的效果。
不过，如果没有对应的关键字可用，要如何得到 ease 的反向版本呢？
所有这五种曲线都是通过（三次）贝塞尔曲线来指定的。我们可以在任
意一种矢量绘图软件（比如 Adobe Illustrator）中处理贝塞尔曲线。这种曲线
由一定数量的路径片断所组成，各个片断的每一端都可以由一个手柄来控制 图 8-4
曲率（这些手柄通常也被称作控制锚点）。一条复杂的曲线可能包含很多个 用三次贝塞尔曲线画出的螺旋线，
片断，这些片断的端点彼此相连构成了整条曲线（参见图 8-4）。但 CSS 的 标示出了各个节点和控制锚点
调速函数都是只有一个片断的贝塞尔曲线，因此每个调速函数只有两个控制
锚点。举个例子，你可以在图 8-5 中看到默认调速函数（ease）以及它的控
制锚点。
作为对上述五种预定义曲线的补充，CSS 提供了一个 cubic-bezier()
函数，允许我们指定自定义的调速函数。它接受四个参数，分别代表两个控
制锚点的坐标值，我们通过这两个控制锚点来指定想要的贝塞尔曲线。语
法形式是这样的：cubic-bezier(x1, y1, x2, y2)，其中 (x , y ) 表示第一
1
1
个控制锚点的坐标，而 (x , y ) 是第二个。曲线片断的两个端点分别固定在
2
2
(0,0) 和 (1,1)，前者是整个过渡的起点（时间进度为零，动画进度为零）， 动画进度
后者是终点（时间进度为 100%，动画进度为 100%）。 时间
图 8-5
请注意，固定曲线的两个端点并不是唯一的限制。另外，两个控制锚点
调速函数 ease 的节点和控制锚点
的 x 值都被限制在 [0, 1] 区间内（即我们无法把手柄在水平方向上移出这个
图形范围）。这个限制并不是随便加上的。由于我们（目前）无法穿越时间，
因此无法指定这样一个过渡：在被触发之前就开始了，或者在时间用完之后
仍然没有结束。这里真正的限制是节点的数量：曲线只能有两个节点，这明
显限制了它的能力，但也让 cubic-bezier() 函数易于使用。尽管这些限制
确实存在，但 cubic-bezier() 所能创造出的可能性已经相当可观了。

从逻辑上来说，只要我们把控制锚点的水平坐标和垂直坐标互换，就
可以得到任何调速函数的反向版本。这一点对关键字也是适用的；上述所

42 缓动效果 199

඀ࠡ JOEC