使用 RequestAnimationFrame 创建淡入效果

Question

我知道这可以通过使用 CSS 过渡来完成，但是这个 2 秒的淡入练习必须使用 requestAnimationFrame 来完成，下面是我的代码，它显示了图片但没有淡入效果，而且渲染过程也不流畅。 你能告诉我哪里错了以及如何改正吗？ 非常感谢。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { height: 100vh; } #picture { background-image: url("p1.jpg"); background-repeat: no-repeat; background-position: center; background-size: 400px 400px; width: 80%; margin: auto; height: 80%; } </style> </head> <body> <div id="picture"></div> <script> var start = null; var abc = document.getElementById("picture") var opacity = 0; function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start; opacity = Number(window.getComputedStyle(abc).getPropertyValue("opacity")); if (opacity < 1) { opacity = opacity + 0.1; abc.style.opacity = opacity; } if (progress < 2000) { window.requestAnimationFrame(step); } } window.requestAnimationFrame(step); </script> </body> </html>

Answer 1

您的脚本从不将abc元素的不透明度设置为 0，因此您在step函数中读取的不透明度将始终为 1。

所以在初始化部分添加这一行：

abc.style.opacity = 0;

这显示了动画，但是当您在每一步中添加 0.1 时，淡入淡出将在 10 帧内完成，这非常快。

这是您的代码的改编版本：

 function animateOpacity(abc, duration) { let start; function step(timestamp) { if (!start) start = timestamp; const opacity = (timestamp - start) / duration; abc.style.opacity = opacity; if (opacity >= 1) return; window.requestAnimationFrame(step); } window.requestAnimationFrame(step); } const abc = document.getElementById("picture"); abc.style.opacity = 0; window.addEventListener("load", () => animateOpacity(abc, 3000));

 body { height: 100vh; } #picture { background-image: url("https://i.stack.imgur.com/440u9.png"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 80%; margin: auto; height: 80%; }

 <div id="picture"></div>

Answer 2

你有两个问题。

---

首先是你没有在 CSS 中设置opacity ，所以当你调用opacity = Number(window.getComputedStyle(abc).getPropertyValue("opacity")); 它从1开始，永远不会改变。

将opacity: 0添加到#picture {规则。

---

window.requestAnimationFrame将根据浏览器的繁忙程度以不同的时间间隔调用。

这就是为什么你有一个progress计算，它告诉你“开始”和“2 秒后”之间的距离。

您对opacity的计算完全忽略了progress 。 每次获得新帧时，它只会增加0.1 。

由于帧通常非常频繁，因此您可以在 10 帧中从0到1帧，这非常快。

您需要将opacity计算为progress的一部分，而不是使其完全独立。