首页 文章

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

提问于
浏览 次
0

我想要的嘎嘎声动画与这里的剪辑非常相似（但没有小小的结束）：https://www.youtube.com/watch?v=fmvS4mzWUkQ

我要为我的照片将函数绑定到 click() ，但是我更好的工具，请让我知道）...

我的想法是它看起来像：

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（）时停止跟踪（）函数吗？

最后，我觉得上面的代码只是跳转到每个角度框架，而不是以动画样式从一个角度旋转到下一个角度 . 有可能以某种方式加入这个吗？

javascript jquery css animation

1 回答

  • 0

    为了回答你的第二个问题，CSS内置了对动画的支持 - 它被称为transitions . 你只需要一个风格，如：

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

    当然，你可以从300ms开始，以便更容易看到平滑过渡，但是对于一个拨浪鼓效果，你会希望过渡相当快 .

    回复于

相关问题