java实现曲线运动_分层动画实现元素的曲线运动

在前端实现元素的动画需要用到transition或者animation搭配transform做位移的效果，但这只能实现元素沿着直线运动。如果想要让元素沿着曲线运动，则需要用到本文介绍的“分层动画”。

分层动画

大家还记得高中物理的“平抛运动”吗？运动轨迹为一条曲线，它可以看成是水平方向上的匀速运动和垂直方向上的自由落体的组合。更进一步，运动轨迹为曲线必须在水平与垂直两个方向上有不同的以时间为自变量的路径函数f(t)。

以此类推到前端，过渡与动画中的属性time-function就是以时间为自变量的路径函数f(t)，只要让元素在水平和垂直方向上有不同的time-function，就可实现曲线运动的效果。接着我们将使用分层动画法，让元素同时沿着不同方向运动。

分层动画法，就是将运动曲线分解为水平与垂直的运动，元素本身只执行一个方向的运动，其外层容器执行另一方向上的运动。

HTML结构如下：

让container做水平运动，dot做垂直运动，注意两者使用的缓动函数要是不同的，CSS代码如下：

.container {

/* ... 定位等 */

animation: horizontal 2s infinite ease-in;

}

.dot {

/* ... 定位等 */

animation: vertical 2s infinite ease;

}

@keyframes horizontal {

100% {

transform: translateX(150px);

}