Тип 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: "stop"; to: "go"
      PropertyAnimation { target: stopLight
                          properties: "color"; duration: 1000 }
  },
  Transition {
      from: "go"; to: "stop"
      PropertyAnimation { target: goLight
                          properties: "color"; duration: 1000 }
  } ]

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

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

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

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

[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 {
            // ...
        }
    ]
}

from : строка

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

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

Например, в следующем переходе не установлены свойства 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.

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

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

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

to : строка

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

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

Например, в следующем переходе не установлены свойства 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.