Тип QML PropertyAnimation
Анимирует изменения значений свойств. Подробнее...
| Заявление об импорте: | import QtQuick 2.12 |
| Наследует: | |
| Наследуется от: | ColorAnimation, NumberAnimation, RotationAnimation и Vector3dAnimation |
Свойства
- duration : int
-
easing
- easing.type : перечисление
- easing.amplitude : вещественное
- easing.overshoot : вещественное
- easing.period : вещественное
- easing.bezierCurve : список<вещественное>
- exclude : список<Объект>
- from : вариант
- properties : строка
- property : строка
- target : Объект
- targets : список<Объект>
- to : вариант
Подробное описание
PropertyAnimation предоставляет способ анимировать изменения значения свойства.
Его можно использовать для определения анимаций несколькими способами:
- В Переходе
Например, для анимирования любых объектов, которые изменили свои
xилиyсвойства в результате изменения состояния, используя кривую смягченияInOutQuad:Rectangle { id: rect width: 100; height: 100 color: "red" states: State { name: "moved" PropertyChanges { target: rect; x: 50 } } transitions: Transition { PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad } } } - В Поведении
Например, для анимирования всех изменений свойства
xпрямоугольника:Rectangle { width: 100; height: 100 color: "red" Behavior on x { PropertyAnimation {} } MouseArea { anchors.fill: parent; onClicked: parent.x = 50 } } - В качестве источника значения свойства
Например, для многократного анимирования свойства
xпрямоугольника:Rectangle { width: 100; height: 100 color: "red" SequentialAnimation on x { loops: Animation.Infinite PropertyAnimation { to: 50 } PropertyAnimation { to: 0 } } } - В обработчике сигнала
Например, для плавного исчезновения
theObjectпри нажатии:MouseArea { anchors.fill: theObject onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 } } - Самостоятельно
Например, для анимирования свойства
rectwidthза 500 мс, от текущей ширины до 30:Rectangle { id: theRect width: 100; height: 100 color: "red" // this is a standalone animation, it's not running by default PropertyAnimation { id: animation; target: theRect; property: "width"; to: 30; duration: 500 } MouseArea { anchors.fill: parent; onClicked: animation.running = true } }
В зависимости от того, как используется анимация, набор обычно используемых свойств будет отличаться. Для получения дополнительной информации см. документацию по отдельным свойствам, а также введение Анимация и переходы в Qt Quick.
Обратите внимание, что PropertyAnimation наследует абстрактный тип Animation. Это включает дополнительные свойства и методы для управления анимацией.
См. также Анимация и переходы в Qt Quick и Примеры Qt Quick - Анимация.
Документация по свойствам
duration : int
Это свойство содержит длительность анимации в миллисекундах.
Значение по умолчанию - 250.
easing.type : перечисление
Указывает кривую смягчения, используемую для анимации.
Для указания кривой смягчения необходимо указать по крайней мере тип. Для некоторых кривых вы также можете указать амплитуду, период и/или перескок (подробности приведены после таблицы). Кривая смягчения по умолчанию - Easing.Linear.
PropertyAnimation { properties: "y";
easing.type: Easing.InOutElastic;
easing.amplitude: 2.0;
easing.period: 1.5 } Доступные типы:
Easing.Linear |
Кривая сглаживания для линейной (t) функции: скорость постоянна. | |
Easing.InQuad |
Кривая сглаживания для квадратичной (t^2) функции: ускорение от нулевой скорости. | |
Easing.OutQuad |
Кривая сглаживания для квадратичной (t^2) функции: замедление до нулевой скорости. | |
Easing.InOutQuad |
Кривая сглаживания для квадратичной (t^2) функции: ускорение до середины, затем замедление. | |
Easing.OutInQuad |
Кривая сглаживания для квадратичной (t^2) функции: замедление до середины, затем ускорение. | |
Easing.InCubic |
Кривая сглаживания для кубической (t^3) функции: ускорение от нулевой скорости. | |
Easing.OutCubic |
Кривая сглаживания для кубической (t^3) функции: замедление до нулевой скорости. | |
Easing.InOutCubic |
Кривая сглаживания для кубической (t^3) функции: ускорение до середины, затем замедление. | |
Easing.OutInCubic |
Кривая сглаживания для кубической (t^3) функции: замедление до середины, затем ускорение. | |
Easing.InQuart |
Кривая сглаживания для четвёртой степени (t^4): ускорение от нулевой скорости. | |
Easing.OutQuart |
Кривая сглаживания для четвёртой степени (t^4): замедление до нулевой скорости. | |
Easing.InOutQuart |
Кривая сглаживания для четвёртой степени (t^4): ускорение до середины, затем замедление. | |
Easing.OutInQuart |
Кривая сглаживания для четвёртой степени (t^4): замедление до середины, затем ускорение. | |
Easing.InQuint |
Кривая сглаживания для пятой степени (t^5): ускорение от нулевой скорости. | |
Easing.OutQuint |
Кривая сглаживания для пятой степени (t^5): замедление до нулевой скорости. | |
Easing.InOutQuint |
Кривая сглаживания для пятой степени (t^5): ускорение до середины, затем замедление. | |
Easing.OutInQuint |
Кривая сглаживания для пятой степени (t^5): замедление до середины, затем ускорение. | |
Easing.InSine |
Кривая сглаживания для синусоидальной (sin(t)) функции: ускорение от нулевой скорости. | |
Easing.OutSine |
Кривая сглаживания для синусоидальной (sin(t)) функции: замедление до нулевой скорости. | |
Easing.InOutSine |
Кривая сглаживания для синусоидальной (sin(t)) функции: ускорение до середины, затем замедление. | |
Easing.OutInSine |
Кривая сглаживания для синусоидальной (sin(t)) функции: замедление до середины, затем ускорение. | |
Easing.InExpo |
Кривая сглаживания для экспоненциальной (2^t) функции: ускорение от нулевой скорости. | |
Easing.OutExpo |
Кривая сглаживания для экспоненциальной (2^t) функции: замедление до нулевой скорости. | |
Easing.InOutExpo |
Кривая сглаживания для экспоненциальной (2^t) функции: ускорение до середины, затем замедление. | |
Easing.OutInExpo |
Кривая сглаживания для экспоненциальной (2^t) функции: замедление до середины, затем ускорение. | |
Easing.InCirc |
Кривая сглаживания для круговой (sqrt(1-t^2)) функции: ускорение от нулевой скорости. | |
Easing.OutCirc |
Кривая сглаживания для круговой (sqrt(1-t^2)) функции: замедление до нулевой скорости. | |
Easing.InOutCirc |
Кривая сглаживания для круговой (sqrt(1-t^2)) функции: ускорение до середины, затем замедление. | |
Easing.OutInCirc |
Кривая сглаживания для круговой (sqrt(1-t^2)) функции: замедление до середины, затем ускорение. | |
Easing.InElastic |
Кривая сглаживания для упругой (экспоненциально затухающая синусоида) функции: ускорение от нулевой скорости. Пиковая амплитуда может быть задана параметром amplitude, а период затухания параметром period. | |
Easing.OutElastic |
Кривая сглаживания для упругой (экспоненциально затухающая синусоида) функции: замедление до нулевой скорости. Пиковая амплитуда может быть задана параметром amplitude, а период затухания параметром period. | |
Easing.InOutElastic |
Кривая сглаживания для упругой (экспоненциально затухающая синусоида) функции: ускорение до середины, затем замедление. | |
Easing.OutInElastic |
Кривая сглаживания для упругой (экспоненциально затухающая синусоида) функции: замедление до середины, затем ускорение. | |
Easing.InBack |
Кривая сглаживания для обратного (пересекающая кубическая функция: (s+1)*t^3 - s*t^2) входящая анимация: ускорение от нулевой скорости. | |
Easing.OutBack |
Кривая сглаживания для обратного (пересекающая кубическая функция: (s+1)*t^3 - s*t^2) исходящая анимация: замедление до нулевой скорости. | |
Easing.InOutBack |
Кривая сглаживания для обратного (пересекающая кубическая функция: (s+1)*t^3 - s*t^2) входящая/выходящая анимация: ускорение до середины, затем замедление. | |
Easing.OutInBack |
Кривая сглаживания для обратного (пересекающая кубическая функция: (s+1)*t^3 - s*t^2) исходящая/входящая анимация: замедление до середины, затем ускорение. | |
Easing.InBounce |
Кривая сглаживания для отскока (экспоненциально затухающий параболический отскок) функция: ускорение от нулевой скорости. | |
Easing.OutBounce |
Кривая сглаживания для отскока (экспоненциально затухающий параболический отскок) функция: замедление до нулевой скорости. | |
Easing.InOutBounce |
Кривая сглаживания для отскока (экспоненциально затухающий параболический отскок) функция входящая/выходящая: ускорение до середины, затем замедление. | |
Easing.OutInBounce |
Кривая сглаживания для отскока (экспоненциально затухающий параболический отскок) функция выходящая/входящая: замедление до середины, затем ускорение. | |
Easing.Bezier |
Пользовательская кривая сглаживания, определённая свойством easing.bezierCurve. |
easing.amplitude применяется только для кривых отскока и упругих кривых (кривых типа Easing.InBounce, Easing.OutBounce, Easing.InOutBounce, Easing.OutInBounce, Easing.InElastic, Easing.OutElastic, Easing.InOutElastic или Easing.OutInElastic).
easing.overshoot применяется только если easing.type равно: Easing.InBack, Easing.OutBack, Easing.InOutBack или Easing.OutInBack.
easing.period применяется только если easing.type равно: Easing.InElastic, Easing.OutElastic, Easing.InOutElastic или Easing.OutInElastic.
easing.bezierCurve применяется только если easing.type равно: Easing.Bezier. Это свойство представляет собой список<вещественное число>, содержащий группы из трёх точек, определяющих кривую от 0,0 до 1,1 - контрольная точка 1, контрольная точка 2, конечная точка: [cx1, cy1, cx2, cy2, endx, endy, ...]. Последняя точка должна быть 1,1.
См. Кривые сглаживания для демонстрации различных настроек сглаживания.
exclude : список<Объект>
Это свойство содержит элементы, на которые эта анимация не должна влиять.
См. также PropertyAnimation::targets.
from : вариант
Это свойство содержит начальное значение для анимации.
Если PropertyAnimation определено внутри Перехода или Поведения, это значение по умолчанию соответствует значению, определённому в начальном состоянии Перехода, или текущему значению свойства в момент запуска Поведения.
См. также Анимации и переходы в Qt Quick.
properties : строка
Эти свойства используются как набор для определения свойств, которые должны быть анимированы. Единичная и множественная формы функционально идентичны, например:
NumberAnimation { target: theItem; property: "x"; to: 500 } имеет тот же смысл, что и
NumberAnimation { targets: theItem; properties: "x"; to: 500 } Единичные формы немного оптимизированы, поэтому если вам нужно анимировать только один целевой объект/свойство, следует использовать их.
Свойство targets позволяет установить несколько целевых объектов. Например, это анимирует свойство x как для itemA, так и для itemB:
NumberAnimation { targets: [itemA, itemB]; properties: "x"; to: 500 } Во многих случаях эти свойства не нужно явно указывать, так как они могут быть выведены из фреймворка анимации:
| Источник значения/Поведение | Когда анимация используется в качестве источника значения или в поведении, целевой объект и имя анимируемого свойства по умолчанию могут быть выведены.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
NumberAnimation on x { to: 500; loops: Animation.Infinite } //animate theRect's x property
Behavior on y { NumberAnimation {} } //animate theRect's y property
} |
| Переход | При использовании в переходе предполагается, что анимация свойства соответствует всем целевым объектам, но не свойствам. На практике это означает, что вам нужно указать как минимум свойства, чтобы анимация работала.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
Item { id: uselessItem }
states: State {
name: "state1"
PropertyChanges { target: theRect; x: 200; y: 200; z: 4 }
PropertyChanges { target: uselessItem; x: 10; y: 10; z: 2 }
}
transitions: Transition {
//animate both theRect's and uselessItem's x and y to their final values
NumberAnimation { properties: "x,y" }
//animate theRect's z to its final value
NumberAnimation { target: theRect; property: "z" }
}
} |
| Отдельно | Когда анимация используется отдельно, и целевой объект, и свойство должны быть явно указаны.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
//need to explicitly specify target and property
NumberAnimation { id: theAnim; target: theRect; property: "x"; to: 500 }
MouseArea {
anchors.fill: parent
onClicked: theAnim.start()
}
} |
Как видно из примера выше, свойства задаются как список имён свойств через запятую для анимации.
См. также exclude и Анимация и переходы в Qt Quick.
property : string
Эти свойства используются как набор для определения свойств, которые должны быть анимированы. Единичные и множественные формы функционально идентичны, например:
NumberAnimation { target: theItem; property: "x"; to: 500 } имеет тот же смысл, что и
NumberAnimation { targets: theItem; properties: "x"; to: 500 } Единичные формы немного оптимизированы, поэтому если вам нужно анимировать только один целевой объект/свойство, следует использовать их.
Свойство targets позволяет установить несколько целевых объектов. Например, это анимирует свойство x как для itemA, так и для itemB:
NumberAnimation { targets: [itemA, itemB]; properties: "x"; to: 500 } Во многих случаях эти свойства не нужно явно указывать, так как они могут быть выведены из фреймворка анимации:
| Источник значения/Поведение | Когда анимация используется в качестве источника значения или в поведении, целевой объект и имя анимируемого свойства по умолчанию могут быть выведены.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
NumberAnimation on x { to: 500; loops: Animation.Infinite } //animate theRect's x property
Behavior on y { NumberAnimation {} } //animate theRect's y property
} |
| Переход | При использовании в переходе предполагается, что анимация свойства соответствует всем целевым объектам, но не свойствам. На практике это означает, что вам нужно указать как минимум свойства, чтобы анимация работала.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
Item { id: uselessItem }
states: State {
name: "state1"
PropertyChanges { target: theRect; x: 200; y: 200; z: 4 }
PropertyChanges { target: uselessItem; x: 10; y: 10; z: 2 }
}
transitions: Transition {
//animate both theRect's and uselessItem's x and y to their final values
NumberAnimation { properties: "x,y" }
//animate theRect's z to its final value
NumberAnimation { target: theRect; property: "z" }
}
} |
| Отдельно | Когда анимация используется отдельно, и целевой объект, и свойство должны быть явно указаны.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
//need to explicitly specify target and property
NumberAnimation { id: theAnim; target: theRect; property: "x"; to: 500 }
MouseArea {
anchors.fill: parent
onClicked: theAnim.start()
}
} |
Как видно из примера выше, свойства задаются как список имён свойств через запятую для анимации.
См. также exclude и Анимация и переходы в Qt Quick.
target : Object
Эти свойства используются как набор для определения свойств, которые должны быть анимированы. Единичные и множественные формы функционально идентичны, например:
NumberAnimation { target: theItem; property: "x"; to: 500 } имеет тот же смысл, что и
NumberAnimation { targets: theItem; properties: "x"; to: 500 } Единичные формы немного оптимизированы, поэтому если вам нужно анимировать только один целевой объект/свойство, следует использовать их.
Свойство targets позволяет установить несколько целевых объектов. Например, это анимирует свойство x как для itemA, так и для itemB:
NumberAnimation { targets: [itemA, itemB]; properties: "x"; to: 500 } Во многих случаях эти свойства не нужно явно указывать, так как они могут быть выведены из фреймворка анимации:
| Источник значения/Поведение | Когда анимация используется в качестве источника значения или в поведении, целевой объект и имя анимируемого свойства по умолчанию могут быть выведены.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
NumberAnimation on x { to: 500; loops: Animation.Infinite } //animate theRect's x property
Behavior on y { NumberAnimation {} } //animate theRect's y property
} |
| Переход | При использовании в переходе предполагается, что анимация свойства соответствует всем целевым объектам, но не свойствам. На практике это означает, что вам нужно указать как минимум свойства, чтобы анимация работала.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
Item { id: uselessItem }
states: State {
name: "state1"
PropertyChanges { target: theRect; x: 200; y: 200; z: 4 }
PropertyChanges { target: uselessItem; x: 10; y: 10; z: 2 }
}
transitions: Transition {
//animate both theRect's and uselessItem's x and y to their final values
NumberAnimation { properties: "x,y" }
//animate theRect's z to its final value
NumberAnimation { target: theRect; property: "z" }
}
} |
| Отдельно | Когда анимация используется отдельно, и целевой объект, и свойство должны быть явно указаны.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
//need to explicitly specify target and property
NumberAnimation { id: theAnim; target: theRect; property: "x"; to: 500 }
MouseArea {
anchors.fill: parent
onClicked: theAnim.start()
}
} |
Как видно из примера выше, свойства задаются как список имён свойств через запятую для анимации.
См. также exclude и Анимация и переходы в Qt Quick.
targets : list<Object>
Эти свойства используются как набор для определения свойств, которые должны быть анимированы. Единичные и множественные формы функционально идентичны, например:
NumberAnimation { target: theItem; property: "x"; to: 500 } имеет тот же смысл, что и
NumberAnimation { targets: theItem; properties: "x"; to: 500 } Единичные формы немного оптимизированы, поэтому если вам нужно анимировать только один целевой объект/свойство, следует использовать их.
Свойство targets позволяет установить несколько целевых объектов. Например, это анимирует свойство x как для itemA, так и для itemB:
NumberAnimation { targets: [itemA, itemB]; properties: "x"; to: 500 } Во многих случаях эти свойства не нужно явно указывать, так как они могут быть выведены из фреймворка анимации:
| Источник значения/Поведение | Когда анимация используется в качестве источника значения или в поведении, целевой объект и имя анимируемого свойства по умолчанию могут быть выведены.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
NumberAnimation on x { to: 500; loops: Animation.Infinite } //animate theRect's x property
Behavior on y { NumberAnimation {} } //animate theRect's y property
} |
| Переход | При использовании в переходе предполагается, что анимация свойства соответствует всем целевым объектам, но не свойствам. На практике это означает, что вам нужно указать как минимум свойства, чтобы анимация работала.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
Item { id: uselessItem }
states: State {
name: "state1"
PropertyChanges { target: theRect; x: 200; y: 200; z: 4 }
PropertyChanges { target: uselessItem; x: 10; y: 10; z: 2 }
}
transitions: Transition {
//animate both theRect's and uselessItem's x and y to their final values
NumberAnimation { properties: "x,y" }
//animate theRect's z to its final value
NumberAnimation { target: theRect; property: "z" }
}
} |
| Отдельно | Когда анимация используется отдельно, и целевой объект, и свойство должны быть явно указаны.Rectangle {
id: theRect
width: 100; height: 100
color: Qt.rgba(0,0,1)
//need to explicitly specify target and property
NumberAnimation { id: theAnim; target: theRect; property: "x"; to: 500 }
MouseArea {
anchors.fill: parent
onClicked: theAnim.start()
}
} |
Как видно из примера выше, свойства задаются как список имён свойств через запятую для анимации.
См. также exclude и Анимация и переходы в Qt Quick.
to : variant
Это свойство содержит конечное значение для анимации.
Если PropertyAnimation определена в Переходе или Поведении, это значение по умолчанию равно значению, определённому в конечном состоянии Перехода или значению изменения свойства, которое вызвало Поведение.
См. также Анимация и переходы в Qt Quick.
© The Qt Company Ltd
Licensed under the GNU Free Documentation License, Version 1.3.
https://doc.qt.io/qt-5.12/qml-qtquick-propertyanimation.html