Тип 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.

[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

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

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