创建 "bobblehead" 个动画 jquery

Question

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

我试过使用各种 arcs/semi-circles 来创建摇头娃娃效果，但没有任何效果。

由于它是 SVG，所以我必须使用 transform 和 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>

创建 "bobblehead" 个动画 jquery

Create "bobblehead" animation jquery

javascript

jquery

anime.js