使图像闪烁的最快方法->如此之快以至于您看不到它

问题描述

我正在寻找一种使图像闪烁得如此之快以至于我看不到它的方法（然后避免一些屏幕截图）：

Pipeline

但是我仍然看到眨眼，我想我不能低于10ms。 最初，我以为低于24 f / s不会引起注意，但事实并非如此。

我可以更改些什么以使其更快？ 甚至有可能吗？

最终目标是避免屏幕截图。

解决方法

监视器的标准刷新率为60Hz-每秒60次。这是一个硬件限制-即使具有完美的软件计时，也没有办法比这更频繁地显示帧-并且关注屏幕的人可以轻松地看到1/60秒的图像

您唯一的选择是使图像在每一帧中都出现和消失（这可以比setInterval和requestAnimationFrame来做得更精确-但对于那些仔细观察的人仍然可见）。

// Ensure browser is not busy
setTimeout(() => {
  window.requestAnimationFrame(() => {
    document.body.classList.toggle('blue');
    window.requestAnimationFrame(() => {
      document.body.classList.toggle('blue');
    });
  });
},1000);

.blue {
  background-color: blue;
}

监视器不可能在足够短的时间内显示某些东西，而这是无法感知的。

,

我能想到的最快的解决方案是CSS animate的opacity属性。 The opacity property is animated on the GPU. This means less load on the CPU and the mainthread.

#box {
width: 100px;
height: 100px;
position: relative;
background: red;
animation: 1ms steps(2,jump-none) 0s infinite running blink;

}

@keyframes blink {
  from { opacity: 0; }
  to   { opacity: 1; }
}

<div id="box">Secret Image</div>