如何為 jquery 中的元素設置動畫

Question

我正在嘗試使用 jquery 為我的元素設置動畫。 代碼的目的是成為我服務器上的速度計我要制作動畫的元素稱為box3

注意：代碼對您而言可能與對我而言看起來不同。 代碼在 FiveM Server 上運行

 if (data.akcija == "spidometar") { $(".box-tekstic").html(Math.round(data.speed)) if (data.speed > 0) { $("#SpeedIndicator").text(data.speed); let multiplier = data.maxspeed * 0.1; let SpeedoLimit = data.maxspeed + multiplier; Speedometer = (data.speed / SpeedoLimit); } }

 .box-float{ position: relative; right: 5vh; top: 34vh; }.box { --v:calc( ((18/5) * var(--p) - 90)*1deg); position: absolute; width:180px; height:180px; transform: rotate(160deg); border-radius:50%; padding:25px; background: linear-gradient(var(--v), transparent 50%,#4c4c4e 0) 0/min(100%,(var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #4c4c4e 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; }.box2 { --v:calc( ((18/5) * var(--p) - 90)*1deg); position: absolute; width:170px; left: 0.4vh; top: 5; height:170px; transform: rotate(160deg); border-radius:50%; padding:12px; background: linear-gradient(var(--v), transparent 50%,#8a8989 0) 0/min(100%,(var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #8a8989 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; }.box3 { --v:calc( ((18/5) * var(--p) - 90)*1deg); position: absolute; left: 0.4vh; top: 5; width:170px; height:170px; transform: rotate(160deg); border-radius:50%; padding:12px; background: linear-gradient(var(--v), transparent 50%,#b7ff00 0) 0/min(100%,(var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #b7ff00 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; }

 <div class="box-float"> <div class="box" style="--p:68;"></div> <div class="box2" style="--p:68;"></div> <div class="box3" style="--p:50;"></div> </div>

Answer 1

我知道這不是直接回答你的問題。 但我強烈建議不要使用 JQuery。 它的使用壽命長且有用，但如今有許多新的、高效且不那么臃腫的庫可用。

對於用 JS 做 Animation，我建議查看https://animejs.com/

這是一個示例代碼筆https://codepen.io/borntofrappe/pen/qGozVM

const clockFace = document.querySelector('svg g.clock--face');
// add the twelve numbers by rotating, translating and then rotating back text elements
// ! add a zero to the numbers smaller than 10 through the utility function
for (let i = 0; i < 12; i += 1) {
  clockFace.innerHTML += `
    <text
        transform="rotate(${-90 + 30 * (i + 1)}) translate(34 0) rotate(${90 - 30 * (i + 1)})" >
        ${zeroPadded(i + 1)}
    </text>
  `;
}

如果你必須使用 jQuery 那么就使用類似的東西。

codepen.io/rpandrews/pen/zaxNyK

$('speedElement').css("transform", "rotate(" + speed_Angle_Variable + ")");

或者

// not sure what element is what, since not displaying properly with run code
$('.box-float .box').css("--p", speed_Angle_Variable);

 (function($) { function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } $(document).ready(function() { let data = { akcija: "spidometar", speed: 50, maxspeed: 68 } if (data.akcija == "spidometar") { $(".box-tekstic").html(Math.round(data.speed)) if (data.speed > 0) { $("#SpeedIndicator").text(data.speed); let multiplier = data.maxspeed * 0.1; let SpeedoLimit = data.maxspeed + multiplier; Speedometer = (data.speed / SpeedoLimit); } } function changeSpeed(target, data) { setTimeout(function() { if (target < data.speed) data.speed--; if (target > data.speed) data.speed++; $('.box-float.box3').css("--p", data.speed + ''); if (target.= data,speed) { changeSpeed(target; data ), } }, 100) } changeSpeed(25; data); }); })(jQuery);

 .box-float { position: relative; left: 5vh; top: 34vh; }.box { --v: calc( ((18/5) * var(--p) - 90)*1deg); position: absolute; width: 180px; height: 180px; transform: rotate(160deg); border-radius: 50%; padding: 25px; background: linear-gradient(var(--v), transparent 50%, #4c4c4e 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #4c4c4e 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }.box2 { --v: calc( ((18/5) * var(--p) - 90)*1deg); position: absolute; width: 194px; left: 1.6vh; top: 6px; height: 193px; transform: rotate(160deg); border-radius: 50%; padding: 12px; background: linear-gradient(var(--v), transparent 50%, #8a8989 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #8a8989 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }.box3 { --v: calc( ((18/5) * var(--p) - 90)*1deg); background: linear-gradient(var(--v), transparent 50%, #b7ff00 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #b7ff00 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box-float"> <div class="box" style="--p:68;"></div> <div class="box2" style="--p:68;"></div> <div class="box2 box3" style="--p:50;"></div> </div>