python数字滚动效果_纯js 使用canvas制作数字滚动效果

mac 上有啥好用的gif截图软件吗? kap不知道为啥后面有个黑点....

因为都在一个文件里, 代码比较长

两种移动的思想有所不同

单个数字移动, 从一个数字移动到一个数字, 每次加一, 时间比较长, 从0-->1000, 就需要1000次

全部同时移动, 最终停留在指定的数字上面, 随机绘制, 移动所有位置, 但是每个位置的速度不一样, 高位的慢一点, 0-->1000 是可以控制时长的, 只要最后数字正确就行

基本上就是使用canvas,根据不同的进度, 将数字绘制在不同的位置, 使用了raf和promise, 如果后面需要拆出去的话, 也会比较方便一点

Document

const randomInt = (min = 0, max = 10) => {

return (Math.random() * (max - min)) | 0

}

const clamp = (n, min, max) => {

if (n < min) return min

if (n > max) return max

return n

}

const getNumberList = (n, len) => {

let ans = []

for (let i = 0; i < len; i++) {

const j = n % 10

ans.push(j)

n -= j