我需要像这里一样实现具有液体效果的图像变化
我有一个简单的带有图像的块,我需要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>
图像transition
功能,其触发器的液体动画如下
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 行Array
中的图像,但这也没有帮助。
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
}
请帮忙..
不错的一个 - 实时 vfx 满足 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);
}
它需要 3 种纹理作为输入:图片 1 图片 2 和用于扭曲 UV 的噪点纹理并在GPU上动态生成一帧过渡效果的一个像素的颜色值此着色器应用于图面的所有像素
这里使用的一种称为"纹理失真"或"UV 位移"的技术这个想法是使用存储在噪声纹理中的数据调整 UV 坐标。
开始学习GLSL的好地方是 https://thebookofshaders.com/
GLSL 参考 http://www.shaderific.com/glsl/
另外,我建议访问 https://www.shadertoy.com/
欢迎来到实时视觉特效的神奇世界