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

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

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

Свойства

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

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

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

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

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

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

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

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