本文主要是介绍QML：Fluid Elements，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
//Fluid Elements
//动画：
//animation.qml
import QtQuick 2.0
Image{
source: "assets/background.png"
Image{
x: 40; y: 80
source: "assets/rocket.png"
NumberAnimation on x{
to : 240
duration: 4000
loops: Animation.Infinite
}
RotationAnimation on rotation{
to: 360
duration: 4000
loops: Animation.Infinite
}
}
}
/************************************************************************************************************/
//动画元素：
PropertyAnimation(属性动画) —— 使用属性值改变播放的动画
NumberAnimation(数字动画) —— 使用数字改变播放的动画
ColorAnimation(颜色动画) —— 使用颜色改变播放的动画
RotationAnimation(旋转动画) —— 使用旋转改变播放的动画
//一些特殊场景下使用的动画
PauseAnimation(暂停动画)
SequentialAnimation(顺序动画)
ParallelAnimation(并行动画)
ParentAnimation(父元素动画) —— 使用父对象改变播放的动画
SmoothedAnimation(平滑动画)
SpringAnimation(弹簧动画)
PathAnimation(路径动画)
Vector3dAnimation(3D容器动画) ——使用QVector3d值改变播放的动画
//播放一个动画时改变一个属性或运行一个脚本
PropertyAction(属性动作) —— 播放动画时改变属性
ScriptAction(脚本动作) —— 播放动画时运行脚本
/************************************************************************************************************/
//应用动画
* 属性动画： 在元素完整加载后自动运行
* 属性动作： 当属性值改变时自动运行
* 独立运行动画： start()明确指定运行，或running属性设置为true
//ClickableImageV2.qml
import QtQuick 2.0
Item{
id: root
width: container.childrenRect.width //这样一来就不能给组件设置宽高了
height: container.childrenRect.height
property alias text: label.text
property alias source: image.source
signal clicked
Column{
id: container
Image{
id: image
}
Text{
id: label
width: image.width
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
color: "#111111"
}
}
MouseArea{
anchors.fill: parent
onClicked: root.clicked()
}
}
//三个火箭位于相同的y轴坐标，都需移动到y = 40,使用三个不同的方法来完成这个功能：
ClickableImageV3{ //NumberAnimation on
id: rocket1
x: 40; y: 200
source: "assets/rocket2.png"
text: "animation on property"
NumberAnimation on y{
to: 40;
duration: 4000
}
}
//动画加载完成立即播放，点击火箭会回到开始的位置
ClickableImageV3{
id: rocket3
x: 264; y: 200
source: "assets/rocket2.png"
text: "behavior on property"
Behavior on y{ //这个行为告诉属性值每时每刻都在变化
NumberAnimation{
duration: 4000
}
}
onClicked: y = 40
//onClicked: y = 40 + Math.random() * (205-40)
}
//点击火箭时运行，可通过行为元素的enabled: false设置行为失效
ClickableImageV3{
id: rocket3
x: 264; y: 200
source: "assets/rocket2.png"
onClicked: anim.start()
// onClicked: anim.restart()
text: "standalone animation"
NumberAnimation{
id: anim
target: rocket3
properties: "y"
from: 205 //允许动画可以重复运行
to: 40
duration: 4000
}
}
//独立动画策略,点击背景可以回到起始位置
//另一个启动/停止动画的方法是绑定一个动画的running属性，当需要用户输入控制属性时非常有用
NumberAnimation{
...
running: area.pressed
}
MouseArea{
id: area
}
/************************************************************************************************************/
缓冲曲线：
//ClickableImageV2.qml
import QtQuick 2.0
Item{
id: root
width: container.childrenRect.width + 16
height: container.childrenRect.height + 16
property alias text: label.text
property alias source: image.source
signal clicked
property bool framed: false
Rectangle{
anchors.fill: parent
color: "white"
visible: root.framed
}
}
//easingtypes.qml
import QtQuick 2.0
DarkSquare{
id: root
width: 600
height: 340
property variant easings:[
"Linear","InQuad","OutQuid","InOutQuad","InCubic","InSine",
"InCirc","InElastic","InBack","InBounce"]
Gird{
id: container
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.margins: 16
height: 20
columns: 5
spacing: 16
Repeater{
model: easings
ClickableImageV3{
framed: true
text: modelData
source: "curves/" + modelData + ".png"
onClicked: {
anim.easing.type = modelData
anim.restart();
}
}
}
}
GreenSquare{
id: square
x: 40; y: 260
}
NumberAnimation{
id: anim
target: square
from: 40; to : root.width - 40 - square.width
properties: "x"
duration: 2000
}
}
//easing.amplitude(缓冲振幅)； easing.overshoot(缓冲溢出)； easing.period(缓冲周期)
/************************************************************************************************************/
//动画分组：
//如果想同时运行几个动画，顺序执行几个动画，或在两个动画之间执行一个脚本，动画分组提供了很好的帮助
//parallelanimation.qml
import QtQuick 2.0
BrightSquare{
id: root
width: 300
height: 200
property int duration: 3000
ClickableImageV3{
id: rocket
x: 20; y: 120
source: "assets/rocket2.png"
onClicked: anim.restart()
}
ParallelAnimation{
id: anim
NumberAnimation{
target: rocket
properties: "y"
to: 20
duration: root.duration
}
NumberAnimation{
target: rocket
properties: "x"
to: 160
duration: root.duration
}
}
}
//sequentialanimation.qml
import QtQuick 2.0
BrightSquare{
id: root
width: 300
height: 200
property int duration: 3000
ClickableImageV3{
id: rocket
x: 20; y: 120
source: "assets/rocket2.png"
onClicked: anim.restart()
}
SequentialAnimation{
id: anim
NumberAnimation{
target: rocket:
properties: "y"
to: 20
duration: root.duration * 0.6
}
NumberAnimation{
target: rocket
properties: "x"
to: 160
duration: root.duration * 0.4
}
}
}
/************************************************************************************************************/
//一个足球的例子：
import QtQuick 2.0
Item{
id: root
width: 400
height: 300
property in duration: 3000
Rectangle{
id: sky
width: parent.width
height: 200
gradient.Gradient{
GradientStop{ position: 0.0; color: "#0080FF" }
GradientStop{ position: 1.0; color: "#66CCFF" }
}
}
Rectangle{
id: ground
anchors.top: sky.bottom
anchors.bottom: root.bottom
width: parent.width
gradient: Gradient{
GradientStop{ position: 0.0; color: "#00FF00" }
GradientStop{ position: 1.0; color: "#00803F" }
}
}
Image{
id: ball
x: 20; y: 240
source: "assets/soccer_ball.png"
MouseArea{
anchors.fill: parent
onClicked:{
ball.x = 20; ball.y = 240
anim.restart()
}
}
}
ParallelAnimation{
id: anim
SequentialAnimation{
NumberAnimation{
target: ball
property: "y"
to: 20
duration: root.duration * 0.4
easing.type: Easing.OutCirc
}
NumberAnimation{
target: ball
property: "y"
to: 240
duration: root.duration * 0.6
easing.type: Easing.OutBounce
}
}
NumberAnimation{
target: ball
property: "x"
to: 400
duration: root.duration
}
RotationAnimation{
target: ball
properties: "rotation"
to: 720
duration: root.duration * 1.1
}
}
}
/************************************************************************************************************/
状态与过渡：
Item{
id: root
states:[ //注意中括号
State{
name: "go"
propertyChanges{...}
}, //注意逗号
State{
name: "stop"
PropertyChanges {...}
}
]
}
//另一种切换属性的方法是使用状态元素的when属性。
/************************************************************************************************************/
//状态与过渡交通信号灯举例:
Rectangle{
id: light1
x: 25; y: 15
width : 100; height: width
radius: width/2
color: "black"
}
Rectangle{
id: light2
x: 26; y: 135
width: 100; height: width
radius: width/2
color: "black"
}
states:[
State {
name: "stop"
PropertyChanges {
target: light1
color: "red"
}
propertyChanges{
target: light2; color: "black"
}
}
State{
name: "go"
PropertyChanges{ target: light1; color: "black" }
PropertyChanges{ target: light2; color: "green" }
}
]
MouseArea{
anchors.fill: parent
onClicked: parent.state = (parent.state == "stop" ? "go" : "stop")
}
//过渡
transitions; [
Transition{
from: "stop"; to: "go"
ColorAnimation{ target: light1; properties: "color"; duration: 2000 }
ColorAnimation{ target: light2; properties: "color"; duration: 2000 }
}
]
这篇关于QML：Fluid Elements的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
