创建“摇头”动画jQuery

Question

在我看来，摇头效果会是一个“U”形动画形状，茎稍短。

我尝试使用各种圆弧/半圆来创建摇头效果，但没有任何效果。

由于它是 SVG，我必须使用带有 translate 的转换。我也在使用animejs，但我也看不到在该库上实现这一目标的方法。 jQuery动画步骤貌似最简单？

这是我想要达到的效果：

[![在此处输入图片描述][1]][1]

使用此代码：

function loopBobble() {

    var end = 180;

    $({
        counter: 0
    }).animate({
        counter: end
    },{
        duration: 1000,
        easing: "swing",
        step: function(t, fx) {
        
            var a = t / 60; // from degrees to radians
            var x = Math.cos(a) * 10;
            var y = Math.sin(a) * 10;
            $('#bobble').attr('style', 'transform: translateX(' + x + 'px) translateY(' + y + 'px);');

            if (t == end) {
                loopBobble();
            }
        }
    });
}
loopBobble();

我能用令人毛骨悚然的脸达到的最好结果是：

[![在此处输入图片描述][2]][2]

我的方法正确吗？我会假设“U”形动画将内置到animejs或jquery中。我在网上找不到太多。我不是数学家

Answer 1

只有 css 怎么样？

.head {
  background-color: #FA0;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  left: 0px;
  top: 0px;
  position: absolute;
  animation-name: xOffset;
  animation-duration: 1s;
  animation:
    xOffset 1s ease-in-out infinite,
    yOffset .5s ease-in-out infinite;
}

@keyframes xOffset {
  50% { left: 50px; }
  100% { left: 0px; }
}

@keyframes yOffset {
  50% { top: 25px; }
  100% { top: 0px; }
}

<div class="head"></div>

transform: translate-版本

您必须在 csv 中添加一个包装器，以在 x 和 y 上应用单独的缓动时间。否则，使用 transform 无法实现不同的缓动时间，因为变换是作为一个整体进行动画处理的。

.head {
  background-color: #FA0;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation-name: xOffset;
  animation-duration: 1s;
  animation: xOffset 1s ease-in-out infinite;
}

.wrapper {
  animation: yOffset .5s ease-in-out infinite;
}

@keyframes xOffset {
  50% { transform: translateX(50px); }
  100% { transform: translateX(0px); }
}

@keyframes yOffset {
  50% { transform: translateY(25px); }
  100% { transform: translateY(0px); }
}

<div class="wrapper">
  <div class="head"></div>
</div>