当前位置：首页 > news >正文

js加密之延伸requestAnimationFrame

news 来源：原创 2025/9/10 1:41:06

简言

上篇文章有提到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的divconst box = document.getElementById('box');// 初始化位置 let pos = 0;function animate() {pos += 2;// 起始水平位置为2pxbox.style.left = pos + 'px';// 只要位置没超出窗口右边界就继续执行 -50 是因为方块长度50，不让方块跑出屏幕。if (pos < window.innerWidth - 50) {requestAnimationFrame(animate);}}requestAnimationFrame(animate);
</script>
</body>
</html>

运行以上demo，你就会看到一个红色方块平滑的移向浏览器最右侧。

结论

ok,那么使用方法都明白了，简单粗暴，那么他究竟多久执行一次呢？我想这个可以留到下一篇文章了，哈哈。不是我啰嗦，我认为这个调用频率确实需要另外起一篇。我不喜欢一篇文章太长，个人认为内容太多，难以消化。

勇敢的尝试

js加密是否可以将这个功能结合起来达到意想不到的效果呢？

下下下篇文章拭目以待…

多提一嘴，js加密固然重要。但是要好好保存自己的源代码哦~

js加密后源代码丢失可以找博主进行人工js解密恢复成源代码。注意一定要遵纪守法哦~

简言