Тип QML PropertyAnimation
Анимирует изменения значений свойств Подробнее...
| Заявление импорта: | import QtQuick 2.5 |
| Наследует: | |
| Наследуется от: | ColorAnimation, CoordinateAnimation, NumberAnimation, QuaternionAnimation, 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 |
Кривая сглаживания для синусоидальной (sin(t)) функции: ускорение от нулевой скорости. | |
Easing.InSine |
Кривая сглаживания для синусоидальной (sin(t)) функции: замедление до нулевой скорости. | |
Easing.OutSine |
Кривая сглаживания для синусоидальной (sin(t)) функции: ускорение до середины, затем замедление. | |
Easing.InOutSine |
Кривая сглаживания для синусоидальной (sin(t)) функции: замедление до середины, затем ускорение. | |
Easing.OutInSine |
Кривая сглаживания для экспоненциальной (2^t) функции: ускорение от нулевой скорости. | |
Easing.InExpo |
Кривая сглаживания для экспоненциальной (2^t) функции: замедление до нулевой скорости. | |
Easing.OutExpo |
Кривая сглаживания для экспоненциальной (2^t) функции: ускорение до середины, затем замедление. | |
Easing.InOutExpo |
Кривая сглаживания для экспоненциальной (2^t) функции: замедление до середины, затем ускорение. | |
Easing.OutInExpo |
Кривая сглаживания для круговой (sqrt(1-t^2)) функции: ускорение от нулевой скорости. | |
Easing.InCirc |
Кривая сглаживания для круговой (sqrt(1-t^2)) функции: замедление до нулевой скорости. | |
Easing.OutCirc |
Кривая сглаживания для круговой (sqrt(1-t^2)) функции: ускорение до середины, затем замедление. | |
Easing.InOutCirc |
Кривая сглаживания для круговой (sqrt(1-t^2)) функции: замедление до середины, затем ускорение. | |
Easing.OutInCirc |
Кривая сглаживания для упругой (экспоненциально затухающая синусоида) функции: ускорение от нулевой скорости. Пиковая амплитуда может быть задана параметром amplitude, а период затухания — параметром period. | |
Easing.InElastic |
Кривая сглаживания для упругой (экспоненциально затухающая синусоида) функции: замедление до нулевой скорости. Пиковая амплитуда может быть задана параметром amplitude, а период затухания — параметром period. | |
Easing.OutElastic |
Кривая сглаживания для упругой (экспоненциально затухающая синусоида) функции: ускорение до середины, затем замедление. | |
Easing.InOutElastic |
Кривая сглаживания для упругой (экспоненциально затухающая синусоида) функции: замедление до середины, затем ускорение. | |
Easing.OutInElastic |
Кривая сглаживания для обратного (перескок кубической функции: (s+1)*t^3 - s*t^2) замедления: ускорение от нулевой скорости. | |
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 |
Кривая сглаживания для отскока (экспоненциально затухающий параболический отскок) функции: ускорение от нулевой скорости. | |
Easing.InBounce |
Кривая сглаживания для отскока (экспоненциально затухающий параболический отскок) функции: замедление до нулевой скорости. | |
Easing.OutBounce |
Кривая сглаживания для отскока (экспоненциально затухающий параболический отскок) функции в/из: ускорение до середины, затем замедление. | |
Easing.InOutBounce |
Кривая сглаживания для отскока (экспоненциально затухающий параболический отскок) функции из/в: замедление до середины, затем ускорение. | |
Easing.OutInBounce |
Кривая сглаживания для пользовательской кривой, определенной свойством easing.bezierCurve. | |
Easing.Bezier |
Применима только для кривых отскока и упругости (кривые типа Easing.InBounce, Easing.OutBounce, Easing.InOutBounce, Easing.OutInBounce, Easing.InElastic, Easing.OutElastic, Easing.InOutElastic или Easing.OutInElastic). |
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 : list<Object>
Это свойство содержит элементы, на которые данная анимация не должна влиять.
См. также PropertyAnimation::targets.
from : variant
Это свойство содержит начальное значение для анимации.
Если PropertyAnimation определён внутри Transition или Behavior, это значение по умолчанию соответствует значению, определённому в начальном состоянии Transition, или текущему значению свойства в момент запуска Behavior.
См. также Анимация и переходы в Qt Quick.
properties : 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.
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/archives/qt-5.6/qml-qtquick-propertyanimation.html