Qt开发框架入门级教程：用例 - QML中的动画 qtUIqmlc++

Qt Quick提供了动画属性的功能。动画属性允许属性值在中间值之间移动，替代立即更改为目标值。要为项目的位置设置动画，您可以为控制项目位置的属性（例如 x 和 y）设置动画，以便项目的位置在到达目标位置途中的每一帧都发生变化。

点击获取Qt下载

流畅的用户界面

QML旨在促进流畅UI的创建，这些是用户界面，其中UI组件具有动画效果，而不是突然出现、消失或跳跃。Qt Quick提供了两种简单的方法让UI组件随着动画移动，来替代立即出现在新的位置上。

状态和转换

Qt Quick允许您在State对象中声明各种UI状态，这些状态由基本状态的属性更改组成，可以作为组织UI逻辑的有用方式。Transitions是您可以与项目关联的对象，用来定义其属性因状态更改而更改时将如何设置动画。

可以使用 Item::states 和 Item::transitions 属性声明项的状态和转换，状态在项目的状态列表属性内声明，通常是组件的根项目。 在同一项目上定义的转换用于动画状态的变化。以下是一个示例：

 

Item {
id: container
width: 320
height: 120

Rectangle {
id: rect
color: "red"
width: 120
height: 120

TapHandler {
onTapped: container.state === '' ? container.state = 'other' : container.state = ''
}
}
states: [
// This adds a second state to the container where the rectangle is farther to the right

State { name: "other"

PropertyChanges {
target: rect
x: 200
}
}
]
transitions: [
// This adds a transition that defaults to applying to all state changes

Transition {

// This applies a default NumberAnimation to any changes a state change makes to x or y properties
NumberAnimation { properties: "x,y" }
}
]
}

 

动画属性更改

Behaviors可用于指定属性更改时要使用的动画，然后这将应用于所有更改，无论其来源如何。 以下示例使用behaviors为在屏幕上移动的按钮设置动画。

 

Item {
width: 320
height: 120

Rectangle {
color: "green"
width: 120
height: 120

// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
Behavior on x {

NumberAnimation {
//This specifies how long the animation takes
duration: 600
//This selects an easing curve to interpolate with, the default is Easing.Linear
easing.type: Easing.OutBounce
}
}

TapHandler {
onTapped: parent.x == 0 ? parent.x = 200 : parent.x = 0
}
}
}

 

其他动画

并非所有动画都必须绑定到特定的属性或状态，您还可以更一般地创建动画，并在动画中指定目标项目和属性。 以下是执行此操作的不同方法的一些示例：

 

Item {
width: 320
height: 120

Rectangle {
color: "blue"
width: 120
height: 120

// By setting this SequentialAnimation on x, it and animations within it will automatically animate
// the x property of this element
SequentialAnimation on x {
id: xAnim
// Animations on properties start running by default
running: false
loops: Animation.Infinite // The animation is set to loop indefinitely
NumberAnimation { from: 0; to: 200; duration: 500; easing.type: Easing.InOutQuad }
NumberAnimation { from: 200; to: 0; duration: 500; easing.type: Easing.InOutQuad }
PauseAnimation { duration: 250 } // This puts a bit of time between the loop
}

TapHandler {
// The animation starts running when you click within the rectangle
onTapped: xAnim.running = true
}
}
}
Item {
width: 320
height: 120

Rectangle {
id: rectangle
color: "yellow"
width: 120
height: 120

TapHandler {
// The animation starts running when you click within the rectangle
onTapped: anim.running = true;
}
}

// This animation specifically targets the Rectangle's properties to animate
SequentialAnimation {
id: anim
// Animations on their own are not running by default
// The default number of loops is one, restart the animation to see it again

NumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 }

NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 }
}
}

 

Qt商用组件推荐

• QtitanRibbon - Ribbon UI组件：是一款遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，QtitanRibbon致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
• QtitanChart - Qt类图表组件：是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。
• QtitanDataGrid - Qt网格组件：提供了一套完整的标准 QTableView 函数和传统组件无法实现的独特功能。使您能够将不同来源的各类数据加载到一个快速、灵活且功能强大的可编辑网格中，支持排序、分组、报告、创建带状列、拖放按钮和许多其他方便的功能。
• QtitanNavigation：QtitanNavigationDesignUI 组件是一组 GUI 控件，它实现了菜单、导航框、命令栏等导航界面，并让您以更少的滚动和点击次数有效地查看所有实体（工作区、网格或其他项目）。
• QtitanDocking：允许您像 Visual Studio 一样为您的伟大应用程序配备可停靠面板和可停靠工具栏。黑色、白色、蓝色调色板完全支持 Visual Studio 2019 主题！

---

Qt技术交流群：166830288      欢迎一起进群讨论

更多Qt产品教程、下载、正版授权资讯，请点击获取