HMI设计十-cybertruck-QPainter径向渐变圆与阴影流动设计

• 如何构建图示 点阵背景可以参考本栏同刊

HMI设计九-cybertruck-QPainter复杂油门刹车滑动块设计-CSDN博客

• 本文目标 

  • 如何构建QPainter阴影流动设计
    • 如何构建径向渐变阴影圆
    • 如何营造阴影流动效果

• 如何构建径向渐变阴影圆

  • 使用ShapePath中的PathArc 构建两个半圆组成一个圆
  • 用fillGradient 来使能 相应的渐变效果，可以支持线性，径向渐变

//Circle.qml 定义一个圆形的shape组件
import QtQuick
import QtQuick.Shapes

//两个圆弧组成的圆
Shape {
    id: control
    implicitHeight: 200
    implicitWidth: 200
    width: 200
    height: 200
    //抗锯齿
    layer{
        enabled: true
        smooth: true
        samples: 16
    }

    property alias fillGradient: content_path.fillGradient

    ShapePath {
        id: content_path
        strokeWidth: -1
        fillGradient: LinearGradient {
            //spread为Gradient通用的属性，定义起止点范围外的填充方式
            //ShapeGradient.PadSpread	该区域将填充最接近的停止色，默认值
            //ShapeGradient.RepeatSpread	在渐变区域外重复渐变
            //ShapeGradient.ReflectSpread	渐变会反射到渐变区域之外
            spread: ShapeGradient.ReflectSpread
            //x1起点和x2终点位置对应position的0到1
            x1: 0; y1: control.height/2
            x2: control.width; y2: control.height/2
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 0.5; color: "green" }
            GradientStop { position: 1.0; color: "blue" }
        }
        startX: 0
        startY: control.height/2
        PathArc {
            x: control.width; y: control.height/2
            radiusX: control.width/2; radiusY: control.height/2
            useLargeArc: true
        }
        PathArc {
            x: 0; y: control.height/2
            radiusX: control.width/2; radiusY: control.height/2
            useLargeArc: true
        }
    }
}

• 基层代码默认使用LinearGradient 
• 可以在上层使能径向渐变RadialGradient 

    Circle {
        id: _breathCircleT
        x:0
        width: _dircontrolshader.width
        height:_breathCircleT.width

        fillGradient: RadialGradient {
            spread: ShapeGradient.RepeatSpread//中心点
            centerX: _breathCircleT.width/2;
            centerY: _breathCircleT.height/2;
            centerRadius: _breathCircleT.height/2
            //焦点
            focalX: centerX;
            focalY: centerY;
            focalRadius: 0
            GradientStop { position: 0.0; color: "#0053c9" }
            GradientStop { position: 0.9; color: "#500053c9" }
            GradientStop { position: 1.0; color: "#000053c9" }
        }
     }

• 如何营造阴影流动效果

  • 使用SequentialAnimation和ParallelAnimation
  • 将圆由小变大，更改scale
  • 将圆拉伸为椭圆，更改height
  • 移动圆，营造阴影流动效果，更改y

   SequentialAnimation{
            id:_scaleAnimB
            loops:Animation.Infinite
            running: true
            ParallelAnimation{
                PropertyAnimation{
                    target: _breathCircleB
                    property: "scale"
                    from: 0.8
                    to:1
                    duration: 1000
                }
                PropertyAnimation{
                    target: _breathCircleB
                    property: "height"
                    from: _breathCircleB.width
                    to:_breathCircleB.width*1.4
                    duration: 1000
                }
                PropertyAnimation{
                    target: _breathCircleB
                    property: "y"

                    from:  _dircontrolshader.height/2+_dircontrolshader.width/2
                    to: _dircontrolshader.height - _dircontrolshader.width*2
                    duration: 1000
                }
            }
            ParallelAnimation{
                PropertyAnimation{
                    target: _breathCircleB
                    property: "scale"
                    from: 1
                    to:0
                    duration: 800
                }
                PropertyAnimation{
                    target: _breathCircleB
                    property: "height"
                    from: _breathCircleB.width*1.4
                    to:_breathCircleB.width
                    duration: 800
                }

            }
        }