时间戳

首页 > 解决方案 > 在跟踪鼠标位置的同时编写旋转的嘎嘎声

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

问题描述

我想要的嘎嘎作响的动画与这里的剪辑非常相似（但没有一点结束）：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() 函数？

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

标签： javascriptjquerycssanimation

解决方案

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

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

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

推荐阅读