Tabla de contenido
elemento de flujo
animación
Antes de usar cualquier animación, debe importar el siguiente archivo de main.qmlencabezado
o agregar este encabezado en cualquier archivo qml que necesite llamar a la animación; de lo contrario, ¡siempre informará un error!
- Si usa QML de QT5, use:
import QtQuick.Controls 1.4 - Si usa QML de QT6, use:
import QtQuick.Controls 2.0
¡Después de agregarlo, todo el proyecto debe ser reconstruido!
rectDetenga el caso después de continuar girando durante un tiempo fijo después de hacer clic
Listado de códigos:AnimationComp.qml
import QtQuick 2.0
Item {
id: root
width: 100; height: 100
// 控制是否播放动画的属性
property bool isRunning: false
Rectangle{
id: rect
anchors.fill: parent
anchors.margins: 20
color: "deepskyblue"
// RotationAnimation控制旋转类型的动画
RotationAnimation on rotation{
to: 360 // 从当前位置到360
duration: 300 // 持续时间300ms
running: root.isRunning // 当前动画状态
}
}
// 设立一个按钮点击区域以便启动动画
MouseArea{
id: mouse
anchors.fill: parent
onClicked: root.isRunning = true
}
}
En main.qml se ve así:
import QtQuick 2.12
import QtQuick.Window 2.12
// 一定一定一定要记住导入这个头文件！！！
import QtQuick.Controls 1.4
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
// 调用自己编写的带动画的rect组件
AnimationComp{
}
}
Animación de movimiento vertical de rectángulo
Podemos usar dos formas de lograr
Método 1: Behaviorescuchando los cambios de posición
Rectangle{
id:rect
width: 200; height: 200
color: "deepskyblue"
// 使用Behavior监听组件y轴位置
// 一旦y值变化，则启动动画过渡效果
Behavior on y{
// NumberAnimation数值动画过渡效果
NumberAnimation{
duration: 1000
easing.type: Easing.InOutQuad
}
}
MouseArea{
id:mouse
anchors.fill: parent
// 点击后修改y轴位置，触发对应Behavior
onClicked: rect.y = 200
}
}
Método 2: NumberAnimationdisparador
Rectangle{
id:rect
width: 200; height: 200
color: "deepskyblue"
// NumberAnimation数值类型动画过渡
NumberAnimation {
id:anim // 设置动画id
target: rect // 那个组件执行动画
property: "y" // 欲监听变动的属性
to: 200 // 属性变化到哪个数值
duration: 1000 // 动画持续时间
easing.type: Easing.InOutQuad // 过渡曲线
}
MouseArea{
id:mouse
anchors.fill: parent
// 使用start显式触发对应id的动画！
onClicked: anim.start()
}
}
animación de grupo
ParallelAnimationAnimación de grupo no secuencial
Todas las animaciones envueltas por este componente se realizan al mismo tiempo, no en orden
Rectangle{
id:rect
width: 100; height: 100
color: "deepskyblue"
MouseArea{
id:mouse
anchors.fill: parent
onClicked: para.start() // 开启分组动画
}
ParallelAnimation{
id:para
NumberAnimation{
target: rect
properties: "y"
to: 100
duration: 1000
easing.type: Easing.Bezier
}
NumberAnimation{
target: rect
properties: "x"
to: 200
duration: 1000
easing.type: Easing.Bezier
}
}
}
SequentialAnimationAgrupar animaciones en secuencia
Todas las animaciones añadidas se ejecutan secuencialmente
El código no demuestra, simplemente cambie ParallelAnimation en el código anterior a SequentialAnimation
estado y transición
Use estados para la gestión de estados para lograr el cambio entre diferentes estados
import QtQuick 2.0
Item {
id:root
width: 100; height: 100
// 起始状态
state: "open"
// 所有可能的状态
states: [
// open状态，颜色为灰色
State {
name: "open"
PropertyChanges {
target: rect
color:"lightgray"
}
},
// close状态，颜色为橙色
State {
name: "close"
PropertyChanges {
target: rect
color:"orange"
}
}
]
Rectangle{
id:rect
anchors.fill: parent
color: "orange"
MouseArea{
id:mouse
anchors.fill: parent
// 鼠标点击切换状态
onClicked: root.state = (root.state=="open" ? "close" : "open")
}
}
}
¿Es rígido cambiar directamente el estado? Necesitamos agregar algunos efectos de transición a través de transiciones.
Inserte el siguiente código directamente en el código anterior
// 设置过渡效果
transitions: [
Transition {
// 表示过渡效果针对所有state切换过程
// 当然你也可以选择针对单次状态切换过程执行动画，比如from:"open"; to:"close"
from: "*"; to:"*"
// 一个标准的颜色切换过渡
ColorAnimation {
properties: "color"
duration: 2000
easing.type: Easing.Bezier
}
}
]
En este punto, el código completo debería verse así
lista de códigosTransitionComp.qml
import QtQuick 2.0
Item {
id:root
width: 100; height: 100
state: "open"
states: [
State {
name: "open"
PropertyChanges {
target: rect
color:"lightgray"
}
},
State {
name: "close"
PropertyChanges {
target: rect
color:"orange"
}
}
]
transitions: [
Transition {
from: "*"; to:"*"
ColorAnimation {
properties: "color"
duration: 2000
easing.type: Easing.Bezier
}
}
]
Rectangle{
id:rect
anchors.fill: parent
color: "orange"
MouseArea{
id:mouse
anchors.fill: parent
onClicked: root.state = (root.state=="open" ? "close" : "open")
}
}
}