侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

requestAnimationFrame

Dettan
2022-01-09 / 0 评论 / 0 点赞 / 106 阅读 / 205 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
requestAnimationFrame(functionName) 在下一帧绘制动画
要一直调用, 调用一次绘制一次。
优点
1.
贴合屏幕显示频率, 不计算多余帧
2.
页面不活跃时不绘制,节省性能和电量


// poly fill. requestAnimFrame方法的兜底补丁
window.requestAnimFrame = (function () {
    return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback, element) {
            window.setTimeout(callback, 1000 / 60)
        }
    )
})()

// 绘制鼠标悬浮区域区域
polyArea.drawHighlightAreas = function () {
    if (highlightingArea.length === 0) {
        polyArea.clear();
        if (editingArea)
            polyArea.drawPreviewArea(false);
        return;
    }
    polyArea.clear();
    if (polyArea.animation._lineWidthDirection)
        polyArea.animation._lineWidth += 0.04;
    else
        polyArea.animation._lineWidth -= 0.04;
    if (polyArea.animation._lineWidth > 6 || polyArea.animation._lineWidth < 2) polyArea.animation._lineWidthDirection = !polyArea.animation._lineWidthDirection;
    polyArea.animation._colorBase += 1;
    // 360 漂亮
    if (polyArea.animation._colorBase > 360) polyArea.animation._colorBase = 0;
    for (var i = 0; i < highlightingArea.length; i++) {
        // polyArea.drawArea(highlightingArea[i], 'clear');
        polyArea._drawingHighlightArea = highlightingArea[i];
        polyArea.drawHighlightArea(polyArea._drawingHighlightArea);
    }
    if (editingArea)
        polyArea.drawPreviewArea(false);
    requestAnimFrame(polyArea.drawHighlightAreas);
}
0

评论区