Question

我在使用Chrome浏览器和Chromecast中的大图像进行不透明度转换时出现问题。

他们工作，但他们“衣衫褴褛”。我的意思是我在过渡期间在图像中获得水平噪声线。

我看到这项工作，例如，在Chromecast主屏幕上，因此可以干净利落地完成。我正在用我认为简单明了的方式做这件事，但显然有一个我没见过的伎俩。

以下是演示此问题的简单页面的完整HTML：

 <!DOCTYPE html>
 <html>
      <head>
           <meta charset="ISO-8859-1">
           <style>
                .opaque {
                    opacity: 1.0;
                    transition: opacity 1s linear;
                }

                .transparent {
                    opacity: 0.0;
                    transition: opacity 1s linear;
                }
           </style>
           <title>Opacity transition test</title>
      </head>
      <body>
           <script>
               function fadeIn() {
                   console.log("::fadeIn()");
                   image = document.getElementById("image");
                   console.log("image is: " + image);
                   image.className = "opaque";
               };
               function fadeOut() {
                   console.log("::fadeOut()");
                   image = document.getElementById("image");
                   console.log("image is: " + image);
                   image.className = "transparent";
               };
           </script>
           <button onclick="fadeIn()">Fade In</button>
           &nbsp;
           <button onclick="fadeOut()">Fade Out</button>
           <br />
           <br />
           <img id="image" class="opaque" src="image.jpg" />
      </body>
 </html>

在结尾的第三行中，将“image.jpg”替换为相当大的图像（720 x 1280）的URL。或者在尝试运行时将名为“image.jpg”的相当大的图像放在与HTML相同的目录中。

我尝试了很多变化，但是在Chrome浏览器中运行时，或者在我正在开发的Chromecast自定义接收器中使用此技术时，它们都会显示噪音线。

如果您在浏览器中尝试此操作，请务必使用Chrome查看，因为在我尝试过的任何其他浏览器中都不会发生这种情况！： - （

任何人都可以提供任何帮助，我们将不胜感激。

提前致谢，

Jim Renkel

Answer 1

对于幻灯片应用程序，我正在做这些事情（在chromecast上）。首先，我使用的是-webkit-transition，而不仅仅是转换，所以我的css有以下

-webkit-transition: opacity 4s ease-in;

你需要花时间看看对你有意义的事情。我在幻灯片应用程序中做的另一件事是我有两个<img/>标签，一个是可见的，另一个是隐藏的;我更新了隐藏的那个，当它完成时，我将前面的那个转换为100透明，使用我显示的转换，隐藏到可见的那个并保持这样，以便图像的转换和加载不会干扰。这提供了一个相对不错的过渡。

目前的chromecast设备缺乏某些优化;很多CSS转换都是在软件中完成的。此外，目前还缺少双缓冲;其中很多都在待办事项清单上，我们会让他们更好地制作这个小巧的设备。

不透明度转换在chrome和chromecast中使用大图像

1 个答案: