Тип QML Перехода

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

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

Свойства

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

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

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

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

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

Для определения нескольких Переходов укажите 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;
            }
        }
    ]

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

Если изменение состояния имеет Переход, который соответствует тому же свойству, что и Поведение, анимация Перехода переопределяет Поведение для этого изменения состояния.

См. также Анимация и переходы в 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.

[по умолчанию] 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

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

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