当鼠标移入移出时更改图片液态效果

Question

我需要实现液态效果的图片更改，就像这里一样。

我有一个简单的带有图像的块，我需要使用此效果在onmouseover中更改此图像（到其他图像），并在onmouseout中返回到初始位置，同时使用此效果。

const avatarQuantumBreak = document.querySelector(".avatar_quantum_break");
const avatar = document.querySelector(".avatar");

avatarQuantumBreak.style.opacity = "0";

let hover = () => avatarQuantumBreak.style.opacity = "1";
let normal = () => avatarQuantumBreak.style.opacity = "0";

avatar.onmouseover = () => hover();
avatar.onmouseout = () => normal();

html , body {
  height:100%;
}

.avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
  position: absolute;
  display: block;
  text-align:center;
  transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
  border-radius: 50%;
  display: inline-block;
  width: 86%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>


<div class=avatar>
    <span class=avatar_simple>
        <img src="https://pixel.nymag.com/imgs/fashion/daily/2014/05/27/27-amber-heard.w330.h330.jpg">
    </span>
    <span class=avatar_quantum_break>
        <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/05/31/31-amber-heard.w330.h330.jpg">
    </span>
</div>

下面是触发液体动画的图片过渡函数：

transitionNext() {
    TweenMax.to(this.mat.uniforms.dispPower, 2.5, {
      value: 1,
      ease: Expo.easeInOut,
      onUpdate: this.render,
      onComplete: () => {
        this.mat.uniforms.dispPower.value = 0.0
        this.changeTexture()
        this.render.bind(this)
        this.state.animating = false
      }
    })

我尝试使用这个函数，但它并没有帮助到我。

另外我尝试改变这个数组中第15行的图片，但这也没有起到作用。

this.images = [ //1
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg1.jpg',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg2.jpg',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg3.jpg'
    ]

此函数启动动画

listeners() {
   window.addEventListener('wheel', this.nextSlide, { passive: true })
}

下一张幻灯片功能

nextSlide() {
   if (this.state.animating) return

   this.state.animating = true

   this.transitionNext()

   this.data.current = this.data.current === this.data.total ? 0 : this.data.current + 1
this.data.next = this.data.current === this.data.total ? 0 : this.data.current + 1
}

请帮忙...

- Spectr

---

你为什么没有在CodePen中使用相同的代码？ - ProllyGeek

Answer 1

不错 - 实时视觉特效遇上Web开发 :)

这个效果的所有魔力都是通过GLSL着色器实现的（您可以在示例HTML底部看到它）我在这里添加了一些注释。

  // next lines are input data that gpu gets form javascript
  varying vec2 vUv; // uv coordinate of current pixel
  uniform sampler2D texture1; // picture 1
  uniform sampler2D texture2; // picture 2
  uniform sampler2D disp; // noise texture
  uniform float dispPower; // effect progress
  uniform float intensity; // effect scale

  void main() {
    vec2 uv = vUv;

    vec4 disp = texture2D(disp, uv); // read noise texture
    vec2 dispVec = vec2(disp.x, disp.y); // get red and green values

    // calculate uv displacement
    vec2 distPos1 = uv + (dispVec * intensity * dispPower); 
    vec2 distPos2 = uv + (dispVec * -(intensity * (1.0 - dispPower)));

    // sample images with displaced uv
    vec4 _texture1 = texture2D(texture1, distPos1); 
    vec4 _texture2 = texture2D(texture2, distPos2);

    // mix both pictures using effect dispPower value and output pixel color
    gl_FragColor = mix(_texture1, _texture2, dispPower);
  }

它需要三个纹理作为输入：picture1、picture2和用于扭曲UV的噪声纹理，并在GPU上实时生成过渡效果一帧中一个像素的颜色值，该着色器应用于表面的所有像素。

这里使用的一种技术称为“纹理扭曲”或“UV位移”，其思想是使用存储在噪声纹理中的数据调整UV坐标。

学习GLSL的好地方是https://thebookofshaders.com/。

GLSL参考http://www.shaderific.com/glsl/。

此外，我建议访问https://www.shadertoy.com/。

欢迎来到实时视觉特效的魔幻世界。

- Good

---

这是一个控制此效果的噪声纹理 https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/rock-_disp.png - Good