1

我正在寻找使用纯 CSS 为真实移动的对象设置动画。具体来说：

  1. 掉落/弹跳的东西
  2. 一根振动的弦（简单的谐波运动/正弦）
  3. 某物从流体中落下（从静止到最终速度）

据我所知，CSS 中的平滑动画目前只能通过使用三次贝塞尔曲线来实现：

https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

我发现下落可以完全由 建模cubic-bezier(0.33, 0, 0.66, 0.33)，与cubic-bezier(0.33, 0.66, 0.66, 1)上弹一起可以在这里看到：

http://jsfiddle.net/BYossarian/Frg74/2/

有谁知道（2）和/或（3）的最佳贝塞尔曲线？如果有人对任何其他类型的物理运动有任何意见，那也太好了。

如果需要，我可以目测，但我希望有人可能已经有了。

4

1 回答 1

2

好的，所以我一直在玩这个，并完成了振动。正如我所料，我必须拼凑一堆贝塞尔曲线才能使其工作：

http://jsfiddle.net/BYossarian/wrK44/6/ （仅限 webkit 前缀）

红球通过CSS动画，灰色框使用JS动画，供参考。单击容器以启动/停止。

动画的 CSS（不带前缀）是：

.vibrate {
    animation: shm 2s infinite alternate;
}

@keyframes shm {
    from {
        margin-left:0px;
        animation-timing-function: cubic-bezier(0.25, 0.01, 0.55, 0.16);
    }
    25% {
        margin-left:29.3px;
        animation-timing-function: cubic-bezier(0.52, 0.44, 0.47, 0.44);
    }
    50% {
        margin-left:100px;
        animation-timing-function: cubic-bezier(0.53, 0.56, 0.48, 0.56);
    }
    75% {
        margin-left:170.7px;
        animation-timing-function: cubic-bezier(0.45, 0.84, 0.75, 0.99);
    }
    to {
        margin-left:200px;
    }
}

几点注意事项：

  1. 这从一个边缘开始，而不是从振动的中间开始。如果你需要从中间开始，你可以使用animation-delay来抵消它。
  2. 您可以通过将它们全部乘以某个常数来放大/缩小距离，它应该可以工作。
  3. 这里animation-duration给出的是小球从一个边移动到另一个边的时间（回程被设置覆盖animation-direction: alternate;），所以上面的物体做一个完整的循环所用的时间是4s。

更新：好的，所以我终于找到时间进行流畅的运动：

http://jsfiddle.net/S7WRp/ （同样，仅限 webkit 前缀）

点击开始。第一个球是通过 JS 动画的。其次是CSS动画。第三个和第四个都以恒定速度（其他球的最终速度）移动并用作参考，因此您可以看到前两个球在开始时加速，然后在结束时达到最终速度。

CSS：

@keyframes fluidDrop {
    from {
        top: 0px;
        animation-timing-function: cubic-bezier(0.7, 0.22, 0.725, 0.61);
    }
    13.33% {
        top: 31.79px;
        animation-timing-function: cubic-bezier(0.16, 0.1875, 0.24, 0.094);
    }
    23.66% {
        top: 88.3px;
        animation-timing-function: cubic-bezier(0.234, 0.15, 0.88, 0.85);
    }
    65% {
        top: 441.5px;
        animation-timing-function: linear;
    }
    to {
        top: 800px;
    }
}

更多注释：

  1. 物体的形状和流体的粘度会影响这里的东西，所以我只选择了“平均”粘度和球形物体，因为“一刀切”。
  2. 要使用它，只需将动画的时间设置为您需要的任何时间，然后top按比例缩放值以匹配您希望对象下落的距离。现在，它下降了 800px 的距离，因此，例如，如果您希望它下降 1600px 的距离，您可以将top所有关键帧的所有值乘以 2。
于 2013-09-21T17:25:54.473 回答