定制网站开发与模板,网页设计制作网站用什么软件,如何自己开发微信小程序,深圳南山区网站建设公司qml实现的水波纹特效 1.横向波纹效果2.另一种效果#xff08;纵向波纹#xff09; 一直以来使用c qt如果要实现一些高级特效比如水波纹效果都难度比较大#xff0c;但是使用qt quick难度就会小很多。这里借鉴一些网友的思路简单实现一下水波纹效果。主要思路就是波浪的形成是… qml实现的水波纹特效 1.横向波纹效果2.另一种效果纵向波纹 一直以来使用c qt如果要实现一些高级特效比如水波纹效果都难度比较大但是使用qt quick难度就会小很多。这里借鉴一些网友的思路简单实现一下水波纹效果。主要思路就是波浪的形成是基于sin曲线以此来影响纹理坐标的颜色然后加上时间动画不断改变曲线的坐标从而达到一个波动效果。 1.横向波纹效果
Window {visible: truewidth: 800height: 600title: Water Ripple EffectImage {id: sourceImgwidth: 800height: 600source: qrc:/12.png}ShaderEffectSource {id: shaderSourcesourceItem: sourceImglive: true}ShaderEffect {id: waterEffectanchors.fill: parentproperty variant sourceTexture: shaderSourceproperty real frequency: 10property real amplitude: 0.04property real time: 0.0NumberAnimation on time {from: 0.0to: Math.PI*2duration: 1000loops: Animation.Infinite}fragmentShader: varying highp vec2 qt_TexCoord0;uniform sampler2D sourceTexture;uniform highp float frequency;uniform highp float amplitude;uniform highp float time;void main() {highp vec2 pulse sin(time - frequency * qt_TexCoord0);highp vec2 coord qt_TexCoord0 amplitude * vec2(pulse.x, -pulse.x);gl_FragColor texture2D(sourceTexture, coord);}}
}效果如下-波涛汹涌
2.另一种效果纵向波纹
Window {visible: truewidth: 800height: 600title: Water Ripple EffectImage {id: sourceImgwidth: 800height: 600source: qrc:/12.png}ShaderEffectSource {id: shaderSourcesourceItem: sourceImglive: true}ShaderEffect {id: waterEffectanchors.fill: parentproperty variant sourceTexture: shaderSourceproperty real frequency: 10property real amplitude: 0.08property real time: 0.0NumberAnimation on time {from: 0.0to: Math.PI * 2duration: 1000loops: Animation.Infinite}fragmentShader: varying highp vec2 qt_TexCoord0;uniform sampler2D sourceTexture;uniform highp float frequency;uniform highp float amplitude;uniform highp float time;void main() {highp vec2 uv qt_TexCoord0;highp float wave sin(uv.y * frequency time) * amplitude;uv.x wave;gl_FragColor texture2D(sourceTexture, uv);}}
}效果-树的摇曳
修改下频率和振幅效果
property real frequency: 60
property real amplitude: 0.02这样看起来是不是有点波光粼粼的感觉了。挺有趣的~0…0 代码链接奉上感兴趣的可以研究玩玩 波纹效果代码地址
作者费码程序猿 欢迎技术交流QQ255895056 转载请注明出处如有不当欢迎指正
