js加密之延伸requestAnimationFrame

news2025/3/4 2:04:10

简言

上篇文章有提到requestAnimationFrame,只是随笔带过。这篇文章就着重研究一下requestAnimationFrame的运用，以及实际作用。还有关于在js加密技术中的落地实现可行性。

功能说明

小声说一下,做开发的同学一定要学会翻官方文档,我这里直接引用一段官方介绍。

window.requestAnimationFrame() 方法会告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。

对回调函数的调用频率通常与显示器的刷新率相匹配。虽然 75hz、120hz 和 144hz 也被广泛使用，但是最常见的刷新率还是 60hz（每秒 60 个周期/帧）。为了提高性能和电池寿命，大多数浏览器都会暂停在后台选项卡或者隐藏的iframe中运行的requestAnimationFrame()。

[参数]

```
callback
```
- 该函数会在下一次重绘更新你的动画时被调用到。这个回调函数只会传递一个参数：一个 [DOMHighResTimeStamp] 参数，用于表示上一帧渲染的结束时间（基于 [time origin] 的毫秒数）
- 时间戳是一个以毫秒为单位的十进制数字，最小精度为 1 毫秒。对于 Window 对象（而非 workers）来说，它等同于 [document.timeline.currentTime]。此时间戳在同一代理上（所有同源的 window，更重要的是同源的 iframe）运行的所有窗口之间共享——它允许在多个 requestAnimationFrame 回调函数中执行同步动画。此时间戳值也近似于在回调函数开始时调用 [performance.now()]，但它们永远都不会是相同的值。
- 当 requestAnimationFrame() 队列中的多个回调开始在同一帧中触发时，它们都会收到相同的时间戳，即便在计算前一个回调函数工作量时这一帧的时间已经过去。

[返回值]

请求 ID 是一个 long 类型整数值，是在回调列表里的唯一标识符。这是一个非零值，但你不能对该值做任何其他假设。你可以将此值传递给 [window.cancelAnimationFrame()] 函数以取消该刷新回调请求。

我翻译版的

如果官方文档看着费劲，那就看我写的。

requestAnimationFrame 是一个用于在浏览器中执行动画的 API。它允许你在下一次浏览器重绘之前调用指定的回调函数，从而实现平滑的动画效果。与 setTimeout 或 setInterval 相比，requestAnimationFrame 更加高效，因为它会根据浏览器的刷新率自动调整回调的执行时机，避免不必要的重绘和计算。

说白就可以理解成 setTimeout 或 setInterval ，只不过他调用的频率是和你的刷新率挂钩的。

作用

高效性：requestAnimationFrame 会根据浏览器的刷新率（通常是 60Hz，即每 16.67ms 一次）来调用回调函数，确保动画的流畅性。
节能：当页面处于不可见状态（如切换到其他标签页）时，requestAnimationFrame 会自动暂停，减少 CPU 和 GPU 的消耗。
自动同步：它会自动与浏览器的重绘周期同步，避免掉帧和卡顿

人教人教不会，事教人一次就会

直接上案例

基本用法：

function animate() {
    // 动画逻辑
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

停止动画：
你可以使用 cancelAnimationFrame 来停止动画。

let animationId;

function animate() {
    // 动画逻辑
    animationId = requestAnimationFrame(animate);
}

function stopAnimation() {
    cancelAnimationFrame(animationId);
}

上动画

自己拿去跑一下哈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>requestAnimationFrame Demo</title>
    <style>
        #box {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    // 获取id为box的div
    const box = document.getElementById('box');
    // 初始化位置 
    let pos = 0;

    function animate() {
        pos += 2;
        // 起始水平位置为2px
        box.style.left = pos + 'px';

        // 只要位置没超出窗口右边界就继续执行 -50 是因为方块长度50，不让方块跑出屏幕。
        if (pos < window.innerWidth - 50) {
            requestAnimationFrame(animate);
        }
    }

    requestAnimationFrame(animate);
</script>
</body>
</html>