Тип QML Transition

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

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

Свойства

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

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

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

Например, следующий Rectangle имеет два состояния: стандартное состояние и добавленное состояние "moved". В состоянии "moved" положение прямоугольника изменяется на (50, 50). Добавление Transition указывает, что при изменении прямоугольника между стандартным и состоянием "moved" любые изменения в свойствах 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 применяются для любого изменения состояния в родительском элементе. Значения Transition from и to могут быть установлены для ограничения анимаций только при изменении с одного конкретного состояния на другое.

Для определения нескольких 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 }
}

Анимация применялась бы только при переходе из стандартного состояния в состояние "brighter" (т.е. при нажатии мыши, но не при отпускании).

Несколько значений 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.

По умолчанию, переход включен.

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

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

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

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