Vue3 实现超级有趣的功能:数字增长动画!!

开发 前端
啥时候终止增长呢?其实很简单,那就是从开始增长开始,经过的时间大于 duration 时,就终止,这个时候说明动画必须要结束的~

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

背景

平时浏览一些跟数字有关的网页的时候,可能你会发现数字并不是直接从 0 变成 99999 的,这样会很生硬,而是会有一个从 0 增长到 99999 的动画效果,如下图

图片图片

那这个效果要怎么实现呢?其实挺简单的,也挺有趣的,继续往下看吧~

useNumberAnimation

我们创建一个文件 use-number-animation.ts 来写这个 hooks

确定参数

首先来确定这个函数需要接受什么参数:

  • from:起始数字
  • to:最终数字
  • duration:动画延迟间隔
  • onProgress:增长回调函数

图片图片

requestAnimationFrame

图片图片

可以看到数字是在不停变化的,所以我们需要有一个定时任务去让这个数字一直变化才行,那么用 setInterval 吗?不是的,显然用 requestAnimationFrame 性能会更佳,它会在浏览器下一帧重绘之前执行~

图片图片

增长速度

图片图片

可以看到数字在不断增长,那么既然是增长,就需要计算增长速度,增长速度要怎么算呢?

假设我要用3000ms的时间去从0增长到378291.668,那增长速度是不是 (378291.668 - 0) / 3000呢?

图片图片

由此我们可以知道增长速度 speed = (to - from) / duration;

图片

啥时候终止增长?

啥时候终止增长呢?其实很简单,那就是从开始增长开始,经过的时间大于 duration 时,就终止,这个时候说明动画必须要结束的~

最终代码

可以得出最终的代码为

图片图片

使用方式如下

图片

最终达到数字增长的动画效果~

图片 图片

责任编辑:武晓燕 来源: 前端之神
相关推荐

2021-12-02 05:50:35

Vue3 插件Vue应用

2024-01-23 09:15:33

Vue3组件拖拽组件内容编辑

2022-03-10 11:04:04

Vue3Canvas前端

2024-05-22 08:47:41

2021-12-01 08:11:44

Vue3 插件Vue应用

2024-02-27 08:27:18

元素拖拽Vue3拼图验证

2021-11-30 08:19:43

Vue3 插件Vue应用

2024-03-21 08:34:49

Vue3WebSocketHTTP

2023-11-28 09:03:59

Vue.jsJavaScript

2020-09-19 21:15:26

Composition

2024-02-01 09:10:04

页面引导工具Vue3

2022-06-26 00:00:02

Vue3响应式系统

2024-01-16 12:46:00

Vue3API开发

2024-08-13 09:26:07

2021-12-08 09:09:33

Vue 3 Computed Vue2

2024-01-08 08:50:19

Vue3级联菜单数据懒加载

2020-11-12 08:32:14

Vue3模板优化

2022-06-21 12:09:18

Vue差异

2024-01-03 08:20:40

2024-06-20 08:42:45

点赞
收藏

51CTO技术栈公众号