Тип QML Transition

Определяет анимированные переходы, происходящие при изменении состояния. Подробнее...

• Список всех членов, включая унаследованные

Свойства

• animations : список<Анимация>
• enabled : bool
• from : строка
• reversible : bool
• running : bool
• to : строка

Подробное описание

Transition определяет анимации, которые применяются при изменении состояния State.

Например, следующий Прямоугольник имеет два состояния: состояние по умолчанию и добавленное состояние "перемещённый". В состоянии "перемещённый" положение прямоугольника меняется на (50, 50). Добавленный Transition указывает, что при переходе между состояниями по умолчанию и "перемещённый" любые изменения в свойствах x и y должны быть анимированы, используя Easing.InOutQuad.

import QtQuick 2.0

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

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    states: State {
        name: "moved"; when: mouseArea.pressed
        PropertyChanges { target: rect; x: 50; y: 50 }
    }

    transitions: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
}

Обратите внимание, что в примере не требуется использование значений to и from для NumberAnimation. Для удобства эти свойства автоматически устанавливаются в значения x и y до и после изменения состояния; значения from предоставляются текущими значениями x и y, а значения to предоставляются объектом PropertyChanges. Если нужно, можно задать значения to и from для переопределения значений по умолчанию.

По умолчанию, анимации Transition применяются для любых изменений состояния в родительском элементе. Значения from и to Transition могут быть установлены для ограничения анимаций только при изменении состояния с одного определенного состояния на другое.

Для определения нескольких Transition укажите Item::transitions в виде списка:

    transitions: [
        Transition {
            from: "*"; to: "middleRight"
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 2000;
            }
        },
        Transition {
            from: "*"; to: "bottomLeft";
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 200;
            }
        },
        //If any other rectangle is clicked, the icon will return
        //to the start position at a slow speed and bounce.
        Transition {
            from: "*"; to: "*";
            NumberAnimation {
                easing.type: Easing.OutBounce;
                properties: "x,y";
                duration: 4000;
            }
        }
    ]

Если задано несколько Transition, только один (лучший) Transition будет применен для любого конкретного изменения состояния. В примере выше, если прямоугольник переходит в другое состояние, кроме "middleRight" или "bottomLeft", будет выполнена третья Transition, что означает, что значок будет перемещен в начальную точку.

Если для изменения состояния существует Transition, совпадающий с тем же свойством, что и Behavior, анимация Transition переопределяет Behavior для этого изменения состояния.

См. также Анимация и переходы в Qt Quick, Пример состояний, Состояния Qt Quick и Qt QML.

Документация по свойствам

Эти свойства указывают на изменения состояния, которые запускают переход.

Значения по умолчанию для этих свойств — «*» (любое состояние).

Например, следующий переход не установил свойства to и from, поэтому анимация всегда применяется при изменении между двумя состояниями (т. е. когда нажата и отпущена кнопка мыши).

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

    MouseArea { id: mouseArea; anchors.fill: parent }

    states: State {
        name: "brighter"; when: mouseArea.pressed
        PropertyChanges { target: rect; color: "yellow" }
    }

    transitions: Transition {
        ColorAnimation { duration: 1000 }
    }
}

Если переход был изменён следующим образом:

transitions: Transition {
    to: "brighter"
    ColorAnimation { duration: 1000 }
}

Анимация применялась бы только при переходе от состояния по умолчанию к состоянию «светлее» (т. е. при нажатии кнопки мыши, но не при её отпускании).

Несколько значений to и from можно установить, используя строку, разделенную запятыми.

См. также reversible.

[default] animations : список<Анимация>

Это свойство содержит список анимаций, которые необходимо выполнить для этого перехода.

transitions: Transition {
    PropertyAnimation { duration: 3000 }
    ColorAnimation { duration: 3000 }
}

Анимации верхнего уровня выполняются параллельно. Чтобы выполнить их последовательно, определите их в SequentialAnimation:

transitions: Transition {
    to: "brighter"
    reversible: true
    SequentialAnimation {
        PropertyAnimation { property: "x"; duration: 1000 }
        ColorAnimation { duration: 1000 }
    }
}

enabled : bool

Это свойство указывает, будет ли переход выполняться при переходе от состояния from к состоянию to.

По умолчанию Transition включён.

Обратите внимание, что в некоторых случаях отключение Transition может привести к использованию альтернативного Transition вместо него. В следующем примере, хотя первый Transition был настроен для анимации изменений от «state1» к «state2», этот переход был отключён установкой enabled в false, поэтому любое такое изменение состояния будет анимировано вторым Transition вместо этого.

Item {
    states: [
        State { name: "state1" },
        State { name: "state2" }
    ]
    transitions: [
        Transition { from: "state1"; to: "state2"; enabled: false },
        Transition {
            // ...
        }
    ]
}

reversible : bool

Это свойство указывает, должен ли переход автоматически перевернуться, когда условия, вызвавшие этот переход, изменятся на обратные.

Значение по умолчанию — false.

По умолчанию переходы выполняются параллельно и применяются ко всем изменениям состояния, если состояния from и to не заданы. В этой ситуации переход автоматически применяется при обращении изменения состояния, и нет необходимости устанавливать это свойство для переворота перехода.

Однако, если используется SequentialAnimation, или если свойства from или to заданы, это свойство нужно установить для переворота перехода при возврате изменения состояния. Например, следующий переход применяет последовательную анимацию при нажатии кнопки мыши и переворачивает последовательность анимации при отпускании кнопки мыши:

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

    TapHandler { id: tapHandler }

    states: State {
        name: "brighter"
        when: tapHandler.pressed
        PropertyChanges { target: rect; color: "lightsteelblue"; x: 50 }
    }

    transitions: Transition {
        to: "brighter"
        reversible: true
        SequentialAnimation {
            PropertyAnimation { property: "x"; duration: 1000 }
            ColorAnimation { duration: 1000 }
        }
    }
}

Если переход не установил значения to и reversible, то при отпускании мыши переход выполнит PropertyAnimation до ColorAnimation вместо переворота последовательности.

running : bool

Это свойство указывает, выполняется ли в настоящее время переход.

Это свойство только для чтения.