Behavior QML Type

Defines a default animation for a property change. More...

Import Statement: import QtQuick 2.15


Detailed Description

A Behavior defines the default animation to be applied whenever a particular property value changes.

For example, the following Behavior defines a NumberAnimation to be run whenever the Rectangle's width value changes. When the MouseArea is clicked, the width is changed, triggering the behavior's animation:

 import QtQuick 2.0

 Rectangle {
     id: rect
     width: 100; height: 100
     color: "red"

     Behavior on width {
         NumberAnimation { duration: 1000 }

     MouseArea {
         anchors.fill: parent
         onClicked: rect.width = 50

Note that a property cannot have more than one assigned Behavior. To provide multiple animations within a Behavior, use ParallelAnimation or SequentialAnimation.

If a state change has a Transition that matches the same property as a Behavior, the Transition animation overrides the Behavior for that state change. For general advice on using Behaviors to animate state changes, see Using Qt Quick Behaviors with States.

See also Animation and Transitions in Qt Quick, Behavior example, and Qt QML.

Property Documentation

[default] animation : Animation

This property holds the animation to run when the behavior is triggered.

enabled : bool

This property holds whether the behavior will be triggered when the tracked property changes value.

By default a Behavior is enabled.

targetProperty group

[read-only] : string

[read-only] targetProperty.object : Object

nameThis property holds the name of the property being controlled by this Behavior.
objectThis property holds the object of the property being controlled by this Behavior.

This property can be used to define custom behaviors based on the name or the object of the property being controlled.

The following example defines a Behavior fading out and fading in its target object when the property it controls changes:

 // FadeBehavior.qml
 import QtQuick 2.15

 Behavior {
     id: root
     property Item fadeTarget: targetProperty.object
     SequentialAnimation {
         NumberAnimation {
             target: root.fadeTarget
             property: "opacity"
             to: 0
             easing.type: Easing.InQuad
         PropertyAction { } // actually change the controlled property between the 2 other animations
         NumberAnimation {
             target: root.fadeTarget
             property: "opacity"
             to: 1
             easing.type: Easing.OutQuad

This can be used to animate a text when it changes:

 import QtQuick 2.15

 Text {
     id: root
     property int counter
     text: counter
     FadeBehavior on text {}
     Timer {
         running: true
         repeat: true
         interval: 1000
         onTriggered: ++root.counter

This QML property was introduced in QtQuick 2.15.

targetValue : Variant

This property holds the target value of the property being controlled by the Behavior. This value is set by the Behavior before the animation is started.

This property was introduced in QtQuick 2.13.