导语

上文的动画比较简单，通过颜色，渐变，平移，旋转，缩放，过渡，翻转实现简单动画。这章学习混合，遮罩，模糊，染色等特效。使用Qt图形效果模块，需要导入一下模块

import QtGraphicalEffects 1.12

一、混合效果

总共两张图，一张覆盖到另一张的上面，类似于混合。通过Blend类型

Item {
    width: 300
    height: 300
    
    Image {
        id: cat
        source: "cat.jpg"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }
    
    Image {
        id: ball
        source: "ball.gif"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }
    
    Blend {
        anchors.fill: cat
        source: cat
        //需要混合的项目
        foregroundSource: ball
        //定义混合的方式，有22种不同的模式
        mode: "color"
    }
}

二、颜色效果

调整图片的亮度、对比度、着色、饱和度、伽玛调整等

1.亮度对比度 （BrightnessContrast）

Item {
    width: 300
    height: 300
    
    Image {
        id: bug
        source: "cat.jpg"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }
    
    BrightnessContrast {
        anchors.fill: bug
        source: bug
        //以下两个属性取值范围都是-1.0到1.0，默认为0
        //亮度，如果值-1将会是一张黑图
        brightness: -0.8
        //对比度
        contrast: 0.5
    }
}

对比度：屏幕上同一点最亮时（白色）与最暗时（黑色）的亮度的比值，一般来说对比度越大，图像越清晰醒目，色彩也越鲜明艳丽；而对比度小，则会让整个画面都灰蒙蒙的。

2.颜色叠加

有一张图片，然后给这张图片再添加上一层颜色。

ColorOverlay {
	anchors.fill: bug; source: bug; color: "#80800000"
}

3.着色

与颜色叠加类似，只不过通过单独增减色调、亮度、饱和度来给图片上色。

4.饱和度

Desaturate类型。其属性desaturation控制颜色饱和度的程度，取值0.0到1.0 默认值为0.0，即没有变化。

三、渐变效果 （Gradient）

包含三种渐变类型

• 锥形渐变（ConicalGradient）
• 线性渐变（LinearGradient）
• 辐射渐变（RadialGradient）

四、阴影效果

• DropShadow（投影）
• InnerShadow（内阴影）

五、模糊效果

• FastBlur（快速模糊），模糊质量较低，但渲染速度较快
• GaussianBlur（高斯模糊），通过模糊图像算法实现，质量比第一种高，但慢
• RecursiveBlur（递归模糊），也使用算法，多次模糊，比上两种更加模糊
• MaskBlur（遮罩模糊），可以控制每一个像素进行模糊，相当于可以进行局部模糊

六、动感模糊

上面四种属于发散模糊。但是还可以指定特殊模糊

• 方向模糊（我们经常看到的抓拍图一辆正在高速行驶的摩托，DirectionalBlur）
• 径向模糊（相当于旋转模糊，RadiaBlur）
• 缩放模糊（ZoomBlur）

七、发光效果

• 发光（Glow）
• 矩形发光（RectangularGlow）