【JS】控制requestAnimationFrame执行速度

原创已于 2024-04-03 18:55:46 修改

· 1.4k 阅读

1 ·

版权

文章标签：

#javascript #前端 #开发语言

于 2024-04-03 11:11:07 首次发布

本文介绍如何在JavaScript中利用requestAnimationFrame实现动画，并控制其执行速度，通过设置帧率和动画逻辑，确保动画效果的平滑与可控。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

requestAnimationFrame执行速度很快，几乎每秒执行60次
无法控制requestAnimationFrame执行速度，但可以控制执行逻辑

思路

初始化一个时间戳
执行动画创建一个时间戳
动画时间戳 - 初始时间戳 = 本次动画距离上一次初始时间戳的时间间隔
大于规定毫秒执行代码逻辑
小于不做任何操作

码

let myStatu = 10000,
    anFinish = 0;


let updatedRaf = undefined,
    /**
     * ## fps Number 30   
     * - 输入控制的帧率，值越大间隔执行的时间越长
     */
    fps = 30,
    //初始化时间戳
    timer = new Date().getTime();

const onAnimationFrame = () => {
    /**
     * 动画停止条件判断
     */
    anFinish++
    if (anFinish > myStatu) return cancelAnimationFrame(updatedRaf)

    // 控制帧率 | 本次动画距离上一次初始时间戳的时间间隔 
    if (new Date().getTime() - timer > fps) {
        /**
         * !执行逻辑
         * 这里执行你要操作的内容，例如操作dom、修改响应式数据等...........  
         */
        //............ 
        //............ 
        //............ 
        //............ 
        //............ 
        //............ 
        console.log('My Name Is ShuaiGeiGe', anFinish);
        //刷新时间戳
        timer = new Date().getTime()
    }


    updatedRaf = requestAnimationFrame(onAnimationFrame);
};

// 开始动画
updatedRaf = requestAnimationFrame(onAnimationFrame);