QML用径向渐变做波纹效果

要做波纹效果，用径向渐变是最简单的。QML中有两个RadialGradient径向渐变，一个是QtGraphicalEffects模块中的，另一个是QtQuick.Shapes模块中的（Shapes是Qt5.10开始引入的模块）。

Effects的径向渐变默认效果就没有锯齿感，Shapes的径向渐变抗锯齿设置更麻烦（暂时还没实现和Effects一样的效果，或许可以配合Shader来实现）。所以实际应用中，这种简单的波纹我准备用QtGraphicalEffects模块的径向渐变。

下面的Demo代码我实现了两个波纹以及一个点击效果（GIF不流畅）：

代码有四个文件，使用Qt5.12版本编写及测试

//ClickWave.qml

import QtQuick 2.12
import QtGraphicalEffects 1.0Item {id: controlimplicitWidth: 100implicitHeight: 100visible: falseproperty double wave_offset: 0.0property color wave_color: "red"RadialGradient{id: gradientanchors.fill: parent//horizontalRadius: 0//verticalRadius: 0//horizontalOffset: 0//verticalOffset: 0gradient: Gradient{GradientStop{position: (control.wave_offset>0.1)?(control.wave_offset-0.1):0color: "transparent"}GradientStop{ position: control.wave_offset+0.09; color: control.wave_color }GradientStop{ position: control.wave_offset+0.11; color: "transparent" }}}PropertyAnimation{id: animationtarget: controlproperty: "wave_offset"from:0to:0.4duration: 400running: falseonStarted: control.visible=trueonFinished: control.visible=false}function click(ptx,pty){animation.stop()control.x=ptx-control.width/2control.y=pty-control.height/2animation.start()}
}

//EffectsWave.qml

import QtQuick 2.12
import QtGraphicalEffects 1.0Item {id: controlimplicitWidth: 150implicitHeight: 150property double wave_offset: 0.0property color wave_color: "red"property alias running: animation.runningRadialGradient{id: gradientanchors.fill: parent//horizontalRadius: 0//verticalRadius: 0//horizontalOffset: 0//verticalOffset: 0//待改进，根据参数来设置波纹数量gradient: Gradient{//很遗憾，不能用RepeaterGradientStop{ position: 0; color: "transparent" }GradientStop{ position: control.wave_offset+0.001; color: control.wave_color }GradientStop{ position: control.wave_offset+0.01; color: "transparent" }GradientStop{ position: control.wave_offset+0.07; color: "transparent" }GradientStop{ position: control.wave_offset+0.1; color: control.wave_color }GradientStop{ position: control.wave_offset+0.11; color: "transparent" }GradientStop{ position: control.wave_offset+0.17; color: "transparent" }GradientStop{ position: control.wave_offset+0.2; color: control.wave_color }GradientStop{ position: control.wave_offset+0.21; color: "transparent" }GradientStop{ position: control.wave_offset+0.27; color: "transparent" }GradientStop{ position: control.wave_offset+0.3; color: control.wave_color }GradientStop{ position: control.wave_offset+0.31; color: "transparent" }GradientStop{ position: control.wave_offset+0.37; color: "transparent" }GradientStop{ position: control.wave_offset+0.4; color: control.wave_color }GradientStop{ position: control.wave_offset+0.41; color: "transparent" }}}PropertyAnimation{id: animationtarget: controlproperty: "wave_offset"from:0to:0.1duration: 1000running: control.visibleloops: Animation.Infinite}
}

Shape用起来没Effects简单，但功能也更多。还要注意的是，ShapePath要围起来他才会填充，这里我用一个透明边框围了一个矩形框。有一点不同的是，Effects径向范围到0.5就到矩形边上了，Shapes径向范围为1才到矩形边上。

//ShapesWave.qml

import QtQuick 2.12
import QtQuick.Shapes 1.12Item {id: controlimplicitWidth: 150implicitHeight: 150property double wave_offset: 0.0property color wave_color: "red"property alias running: animation.runningShape {anchors.fill: parent//这些设置感觉没效果//多重采样抗锯齿//layer.enabled: true//layer.smooth: true//layer.samples: 8//平滑处理//smooth: true//反走样抗锯齿//antialiasing: trueShapePath{startX:0startY: 0strokeColor: "transparent"//需要圈起来他才会填充渐变色PathLine {x: control.width;y: 0}PathLine {x: control.width;y: control.height}PathLine {x: 0;y: control.height}PathLine {x: 0;y: 0}fillGradient: RadialGradient {//ShapeGradient.PadSpread    该区域将填充最接近的停止色。//ShapeGradient.RepeatSpread  在渐变区域外重复渐变。//ShapeGradient.ReflectSpread    渐变会反射到渐变区域之外。//spread: ShapeGradient.PadSpreadcenterRadius: control.width/2//对于简单的径向渐变，应该将focusRadius设置为0（默认值）centerX: control.width/2 //中心centerY: control.height/2focalX: centerX  //焦点focalY: centerY//待改进，根据参数来设置波纹数量, 很遗憾，不能用RepeaterGradientStop{ position: 0; color: "transparent" }GradientStop{ position: control.wave_offset+0.001; color: control.wave_color }GradientStop{ position: control.wave_offset+0.01; color: "transparent" }GradientStop{ position: control.wave_offset+0.15; color: "transparent" }GradientStop{ position: control.wave_offset+0.2; color: control.wave_color }GradientStop{ position: control.wave_offset+0.21; color: "transparent" }GradientStop{ position: control.wave_offset+0.35; color: "transparent" }GradientStop{ position: control.wave_offset+0.4; color: control.wave_color }GradientStop{ position: control.wave_offset+0.41; color: "transparent" }GradientStop{ position: control.wave_offset+0.55; color: "transparent" }GradientStop{ position: control.wave_offset+0.6; color: control.wave_color }GradientStop{ position: control.wave_offset+0.61; color: "transparent" }GradientStop{ position: control.wave_offset+0.75; color: "transparent" }GradientStop{ position: control.wave_offset+0.8; color: control.wave_color }GradientStop{ position: control.wave_offset+0.81; color: "transparent" }}}}PropertyAnimation{id: animationtarget: controlproperty: "wave_offset"from:0to:0.2duration: 1000running: control.visibleloops: Animation.Infinite}
}

//main.qml

import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 720height: 520title: qsTr("Hello World")color: "black"EffectsWave{width: 200height: 200x:100y:100}ShapesWave{width: 200height: 200x:300y:100}ClickWave{id: click_wavewidth: 100height: 100x:100y: 300}MouseArea{anchors.fill: parentonClicked: {click_wave.click(mouse.x,mouse.y)}}
}

(完结~~)

QML用径向渐变做波纹效果相关推荐

css渐变小案例，比较复杂的线性渐变和径向渐变做泡泡
目录一,前言二,案例一,多个镜像渐变复合出图像 1.分析 2.第一步,四角的白色与红色条纹. 3.第二步,从上到下的渐变 4.第四步,后面的蓝红条纹效果 5.源码 6.奇思妙想三,径向渐变做出好 ...
CSS3技巧：利用css3径向渐变做一张优惠券（转）
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
html设置径向渐变色,【前端Talkking】CSS系列-css3之径向渐变初探
1 径向渐变radial-gradient 这是关于渐变的第二篇文章径向渐变,第一篇文章是线性渐变,有兴趣的可以看这里 1.1 基本语法线性渐变是沿着一条直线渐变,而径向渐变则是沿着椭圆或者圆进行渐 ...
css3五花八门渐变之径向渐变【完美光晕效果】
CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gra ...
用shader做水波纹效果
用shader做水波纹效果 1.效果展示: 2.代码: shader代码: Shader "Unlit/Water" {Properties{_MainTex("Text ...
HTML径向效果,HTML5版径向渐变梯度色彩
HTML5版径向渐变梯度色彩有个读者问我如何用HTML5生成一个径向梯度色彩效果,而不使用图片.仔细思考下,其实这个问题一点都不难,请看代码. HTML HTML5 Radial Gradient ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
html渐变显示动画效果,使用CSS transition和animation改变渐变状态
到目前为止,CSS的渐变属性linear-gradient和radial-gradient已经是很成熟的CSS特性了,而且repeating-linear-gradient和conic-gradien ...
html用渐变做彩虹,photoshop如何用渐变制作彩虹
很多同学都喜欢那种彩虹,其实彩虹也可以用photoshop制作,只要用好渐变就可以了.那么大家知道photoshop如何用渐变制作彩虹吗?下面是学习啦小编整理的photoshop如何用渐变制作彩虹的方 ...

QML用径向渐变做波纹效果

QML用径向渐变做波纹效果相关推荐

最新文章

热门文章