js加密之延伸requestAnimationFrame

用户9525115140155
235 阅读4分钟

简言

上篇文章有提到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 ，只不过他调用的频率是和你的刷新率挂钩的。

作用

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

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

直接上案例

  1. 基本用法：

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

  2. 停止动画： 你可以使用 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>

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

结论

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

勇敢的尝试

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

下下下篇文章拭目以待...

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

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

avatar
文章
阅读
粉丝