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

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

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 }
}

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

Несколько значений to и from могут быть установлены с помощью запятой в строке.

См. также reversible.

[по умолчанию] 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

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

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