Question

我昨天在现场就地编写了一些代码并且一切正常。今天没有对代码库进行任何更改它已经停止工作。

＆＃13;

let $feTurb = $('#feturbulence');

        let timeline = new TimelineMax({
            repeat: -1,
            yoyo: true
        });

        timeline.add(TweenMax.to($feTurb[0], 20, {
            onUpdate: function () {
                var bfX = this.progress() * 0.005 + 0.020,
                    bfY = this.progress() * 0.05 + 0.1,
                    bfStr = bfX.toString() + ' ' + bfY.toString();
                $feTurb[0].setAttribute('baseFrequency', bfStr);
            }
        }), 0);

＆＃13;

body {
  background: #000;
}
.ripple {
        min-height: 380px;
        max-width: 850px;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        filter: url('#turbulence');
        position: relative;
        z-index: 6;
        padding-top: 20px;
        background-image: url('https://i.imgur.com/4QFPZrY.png');
  background-size: contain;
  background-repeat: no-repeat;
}

svg {
      position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="ripple"></div>
                        <svg xlmns="http://www.w3.org/2000/svg" version="1.1">
                          <filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
                            <feTurbulence id="feturbulence" type="fractalNoise" numOctaves="1" seed="2" baseFrequency="0.01968375 0.1468375"></feTurbulence>
                            <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="25" in="SourceGraphic"></feDisplacementMap>
                          </filter>
                        </svg>

＆＃13;

https://codepen.io/webbist/pen/zWGNRZ

此代码中的工作代码示例

我不知道为什么现场现在不能正常工作。我一整天都在调试以解决这个问题的路线，我即将放弃并尝试以其他方式重新创建效果，任何人都可以提供的任何见解将不胜感激。

Answer 1

您对feDisplacementMap遇到了相同的原始限制。如果从过滤器中删除它，它可以正常工作。由于时间攻击，不允许使用交叉原始图像作为置换图的输入。

（Chrome偶尔错过了这个并允许交叉原点通过 - 但这是不正确的行为）

简单的解决方法是将imgur原始图像转换为过滤器中的内联URI。

<div class="ripple">
  </div>
      <svg xlmns="http://www.w3.org/2000/svg" version="1.1">
         <filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
          <feImage x="0" y="0 " width="400" height="400"  result="displace" xlink:href="data:image/png; etc etc. etc." - not including the full URI here it's way too big - "/>
          <feTurbulence id="feturbulence" type="fractalNoise" numOctaves="1" seed="2" baseFrequency="0.01968375 0.1468375"></feTurbulence>
          <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="25" in="displace"></feDisplacementMap>
           </filter>
        </svg>

Answer 2

所以我想出了这个问题，在我的网站上有很多性能匮乏的东西，为了抵消这些我一直在使用的GPU会改变，这对我过滤的元素造成了......好吧根本没有渲染。我已经重构了大部分代码，因为它试图提高性能并让它现在都在现场工作，但是仍然存在对GPU渲染的渴望，因此使用这个svg过滤器的“涟漪”元素无法尊重转换动画css改变不透明度所以可能需要在SVG中实现图像+添加一些FEAnimation以查看是否可以改善事物。

如果失败，我将在画布上使用pixi.js重新创建此效果。

SVG过滤器动画问题

2 个答案: