如何制作背景滤镜动画? [英] How to animate backdrop-filter?

问题描述

在同一个组件上使用背景幕滤镜和过渡效果时，我遇到了帧速率较低的问题.

I faced the issue with low fps while using backdrop-filter and transition on the same component.

.modal-background {
   // some styles
   backdrop-filter: blur(2px)
   transition: all .15s linear
}

就这么简单.动画出现故障:(但是，如果我注释掉背景滤镜线，情况会越来越好.

As simple as that. The animation is glitchy :( But if I comment out backdrop-filter line, things are getting better.

推荐答案

通过对 backdrop-filter 的 opacity()像这样:

.bg {
  transition: backdrop-filter 0.2s;
  backdrop-filter: blur(4px) opacity(0);
}

.bg.show {
  backdrop-filter: blur(4px) opacity(1);
}

在Chromium中执行此操作时，我看到了一些较小的图形故障.但从好的方面来说，我还发现这种方法比对(非背景) filter 属性的 blur()进行动画处理的替代建议具有更高的性能.在响应度和图形准确性之间需要权衡.

I have seen some minor graphical glitches when doing this in Chromium. But on the plus side, I've also found this approach to be much more performant than the alternative suggestion of animating a (non-backdrop) filter property's blur(). There's a trade-off to be made between responsiveness and graphical accuracy.

这篇关于如何制作背景滤镜动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！