StyleAnimation QML Type

Ein Komforttyp zur Animation von Stileigenschaften. Mehr...

Dieser Typ befindet sich in der Technologievorschau und kann sich noch ändern.

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• animateBackgroundBorder : bool
• animateBackgroundColors : bool
• animateBackgroundGeometry : bool
• animateBackgroundRadii : bool
• animateBackgroundScaleAndRotation : bool
• animateBackgroundShadow : bool
• animateColors : bool
• animateControlGeometry : bool
• animateHandleBorder : bool
• animateHandleColors : bool
• animateHandleGeometry : bool
• animateHandleRadii : bool
• animateHandleScaleAndRotation : bool
• animateHandleShadow : bool
• animateIndicatorBorder : bool
• animateIndicatorColors : bool
• animateIndicatorGeometry : bool
• animateIndicatorRadii : bool
• animateIndicatorScaleAndRotation : bool
• animateIndicatorShadow : bool
• duration : int
• easing : EasingCurve

Ausführliche Beschreibung

StyleAnimation ist ein Animation, das Stileigenschaften animiert, wenn sich ein Steuerelement ändert state. Wenn Sie beispielsweise „ animateBackgroundColors “ auf „ true “ setzen, werden alle Farbeigenschaften von „ background “ animiert, wie beispielsweise „ background.color “, „ background.border.color “, „ background.image.color “ und „ background.shadow.color “. Es wird innerhalb eines „ transition “ verwendet:

comboBox {
    background.color: "lightgray"
    hovered.background.color: "plum"

    indicator.color: "white"
    hovered.indicator.color: "pink"
    hovered.indicator.border.width: 4

    transition: Transition {
        StyleAnimation {
            animateBackgroundColors: true
            animateIndicatorColors: true
            animateIndicatorBorder: true
            easing.type: Easing.OutQuad
            duration: 500
        }
    }
}

StyleAnimation ist lediglich ein Komfort Animation, das die Auflistung der betroffenen Stileigenschaften automatisch übernimmt. Der obige Codeausschnitt könnte auch wie folgt geschrieben werden:

checkBox {
    background.color: "lightgray"
    hovered.background.color: "plum"

    indicator.color: "white"
    hovered.indicator.color: "pink"
    hovered.indicator.border.width: 4

    transition: Transition {
        ColorAnimation {
            properties: "background.color, background.border.color, background.image.color, background.shadow.color"
            + ", indicator.color, indicator.border.color, indicator.image.color, indicator.shadow.color"
            easing.type: Easing.OutQuad
            duration: 500
        }
        NumberAnimation {
            properties: "indicator.border.width"
            easing.type: Easing.OutQuad
            duration: 500
        }
    }
}

Eine `StyleAnimation` kann auch zusammen mit anderen Animationen verwendet werden:

slider {
    handle.color: "white"
    hovered.handle.color: "seagreen"
    hovered.handle.border.width: 8

    transition: Transition {
        StyleAnimation {
            animateHandleColors: true
            easing.type: Easing.OutQuad
            duration: 500
        }
        NumberAnimation {
            properties: "handle.border.width"
            easing.type: Easing.OutBounce
            duration: 1000
        }
    }
}

Siehe auch „ ControlStyle.transition “ und „ ControlStyle “.

Dokumentation zu den Eigenschaften

animateBackgroundBorder : bool

Wenn „ true “ aufgerufen wird, wird die Methode „ border width “ des Delegaten „ background “ aufgerufen.

animateBackgroundColors : bool

Wenn „ true “ aufgerufen wird, werden die Farbeigenschaften des Delegaten „ background “ animiert, einschließlich der Farben „ border “ und „ shadow “.

Siehe auch „ animateColors “ und „ animateBackgroundGeometry “.

animateBackgroundGeometry : bool

Wenn „ true “ die Geometrieeigenschaften des Delegaten „ background “ animiert, wie beispielsweise „ width “, „ height “ und „ margins “.

animateBackgroundRadii : bool

Wenn „ true “ aufgerufen wird, wird die Ecke „ radii “ des Delegaten „ background “ animiert.

animateBackgroundScaleAndRotation : bool

Wenn „ true “ aufgerufen wird, werden die Bewegung und die Drehung des Delegaten „ background “ animiert.

animateBackgroundShadow : bool

Wenn „ true “ die Schatteneigenschaften des Delegaten „ background “ animiert, wie beispielsweise „ vertical offset “, „ horizontal offset “, „ scale “ und „ blur “. Die Schatteneigenschaft „ color “ wird durch „ animateHandleColors “ animiert.

animateColors : bool

Wenn „ true “ gesetzt ist, werden alle Farbeigenschaften über alle Delegaten hinweg animiert. Dies ist eine Kurzform, um „ animateBackgroundColors “, „ animateHandleColors “ und „ animateIndicatorColors “ gleichzeitig zu aktivieren.

Beachten Sie, dass „ ColorAnimation “ auch alle Farbeigenschaften animiert, die sich während eines Übergangs ändern, wenn sowohl „ property “ als auch „ properties “ nicht gesetzt sind. Damit stellt es eine Alternative zu „ StyleAnimation “ dar, wenn nur Farben animiert werden sollen.

Siehe auch animateBackgroundColors, animateHandleColors und animateIndicatorColors.

animateControlGeometry : bool

Wenn „ true “ die Geometrieeigenschaften des Steuerelements animiert, wie beispielsweise „ spacing “ und „ padding “.

animateHandleBorder : bool

Wenn „ true “ die „ border width “ des „ handle “-Delegaten und dessen „ sub-handles “ animiert.

animateHandleColors : bool

Wenn „ true “ ausgeführt wird, werden die Farbeigenschaften des Delegaten „ handle “ und dessen „ sub-handles “ animiert, einschließlich der Farben „ border “ und „ shadow “.

Siehe auch „ animateColors “ und „ animateHandleGeometry “.

animateHandleGeometry : bool

Wenn „ true “ die Geometrieeigenschaften des Delegaten „ handle “ und dessen „ sub-handles “ animiert, wie beispielsweise „ width “, „ height “ und „ margins “.

animateHandleRadii : bool

Wenn „ true “ die Ecke „ radii “ des Delegaten „ handle “ und dessen „ sub-handles “ animiert.

animateHandleScaleAndRotation : bool

Wenn „ true “ die Eigenschaften „ scale “ und „ rotation “ des Delegaten „ handle “ sowie dessen „ sub-handles “ animiert.

animateHandleShadow : bool

Wenn „ true “ die Schatteneigenschaften des Delegaten „ handle “ und dessen „ sub-handles “ animiert, wie beispielsweise „ vertical offset “, „ horizontal offset “, „ scale “ und „ blur “. Das Schatten color wird durch „ animateHandleColors “ animiert.

animateIndicatorBorder : bool

Wenn „ true “ die „ border width “ des „ indicator “-Delegaten und dessen „ sub-indicators “ animiert.

animateIndicatorColors : bool

Wenn „ true “ ausgeführt wird, werden die Farbeigenschaften des Delegaten „ indicator “ und dessen „ sub-indicators “ animiert, einschließlich der Farben „ border “ und „ shadow “.

Siehe auch „ animateColors “ und „ animateIndicatorGeometry “.

animateIndicatorGeometry : bool

Wenn „ true “ die Geometrieeigenschaften des Delegaten „ indicator “ und dessen „ sub-indicators “ animiert, wie beispielsweise „ width “, „ height “ und „ margins “.

animateIndicatorRadii : bool

Wenn „ true “ die Ecke „ radii “ des Delegaten „ indicator “ und dessen „ sub-indicators “ animiert.

animateIndicatorScaleAndRotation : bool

Wenn „ true “ ausgeführt wird, werden die Skalierung und Drehung des Delegaten „ indicator “ und dessen „ sub-indicators “ animiert.

animateIndicatorShadow : bool

Wenn „ true “ die Schatteneigenschaften des Delegaten „ indicator “ und dessen „ sub-indicators “ animiert, wie beispielsweise „ vertical offset “, „ horizontal offset “, „ scale “ und „ blur “. Die Schatten color “ wird durch „ animateHandleColors “ animiert.

duration : int

Die Dauer der Animation in Millisekunden.

Siehe auch easing und PropertyAnimation.

easing : EasingCurve

Die auf die Animation angewendete Überblendkurve.

Siehe auch duration und PropertyAnimation.