創建“搖頭”影片jQuery-有解無憂

在我看來，搖頭效果將是一個“U”形影片形狀，莖稍短。

我嘗試使用各種弧/半圓來創建搖頭效果，但沒有任何作業正常。

由于它是 SVG，我必須使用帶有 translate 的轉換。我也在使用animejs，但我也看不到在該庫上實作此目的的方法。jQuery影片步驟似乎最簡單？

這是我希望達到的效果：

創建“搖頭”影片jQuery

使用此代碼：

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();

我能用令人毛骨悚然的臉達到的最好結果是：

創建“搖頭”影片jQuery

我的方法正確嗎？我會假設“U”形影片將內置到animejs或jquery中。我在網上找不到太多。我不是數學家

uj5u.com熱心網友回復：

只有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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/407393.html

標籤：

上一篇：如何制作移動影片，可以將影像從當前位置移動到用戶單擊的位置

下一篇：在懸停Bootstrap5上交換div元素