如何在QML（QT Creator）中使用发光脉动效果制作元素动画？

Posted 2021-03-31

我有一个CSS动作，我想在QML / Qt中复制，如何在QML（QT Creator）中创建一个按钮（或任何其他元素）以产生脉动效果，如下面的CSS：

@import "bourbon";

$n:6;
$w:20px;//dot size
$e:4;//dot margin factor
$hsl:160;//start color
$bg:#333;

html{
    background:$bg;
  height: 100%;
  backface-visibility: hidden;
}   

#c{
    position: absolute;
    top:50%;
    left:50%;   
    margin-left: -(($n - 1)*($w + $w*$e))/2 - ($w/2);
}

@mixin shadow($b,$s,$sm,$c){
    box-shadow:
        0 0 8px 6px $c,
        0 0 $b $s $bg,
        0 0 $b ($s + $sm) $c;
}

.s{
    width: $w;
    height: $w;
    border-radius: 50%;
    cursor:pointer;
    float: left;
  @include transition(all .2s);
    &:nth-child(n+2){
        margin-left: $w*$e;
    }
}   

@for $i from 0 to $n {
    $c:hsl($hsl+(10*$i),100%,55%);
  $c2:hsl((6*$i),100%,55%);

    .s:nth-child(#{$i+1}){          
        background: lighten($c,5%); 
        @include animation(r+$i 2s ($i/4)+s ease-out  infinite);         &:hover{
      background: lighten($c2,5%);      
      @include animation(r2+$i .5s .4s  ease-out  infinite);
    }
    }
    @include keyframes(r+$i) {
    0%{@include shadow(0px,0px,0px,rgba($c,0));}
        10%{@include shadow(12px,10px,4px,$c);}
        100%{@include shadow(0px,40px,0px,rgba($c,0));}
    }
  @include keyframes(r2+$i) {
        from{@include shadow(12px,10px,4px,$c2);}
        to{@include shadow(4px,40px,1px,rgba($c2,0));}
    }
}

我尝试过使用StyleEngine。此外，我尝试使用外部CSS文件，但没有运气！

答案

您可以设置渐变动画以产生一些发光效果。从5.10开始有RadialGradient所以你可以使用它。我不擅长绘画，但想法如下：

import QtQuick 2.10
import QtQuick.Window 2.2
import QtQuick.Shapes 1.0

Window {
    id: window
    title: "Test"
    visible: true
    width: 400
    height: 400

    Shape {
        width: 100
        height: 100
        anchors.centerIn: parent
        ShapePath {
            strokeWidth: 2
            strokeColor: "transparent"
            startX: 50; startY: 0

            fillGradient: RadialGradient {
                id: gradient
                property real pos: 0.3
                centerX: 50;
                centerY: 50
                centerRadius: 50
                focalX: centerX; focalY: centerY
                GradientStop { position: 0; color: "#33ffbb" }
                GradientStop { position: 0.2; color: "#33ffbb" }
                GradientStop { position: 0.25; color: "transparent" }
                GradientStop { position: gradient.pos - 0.1; color: "transparent" }
                GradientStop { position: gradient.pos; color: "#33ffbb" }
                GradientStop { position: gradient.pos + 0.1; color: "transparent" }
            }
            PathArc {
                x: 50
                y: 100
                radiusX: 50
                radiusY: 50
                useLargeArc: true
            }
            PathArc {
                x: 50
                y: 0
                radiusX: 50
                radiusY: 50
                useLargeArc: true
            }
        }

        PropertyAnimation {
            target: gradient
            property: "pos"
            from: 0.3
            to: 0.9
            duration: 1500
            loops: Animation.Infinite
            easing.type: Easing.OutQuad
            running: true
        }
    }
}

您可以使用值来使效果接近您的示例。