Тип QML Transition

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

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

Свойства

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

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

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 применяются при любом изменении состояния родительского элемента. Значения from и to Transition могут быть установлены, чтобы ограничить анимации только при переходе из одного конкретного состояния в другое.

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