如何在jquery中设置元素的动画

Question

我正在尝试使用jquery为我的元素设置动画。该代码的目的是作为我的服务器上的速度表我试图制作动画的元素被称为box3

注意：代码对你来说可能和对我来说不一样。该代码正在FiveM服务器上运行

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制作动画，我建议查看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>