如何改进掩模图像页面的转换？

Question

我正在尝试实现这个网站http://56k.studiovoila.com/的相同页面转换效果

因此，经过几次搜索，我找到了这个教程https://tympanus.net/Tutorials/CSSMaskTransition/，我使用了它们在演示1上使用的PNG，并将它添加到我的项目中，并使用适当的代码。

您可以在这里看到我的代码示例。(效果很模糊，但你可以猜到效果)

​

const btnClick = document.getElementById("btn-click");
const body = document.querySelector("body");

    btnClick.addEventListener("click",(e)=>{
  e.preventDefault();
  body.classList.remove("reveal");
  body.classList.add("disapear");
});

body.addEventListener("animationend",()=>{
  body.classList.remove("disapear");
  body.classList.add("reveal");
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: static;
  height: 100vh;
  width: 100vw;
  -webkit-mask-image: url("https://i.ibb.co/G5TXwKc/sprite.png");
  mask-image: url("https://i.ibb.co/G5TXwKc/sprite.png");
  -webkit-mask-size: 7100% 100%;
  mask-size: 7100% 100%;      
  background: yellow;
}

body.disapear {      
  animation: mask-play-disapear 2s steps(70) forwards;
}
 body.reveal {
    animation: mask-play-reveal 1.4s steps(70) forwards;
  }

@keyframes mask-play-disapear {
  from {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }
  to {
    mask-position: 100% 0;
    -webkit-mask-position: 100% 0;
  }
}
@keyframes mask-play-reveal {
  0% {
    mask-position: 100% 0;
    -webkit-mask-position: 100% 0;
  }
  100% {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }

  
}

#div1 {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
}

<body>
  <div id="div1">
    <a href="#" id="btn-click">click me</a>
  </div>
</body>

​

问题:

1. --当用户看到与火狐的转换时，它似乎是错误的，但它只是从Mac (Catalina10.15.5)。您可以在我在https://abiesco.ch创建的网站上看到这个bug。

2.，因为它是一个PNG，在动画过程中我不能很容易地改变形状，它不是很灵活。我没有源文件(photoshop或事后效果)。

我的问题:

是否可以使用SVG变形来获得同样的效果？我知道我们可以将anime.js与鼓室教程和DesignCourse youtubeVideo结合使用。但我真的想保持水-有机的形状，填补和离开屏幕。

我已经尝试了bodymovin插件的后效果，这是允许导出后效果动画到json文件，lottie.js可以动画。但该插件不支持湍流位移滤波器(用于水效应)。

Answer 1

好的，我找到了一个更好的方法来动画页面转换。

我可以用WebGL。

我为我的案例找到了一个完美的例子，这里，但就目前而言，我的技能还不足以解决这个问题。

我做了一些PIXI.JS教程的着色器和过滤器，这是惊人的，你可以做，但该死的是困难。

当我的技能足够好的时候，我肯定会深入webgl。