Question

我想要的嘎嘎作响的动画非常类似于此处的此剪辑（但没有一点结束）：https://www.youtube.com/watch?v=fmvS4mzWUkQ

我要为我的图片将功能绑定到click()上，但是我在弄清楚如何用JS甚至纯CSS制作动画时遇到了麻烦（如果有更好的工具可以这样做），请让我知道）...

我的想法是看起来像这样：

function rattleHead() {
    $("#woodsprite-head").css("transform", "rotate(" + (baseAngle + 45) + "deg)");
    $("#woodsprite-head").css("transform", "rotate(" + (baseAngle - 35) + "deg)");
    $("#woodsprite-head").css("transform", "rotate(" + (baseAngle + 20) + "deg)");
    $("#woodsprite-head").css("transform", "rotate(" + (baseAngle - 5) + "deg)");
    $("#woodsprite-head").css("transform", "rotate(" + (baseAngle + 0) + "deg)");
};

仅出于复杂性的考虑，该图像当前已经在积极旋转以跟随鼠标在屏幕上的移动（我们从上方将其称为baseAngle）。那么，在执行嘎嘎声（）时，我是否需要停止tracking（）函数？

最后，我觉得上面的代码只是跳到每个角度框架，而不是以动画样式从一个角度旋转到另一个角度。是否有可能以某种方式将其合并？

Answer 1

要回答第二个问题，CSS内置了对动画的支持-称为transitions。您只需要一种样式，例如：

<style>
  #woodsprite-head {
    transition: 30ms linear all;
  }
</style>

当然，您可以从300毫秒开始，以便更轻松地看到平滑的过渡，但是要获得震撼的效果，您将希望过渡相当快。

编写旋转嘎嘎作响的动画，同时跟踪鼠标位置

1 个答案: