PropertyAnimation QML Type

Zeigt Änderungen der Eigenschaftswerte animiert an. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• duration : int
• easing
  • easing.amplitude : real
  • easing.bezierCurve : list<real>
  • easing.overshoot : real
  • easing.period : real
  • easing.type : enumeration
• exclude : list<QtObject>
• from : variant
• properties : string
• property : string
• target : QtObject
• targets : list<QtObject>
• to : variant

Ausführliche Beschreibung

PropertyAnimation bietet eine Möglichkeit, Änderungen am Wert einer Eigenschaft zu animieren.

Es kann auf verschiedene Arten zur Definition von Animationen verwendet werden:

• In einem Transition

  Um beispielsweise alle Objekte zu animieren, deren Eigenschaften „ x “ oder „ y “ sich infolge einer Zustandsänderung geändert haben, unter Verwendung einer „ InOutQuad “-Easing-Kurve:

  Rectangle {
      id: rect
      width: 100; height: 100
      color: "red"
  
      states: State {
          name: "moved"
          PropertyChanges { target: rect; x: 50 }
      }
  
      transitions: Transition {
          PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
      }
  }

• In einem Behavior

  Beispiel: Um alle Änderungen an der Eigenschaft „ x “ eines Rechtecks zu animieren:

  Rectangle {
      width: 100; height: 100
      color: "red"
  
      Behavior on x { PropertyAnimation {} }
  
      MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
  }

• Als Quelle für den Eigenschaftswert

  Beispiel: Um die Eigenschaft „ x “ des Rechtecks wiederholt zu animieren:

  Rectangle {
      width: 100; height: 100
      color: "red"
  
      SequentialAnimation on x {
          loops: Animation.Infinite
          PropertyAnimation { to: 50 }
          PropertyAnimation { to: 0 }
      }
  }

• In einem Signal-Handler

  Beispiel: Um „ theObject “ beim Klicken auszublenden:

  MouseArea {
      anchors.fill: theObject
      onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
  }

• Standalone

  Beispiel: Um die Eigenschaft „ width “ von „ rect “ über 500 ms hinweg von der aktuellen Breite auf 30 zu animieren:

  Rectangle {
      id: theRect
      width: 100; height: 100
      color: "red"
  
      // this is a standalone animation, it's not running by default
      PropertyAnimation { id: animation;
                          target: theRect;
                          property: "width";
                          to: 30;
                          duration: 500 }
  
      MouseArea { anchors.fill: parent; onClicked: animation.running = true }
  }

Je nachdem, wie die Animation verwendet wird, unterscheiden sich die üblicherweise verwendeten Eigenschaften. Weitere Informationen finden Sie in der Dokumentation zu den einzelnen Eigenschaften sowie in der Einführung zu „Animationen und Übergänge in Qt Quick “.

Beachten Sie, dass „PropertyAnimation“ vom abstrakten Typ „ Animation “ erbt. Dieser umfasst zusätzliche Eigenschaften und Methoden zur Steuerung der Animation.

Laufende Animationen ändern

Seit Qt 6.4 ist es möglich, die Eigenschaften ` from`, ` to`, ` duration` und ` easing ` für eine Animation auf oberster Ebene während ihrer Ausführung festzulegen. Die Animation berücksichtigt die Änderungen in der nächsten Schleife.

Siehe auch „Animationen und Übergänge“ unter Qt Quick sowie „Qt Quick -Beispiele – Animation“.

Dokumentation zu den Eigenschaften

duration : int

Diese Eigenschaft gibt die Dauer der Animation in Millisekunden an.

Der Standardwert beträgt 250.

easing group

Legt die für die Animation verwendete Beschleunigungskurve fest

Um eine Beschleunigungskurve festzulegen, müssen Sie mindestens den Typ angeben. Bei einigen Kurven können Sie zusätzlich Amplitude, Periode und/oder Überschwingen festlegen (weitere Details finden Sie nach der Tabelle). Die Standard-Beschleunigungskurve ist „ Easing.Linear “.

PropertyAnimation { properties: "y";
                    easing.type: Easing.InOutElastic;
                    easing.amplitude: 2.0;
                    easing.period: 1.5 }

Verfügbare Typen sind:

Easing.Linear	Beschleunigungskurve für eine lineare (t)-Funktion: Die Geschwindigkeit ist konstant.
Easing.InQuad	Beschleunigungskurve für eine quadratische (t^2)-Funktion: Beschleunigung ausgehend von einer Geschwindigkeit von Null.
Easing.OutQuad	Beschleunigungskurve für eine quadratische (t²)-Funktion: Verzögerung bis zur Geschwindigkeit Null.
Easing.InOutQuad	Beschleunigungskurve für eine quadratische (t²) Funktion: Beschleunigung bis zur Hälfte, dann Verzögerung.
Easing.OutInQuad	Beschleunigungskurve für eine quadratische (t^2)-Funktion: Abbremsung bis zur Hälfte, dann Beschleunigung.
Easing.InCubic	Easing-Kurve für eine kubische (t³) Funktion: Beschleunigung ausgehend von der Geschwindigkeit Null.
Easing.OutCubic	Easing-Kurve für eine kubische (t³) Funktion: Abbremsen auf Nullgeschwindigkeit.
Easing.InOutCubic	Easing-Kurve für eine kubische (t³) Funktion: Beschleunigung bis zur Hälfte, dann Abbremsung.
Easing.OutInCubic	Easing-Kurve für eine kubische (t³) Funktion: Verzögerung bis zur Hälfte, dann Beschleunigung.
Easing.InQuart	Easing-Kurve für eine quartische (t^4) Funktion: Beschleunigung ausgehend von der Geschwindigkeit Null.
Easing.OutQuart	Easing-Kurve für eine Funktion vierten Grades (t^4): Abbremsen auf Geschwindigkeitswert Null.
Easing.InOutQuart	Easing-Kurve für eine quartische (t^4) Funktion: Beschleunigung bis zur Hälfte, dann Abbremsung.
Easing.OutInQuart	Easing-Kurve für eine quartische (t^4) Funktion: Abbremsung bis zur Hälfte, dann Beschleunigung.
Easing.InQuint	Easing-Kurve für eine Funktion fünften Grades (t^5): Beschleunigung ausgehend von der Geschwindigkeit Null.
Easing.OutQuint	Easing-Kurve für eine Funktion fünfter Potenz (t^5): Abbremsen auf Geschwindigkeit Null.
Easing.InOutQuint	Easing-Kurve für eine Funktion fünfter Potenz (t^5): Beschleunigung bis zur Hälfte, dann Verzögerung.
Easing.OutInQuint	Easing-Kurve für eine Funktion 5. Grades (t^5): Verzögerung bis zur Hälfte, dann Beschleunigung.
Easing.InSine	Beschleunigungs-/Verzögerungskurve für eine sinusförmige (sin(t)) Funktion: Beschleunigung ausgehend von der Geschwindigkeit Null.
Easing.OutSine	Easing-Kurve für eine sinusförmige (sin(t)) Funktion: Abbremsen auf Nullgeschwindigkeit.
Easing.InOutSine	Easing-Kurve für eine sinusförmige (sin(t)) Funktion: Beschleunigung bis zur Hälfte, dann Verzögerung.
Easing.OutInSine	Easing-Kurve für eine sinusförmige (sin(t)) Funktion: Abbremsen bis zur Hälfte, dann Beschleunigen.
Easing.InExpo	Beschleunigungs- und Verzögerungskurve für eine exponentielle (2^t) Funktion: Beschleunigung ausgehend von der Geschwindigkeit Null.
Easing.OutExpo	Easing-Kurve für eine exponentielle (2^t) Funktion: Abbremsen auf Geschwindigkeit Null.
Easing.InOutExpo	Easing-Kurve für eine exponentielle (2^t)-Funktion: Beschleunigung bis zur Hälfte, dann Abbremsung.
Easing.OutInExpo	Beschleunigungs-/Verzögerungskurve für eine exponentielle (2^t)-Funktion: Verzögerung bis zur Hälfte, dann Beschleunigung.
Easing.InCirc	Überblendkurve für eine zirkuläre (sqrt(1-t^2))-Funktion: Beschleunigung ausgehend von der Geschwindigkeit Null.
Easing.OutCirc	Easing-Kurve für eine zirkuläre (sqrt(1-t^2))-Funktion: Abbremsen auf Nullgeschwindigkeit.
Easing.InOutCirc	Easing-Kurve für eine zirkulare (sqrt(1-t^2))-Funktion: Beschleunigung bis zur Hälfte, dann Abbremsung.
Easing.OutInCirc	Easing-Kurve für eine zirkulare (sqrt(1-t^2))-Funktion: Abbremsen bis zur Hälfte, dann Beschleunigung.
Easing.InElastic	Easing-Kurve für eine elastische Funktion (exponentiell abklingende Sinuswelle): Beschleunigung ausgehend von der Geschwindigkeit Null. Die Spitzenamplitude lässt sich mit dem Amplitudenparameter und die Abklingdauer mit dem Periodenparameter einstellen.
Easing.OutElastic	Easing-Kurve für eine elastische (exponentiell abklingende Sinuswelle): Abbremsen auf Nullgeschwindigkeit. Die Spitzenamplitude lässt sich mit dem Parameter „amplitude“ einstellen, die Abklingdauer mit dem Parameter „period “.
Easing.InOutElastic	Easing-Kurve für eine elastische (exponentiell abklingende Sinuswelle): Beschleunigung bis zur Hälfte, dann Abbremsung.
Easing.OutInElastic	Easing-Kurve für eine elastische (exponentiell abklingende Sinuswellen-)Funktion: Abbremsen bis zur Hälfte, dann Beschleunigen.
Easing.InBack	Easing-Kurve für eine „Back“-Funktion (kubische Funktion mit Überschwingen: (s+1)*t^3 - s*t^2) mit Einlauf: Beschleunigung ausgehend von einer Geschwindigkeit von Null.
Easing.OutBack	Easing-Kurve für eine „Back“-Funktion (kubische Funktion mit Überschwingen: (s+1)*t^3 - s*t^2) beim Auslaufen: Abbremsen auf Nullgeschwindigkeit.
Easing.InOutBack	Easing-Kurve für eine „Back“-Funktion (kubische Funktion mit Überschwingen: (s+1)*t^3 - s*t^2) beim Ein- und Ausblenden: Beschleunigung bis zur Hälfte, dann Verzögerung.
Easing.OutInBack	Easing-Kurve für einen Rücklauf (kubisches Easing mit Überschwingen: (s+1)*t^3 - s*t^2) mit Ein- und Auslauf: Abbremsen bis zur Hälfte, dann Beschleunigen.
Easing.InBounce	Easing-Kurve für eine Bounce-Funktion (exponentiell abklingender parabolischer Bounce): Beschleunigung ausgehend von der Geschwindigkeit Null.
Easing.OutBounce	Easing-Kurve für eine Rückprallfunktion (exponentiell abklingender parabolischer Rückprall): Abbremsen auf Nullgeschwindigkeit.
Easing.InOutBounce	Easing-Kurve für eine Bounce-Funktion (exponentiell abklingender parabolischer Bounce) mit Ein-/Ausblenden: Beschleunigung bis zur Hälfte, dann Verzögerung.
Easing.OutInBounce	Easing-Kurve für eine Bounce-Funktion (exponentiell abklingender parabolischer Bounce) mit Ein-/Ausblenden: Abbremsen bis zur Hälfte, dann Beschleunigung.
Easing.BezierSpline	Benutzerdefinierte Easing-Kurve, definiert durch die Eigenschaft „easing.bezierCurve“.

easing.amplitude Gilt nur für Bounce- und elastische Kurven (Kurven vom Typ „ Easing.InBounce “, „ Easing.OutBounce “, „ Easing.InOutBounce “, „ Easing.OutInBounce “, „ Easing.InElastic “, „ Easing.OutElastic “, „ Easing.InOutElastic “ oder „ Easing.OutInElastic “).

easing.overshoot gilt nur, wenn „ easing.type “ einer der folgenden Werte ist: „ Easing.InBack “, „ Easing.OutBack “, „ Easing.InOutBack “ oder „ Easing.OutInBack “.

easing.period gilt nur, wenn `easing.type` einer der folgenden Werte ist: ` Easing.InElastic`, ` Easing.OutElastic`, ` Easing.InOutElastic ` oder ` Easing.OutInElastic`.

easing.bezierCurve gilt nur, wenn „easing.type“ einer der folgenden Werte ist: „ Easing.BezierSpline “. Diese Eigenschaft ist eine Liste <real>, die Gruppen von drei Punkten enthält, die eine Kurve von 0,0 bis 1,1 definieren – Kontrollpunkt 1, Kontrollpunkt 2, Endpunkt: [cx1, cy1, cx2, cy2, endx, endy, ...]. Der letzte Punkt muss 1,1 sein.

Eine Demonstration der verschiedenen Easing-Einstellungen finden Sie unter „Easing-Kurven “.

exclude : list<QtObject> [read-only]

Diese Eigenschaft enthält die Elemente, die von dieser Animation nicht betroffen sein sollen.

Siehe auch „ PropertyAnimation::targets “.

from : variant

Diese Eigenschaft enthält den Startwert für die Animation.

Wenn die „ PropertyAnimation “ innerhalb eines „ Transition “ oder „ Behavior “ definiert ist, entspricht dieser Wert standardmäßig dem im Startzustand des „ Transition “ definierten Wert oder dem aktuellen Wert der Eigenschaft zum Zeitpunkt der Auslösung des „ Behavior “.

Siehe auch „Animationen und Übergänge“ unter Qt Quick.

Diese Eigenschaften werden als Menge verwendet, um zu bestimmen, welche Eigenschaften animiert werden sollen. Die Singular- und Pluralformen sind funktional identisch, z. B.

NumberAnimation { target: theItem; property: "x"; to: 500 }

hat dieselbe Bedeutung wie

NumberAnimation { targets: theItem; properties: "x"; to: 500 }

Die Singularformen sind leicht optimiert; wenn Sie also nur ein einziges Ziel bzw. eine einzige Eigenschaft animieren möchten, sollten Sie versuchen, diese zu verwenden.

Die Eigenschaft „ targets “ ermöglicht die Festlegung mehrerer Ziele. Dies animiert beispielsweise die Eigenschaft „ x “ sowohl von itemA als auch von itemB:

NumberAnimation { targets: [itemA, itemB]; properties: "x"; to: 500 }

In vielen Fällen müssen diese Eigenschaften nicht explizit angegeben werden, da sie vom Animations-Framework abgeleitet werden können:

Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    NumberAnimation on x { to: 500; loops: Animation.Infinite } //animate theRect's x property
    Behavior on y { NumberAnimation {} } //animate theRect's y property
}

Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    Item { id: uselessItem }
    states: State {
        name: "state1"
        PropertyChanges {
            theRect {
                x: 200
                y: 200
                z: 4
            }
            uselessItem {
                x: 10
                y: 10
                z: 2
            }
        }
    }
    transitions: Transition {
        //animate both theRect's and uselessItem's x and y to their final values
        NumberAnimation { properties: "x,y" }

        //animate theRect's z to its final value
        NumberAnimation { target: theRect; property: "z" }
    }
}

Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    //need to explicitly specify target and property
    NumberAnimation { id: theAnim; target: theRect; property: "x"; to: 500 }
    MouseArea {
        anchors.fill: parent
        onClicked: theAnim.start()
    }
}

Wie im obigen Beispiel zu sehen ist, werden die Eigenschaften als durch Kommas getrennte Zeichenfolge der zu animierenden Eigenschaftsnamen angegeben.

Siehe auch „ exclude “ und „Animation and Transitions“ unter Qt Quick.

to : variant

Diese Eigenschaft enthält den Endwert der Animation.

Wenn der „ PropertyAnimation “ innerhalb eines „ Transition “ oder „ Behavior “ definiert ist, wird dieser Wert standardmäßig auf den im Endzustand des „ Transition “ definierten Wert oder auf den Wert der Eigenschaftsänderung gesetzt, die den „ Behavior “ ausgelöst hat.

Siehe auch „Animationen und Übergänge“ unter Qt Quick.