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);
}
评论区