C++图形用户界面开发框架Qt 6.x入门级教程：用例 – QML中的动画

流畅的用户界面

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

状态和转换

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

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

Item {id: containerwidth: 320height: 120Rectangle {id: rectcolor: "red"width: 120height: 120TapHandler {onTapped: container.state === '' container.state = 'other' : container.state = ''}}states: [// This adds a second state to the container where the rectangle is farther to the rightState { name: "other"PropertyChanges {target: rectx: 200}}]transitions: [// This adds a transition that defaults to applying to all state changesTransition {// This applies a default NumberAnimation to any changes a state change makes to x or y propertiesNumberAnimation { properties: "x,y" }}]}

动画属性更改

Item {width: 320height: 120Rectangle {color: "green"width: 120height: 120// This is the behavior, and it applies a NumberAnimation to any attempt to set the x propertyBehavior on x {NumberAnimation {//This specifies how long the animation takesduration: 600//This selects an easing curve to interpolate with, the default is Easing.Lineareasing.type: Easing.OutBounce}}TapHandler {onTapped: parent.x == 0 parent.x = 200 : parent.x = 0}}}

其他动画

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

Item {width: 320height: 120Rectangle {color: "blue"width: 120height: 120// By setting this SequentialAnimation on x, it and animations within it will automatically animate// the x property of this elementSequentialAnimation on x {id: xAnim// Animations on properties start running by defaultrunning: falseloops: Animation.Infinite // The animation is set to loop indefinitelyNumberAnimation { 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 rectangleonTapped: xAnim.running = true}}}Item {width: 320height: 120Rectangle {id: rectanglecolor: "yellow"width: 120height: 120TapHandler {// The animation starts running when you click within the rectangleonTapped: anim.running = true;}}// This animation specifically targets the Rectangle's properties to animateSequentialAnimation {id: anim// Animations on their own are not running by default// The default number of loops is one, restart the animation to see it againNumberAnimation { 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 ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。
• QtitanNavigation：QtitanNavigationDesignUI 组件是一组 GUI 控件，它实现了菜单、导航框、命令栏等导航界面，并让您以更少的滚动和点击次数有效地查看所有实体（工作区、 格或其他项目）。
• QtitanDocking：允许您像 Visual Studio 一样为您的伟大应用程序配备可停靠面板和可停靠工具栏。黑色、白色、蓝色调色板完全支持 Visual Studio 2019 主题！

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

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