Question

我正在寻找使用纯CSS动画逼真的物体动画。具体做法是：

坠落/弹跳
振动弦（简谐运动/正弦曲线）
通过液体（从静止到最终速度）落下的东西

据我所知，CSS中的平滑动画目前只能通过使用立方Bézier曲线来实现：

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）的最佳Bézier曲线？如果任何人对任何其他类型的物理运动有任何意见，那也会很棒。

如果需要的话，我可以用眼球，但我希望有人可能会这样做。

Answer 1

好的，所以我一直在玩这个，并且已经完成了振动。正如我所料，我必须拼凑一堆Bézier曲线才能使它工作：

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;
    }
}

几个笔记：

这是从一个边缘开始，而不是从振动的中间开始。如果您需要从中间开始，可以使用animation-delay来补偿它。
您可以通过将它们全部乘以某个常数来向上/向下缩放距离，它应该可以正常工作。
此处给出的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;
    }
}

更多笔记：

物体的形状和液体的粘度会影响到这里的东西，所以我只是将“平均”粘度和球形物体作为“一刀切”。
要使用此功能，只需将动画的时间设置为您需要的任何内容，然后按比例缩放top值以匹配您希望对象落下的距离。现在，它的距离是800px，因此，例如，如果你想让它落到1600px的距离，你可以将所有关键帧的所有top值乘以2。

用于坠落，振动等的CSS动画

1 个答案: