0 0 0

数字增涨过度动画js代码

MNB UID:231
4天前 48

 数字叠加动画是一种在视觉界面中动态展示数字变化或叠加特效的技术,广泛应用于数据可视化、UI设计、视频制作、游戏交互等领域。 

点我查看演示

 代码解释:duration是动画时间,单位s。form是起始值  0。to是结果值 100。on是回调

#调用方法:  1s内从0增涨到100
animation(1000,0,100,function(value){
  return  "把value的值打印出来"
})

#js代码
function animation(duration, from, to, on) {
  let value = from;
  const speed = (to - from) / duration;
  const start = Date.now();
  function _run() {
    const t = Date.now() - start;
    if (t >= duration) {
      value = to;
      on(value);
      return;
    }
    value = from + t * speed;
    on(value);
    requestAnimationFrame(_run);
  }
  _run();
}

 

最新回复 (0)

    暂无评论

请先登录后发表评论!

返回
请先登录后发表评论!