如何改善蒙版图像页面转换？答案

【问题标题】：How can improve mask image page transition?如何改善蒙版图像页面转换？
【发布时间】：2020-07-13 13:11:36
【问题描述】：

我正在尝试实现与本网站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. 当用户使用 firefox 但仅从 Mac 计算机 (Catalina 10.15.5) 看到转换时，这似乎是错误的。你可以在我创建的网站上看到这个错误https://abiesco.ch

2. 因为它是PNG，所以我不能在动画过程中轻易改变形状，它不是很灵活。我没有源文件（photoshop 或 after effect）。

我的问题：

是否可以使用 SVG 变形来获得相同的效果？我知道我们可以将anime.js 与tympanus tutorial 和DesignCourse youtubeVideo 一起使用。但我真的很想保留水——填充和离开屏幕的有机形状。

我已经尝试了bodymovin plugin 的后效，它允许将后效动画导出到 lottie.js 可以动画的 json 文件。但是插件不支持湍流置换滤镜（用于水效果）。

【问题讨论】：

我添加了 webkit 前缀，以便人们可以在 Chrome 中测试您的代码。您的代码只能在 Firefox 上正常工作（没有前缀，chrome、edge 和 safari 将失败）

标签： javascript css svg css-transitions css-mask

【解决方案1】：

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

我可以使用 WebGL。

我找到了适合我的案例 here 的完美示例，但目前我的技能还不足以处理这个问题。

我用着色器和过滤器制作了一些 PIXI.JS 教程，你能做的很棒，但该死的很难。

当我的技能足够好时，我一定会潜入 webgl。

【讨论】：