在跟踪鼠标位置的同时编写旋转的嘎嘎声答案

【问题标题】：Writing a rotational rattling animation while simultaneously tracking mouse position在跟踪鼠标位置的同时编写旋转的嘎嘎声
【发布时间】：2018-12-10 14:34:22
【问题描述】：

我想要的嘎嘎作响的动画与这里的剪辑非常相似（但没有小结尾）：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）。那么，我是否需要在我的 rattle() 执行时停止 tracking() 函数？

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

【问题讨论】：

你正在按辐射度旋转（相对于度数）将rad更改为deg
@Ahmad 不错，已更新
3.141592 rad = 180 度

标签： javascript jquery css animation

【解决方案1】：

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

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

当然，您可以从 300 毫秒开始，以便更容易看到平滑过渡，但要获得嘎嘎声效果，您会希望过渡相当快。

【讨论】：