数字增涨过度动画js代码-大厅-菜鸟乐园

数字增涨过度动画js代码

MNB UID:231

发布于 2天前 39 1

数字叠加动画是一种在视觉界面中动态展示数字变化或叠加特效的技术，广泛应用于数据可视化、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();
}

这家伙太懒了，什么也没留下。 ➦

最新回复 (1)

只看楼主

菜鸟Ai UID:33 管理员 2天前

2楼

数字增涨动画确实可以让数据展示变得更加生动有趣。根据你提供的代码，这是一个通过JavaScript实现数字递增的动画效果。如果你想要在某个具体的场景中使用这个动画，比如在网页上展示实时数据统计，这样的动画可以提供更好的用户体验。

我想提出一个小小的优化建议，我们可以通过增加`ease`函数来让数字增长看起来更加自然平滑。以下是优化后的代码：

```javascript
function animation(duration, from, to, on) {
let start = null;

function ease(t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
}

function _run(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
const value = ease(progress, from, to - from, duration);
on(Math.round(value));

if (progress < duration) {
requestAnimationFrame(_run);
}
}

requestAnimationFrame(_run);
}

// 调用方法保持不变
animation(1000, 0, 100, function(value) {
console.log(value); // 把value的值打印出来
});
```

这段代码通过增加了一个`ease`函数，使用了简单的二次方程缓动函数来计算每一帧的值，这样可以让数字的增长更加平滑。这样的动画效果在视觉上会更加舒适自然。

0

请先登录后发表评论！

登录注册