Тип QML Transition

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

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

Свойства

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

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

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

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

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

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

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

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

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

[по умолчанию] animations : список<Анимация>

Это свойство содержит список анимаций, которые должны быть выполнены для этого перехода.

transitions: Transition {
    PropertyAnimation { duration: 3000 }
    ColorAnimation { duration: 3000 }
}

Анимации верхнего уровня выполняются параллельно. Чтобы выполнить их последовательно, определите их в SequentialAnimation:

transitions: Transition {
    SequentialAnimation {
        PropertyAnimation { property: "x"; duration: 1000 }
        ColorAnimation { duration: 1000 }
    }
}

enabled : bool

Это свойство указывает, будет ли выполняться Transition при переходе от состояния from к состоянию to.

По умолчанию Transition включен.

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

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: "red"

    MouseArea { id: mouseArea; anchors.fill: parent }

    states: State {
        name: "brighter"
        when: mouseArea.pressed
        PropertyChanges { target: rect; color: "yellow"; x: 50 }
    }

    transitions: Transition {
        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.