欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-03 15:01:06
...

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

流畅的用户界面

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开发框架入门级教程:用例 - QML中的动画
            
    
    
        qtUIqmlc++ 
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产品教程、下载、正版授权资讯,请点击获取

相关标签: qt UI qml c++