javascript - 如何将 jQuery animate 函数转换为纯 JS

Question

我有这个简单的 jquery 逻辑，如何将其转换为纯 javascript？

此外，我必须在 React 和 Typescript 中使用此代码。

不幸的是，我不知道从哪里开始。任何帮助将不胜感激。

$('.counting').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {
    duration: 3000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }
  });  
});

我已经转换它直到开始动画功能..

let counting = document.querySelectorAll(".counting");
let countingArray = Array.prototype.slice.call(counting);

countingArray.forEach((el) => {
  let   countTo = el.getAttribute("data-count");

//start animate...

我在 https://codepen.io/shvvffle/pen/JRALqG 中引用了这段代码

Answer 1

给你的动画功能:

function animate(render, from, to, duration, timeFx) {
  let startTime = performance.now();
  requestAnimationFrame(function step(time) {
    let pTime = (time - startTime) / duration;
    if (pTime > 1) pTime = 1;
    render(from + (to - from) * timeFx(pTime));
    if (pTime < 1) {
      requestAnimationFrame(step);
    }
  });
}

• render 是您希望用来更新新值的回调函数；
• from 和to 是动画的初始值和目标值；
• duration 是以毫秒为单位的动画持续时间；
• timeFx是从[0, 1]到[0, 1]的计时函数。

您可以将其用作:

countingArray.forEach((el) => {
  let countTo = el.getAttribute("data-count");
    animate(function(newValue) {
        el.innerText = Math.floor(newValue);
    }, 0, countTo, 3000, x => x);
});