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

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

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

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

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

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

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