qml 定时器以及几种简单动画
作者：互联网
Timer
定时器，以指定的时间间隔触发处理程序。
属性
interval: int
设置触发器之间的时间间隔（以毫秒为单位）。默认间隔为1000毫秒。
repeat: bool
定时器是否重复触发，值为true，则按照时间间隔重复触发；为false，则在指定时间间隔触发一次后就停止（即running被置位false）。
running: bool
为true时，启动定时器，否则停止定时器。默认为false。
triggeredOnStart: bool
启动定时器时，通常是在指定时间间隔之后才会第一次触发，有时候希望能在启动定时器时立即触发。如果值为true，则在定时器启动时立即触发处理程序，并随后按照指定是时间间隔触发。
注意：如果repeat设置为false，则定时器将触发两次，一次是启动，然后时间间隔后一次。
信号
triggered()
定时器触发的信号。
注意对应的处理程序是onTriggered。
方法
restart()
重新启动定时器。
如果定时器未运行，则启动该定时器；如果定时器正则运行，则会先停止定时器，然后马上又启动。
Item {
visible: true
width: 500
height: 300
Timer {
id:timer
interval: 500 //设置定时器定时时间为500ms,默认1000ms
running: true //是否开启定时，默认是false，当为true的时候，进入此界面就开始定时
repeat: true //是否重复定时,默认为false
onTriggered: time.text = Date().toString() //定时触发槽,定时完成一次就进入一次
}
Text {
id: time
font.pixelSize: 20
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 200
}
MouseArea{
anchors.fill: parent
onClicked: timer.stop(); //开启定时器
onDoubleClicked: timer.start();
}
}
Animation
在qml中， Animation是所有动画类的基类，其中有一个属性应该注意，那就是alwaysRunToEnd.它默认为false，如果设置了true，那么无论你是调用了Animation的stop()或者设置running属性为false，动画都会从头到尾的执行完毕。
一些常⽤的动画：
PropertyAnimation（属性动画）- 使⽤属性值改变播放的动画
Rectangle{
id: rootItem
width: 360
height: 240
color: "#EEEEEE"
Rectangle{
id: rect
width: 50
height: 150
anchors.centerIn: parent
color: "blue"
PropertyAnimation{
id: animation
target: rect
property: "width"
// 改变多个属性可以用properties来设置，不过to属性设置的值会将应用你设置的多个属性，因此，用这种方法时，最后设置同一类的属性。比如高度和宽度
// propeties: "width, height" //属性名之间用英文逗号个离开
// 针对单一目标不仅如此，同时可以通过targets设置同时对多个目标的操作：targets： [rectA, rectB]
to: 220
duration: 2000
}
MouseArea{
anchors.fill: parent
onClicked: {
animation.running = true
}
}
//要同时改变多个属性，但是又不是同一类的
//Animation on <property>将一个PropertyAnimation与一个属性关联起来
MouseArea{
anchors.fill: parent
id: mouseArea
}
PropertyAnimation on width{
target: rect
to: 150
duration: 1000
running: mouseArea.pressed //如果不设置此属性，那么在Item加载完后就会立即执行
}
}
}
// 增加信号控制属性动画
/*
Rectangle{
id: rootItem
width: 360
height: 240
color: "#EEEEEE"
Rectangle{
id: rect
width: 50
height: 150
anchors.centerIn: parent
color: "blue"
property var animation
PropertyAnimation{
id: toSquare
target: rect
property: "width"
to: 150
duration: 4000
onStarted: {
rect.animation = toSquare
rect.color = "red"
}
onStopped: {
rect.color = "blue"
}
}
PropertyAnimation{
id: toRect
target: rect
properties: "width"
to: 50
duration: 4000
onStarted: {
rect.animation = toRect
rect.color = "red"
}
onStopped: {
rect.color = "blue"
}
}
MouseArea{
anchors.fill: parent
onClicked: {
if(rect.animation == toRect ||
rect.animation == undefined)
{
toSquare.start()
}
else
toRect.start()
}
}
}
}
*/
NumberAnimation（数字动画）- 使⽤数字改变播放的动画
Rectangle {
id:win
visible: true
width: 600
height: 300
Rectangle{
y:win.height/2
id:source
width: 100
height: 100
color: "red"
}
NumberAnimation {
id:xChange
target: source
to:win.width-source.width
property: "x"
duration: 5000
easing.type: Easing.InOutQuad
}
NumberAnimation {
id:rotationChange
target: source
to:360*5
property: "rotation"
duration: 5000
easing.type: Easing.InOutQuad
}
NumberAnimation {
id:radiusChange
target: source
to:100
property: "radius"
duration: 5000
easing.type: Easing.InOutQuad
}
MouseArea{
anchors.fill: parent
onClicked:{
xChange.start()
rotationChange.start()
radiusChange.start()
}
ColorAnimation（颜⾊动画）- 使⽤颜⾊改变播放的动画
//颜色动画渐变
Item {
id: container
width:200
height:200
Rectangle {
id: gradientRect;
width:80
height: 80
gradient: Gradient {
GradientStop { position: 0; color: "red" }
GradientStop { position: 1; color: "steelblue" }
}
visible: false
layer.enabled: true;
layer.smooth: true
}
Text {
id: text
anchors.centerIn: parent
color: "pink"
text: "Hello world!"
font.pixelSize: 32
layer.samplerName: "maskSource"
layer.enabled: true
layer.effect: ShaderEffect {
property var colorSource: gradientRect;
fragmentShader: "
uniform lowp sampler2D colorSource;
uniform lowp sampler2D maskSource;
uniform lowp float qt_Opacity;
varying highp vec2 qt_TexCoord0;
void main() {
gl_FragColor =
texture2D(colorSource, qt_TexCoord0)
* texture2D(maskSource, qt_TexCoord0).a
* qt_Opacity;
}
"
}
SequentialAnimation on font.letterSpacing {
loops: Animation.Infinite;
NumberAnimation { from: 0; to: 50; easing.type: Easing.InQuad; duration: 3000 }
ScriptAction {
script: {
container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
}
}
}
SequentialAnimation on opacity {
loops: Animation.Infinite;
NumberAnimation { from: 1; to: 0; duration: 2600 }
PauseAnimation { duration: 400 }
}
}
}
RotationAnimation（旋转动画）- 使⽤旋转改变播放的动画
Rectangle
{
id:colorChanged
color: "green"
width: 200
height: 200
radius: 30
anchors.centerIn: parent
// transformOrigin: item.right
}
RotationAnimation
{
id:rotationAnimation
target: colorChanged
to:900
direction: rotationAnimation.Clockwise
duration: 3000
}
MouseArea
{
anchors.fill: parent
onClicked: rotationAnimation.start()
}
除了上⾯这些基本和通常使⽤的动画元素，QtQuick还提供了⼀些特殊场景下 使⽤的动画：
PauseAnimation（停⽌动画）- 运⾏暂停⼀个动画
SequentialAnimation（顺序动画）- 允许动画有序播放
ParallelAnimation（并⾏动画）- 允许动画同时播放
AnchorAnimation（锚定动画）- 使⽤锚定改变播放的动画
parentAnimation（⽗元素动画）- 使⽤⽗对象改变播放的动画 SmotthedAnimation（平滑动画）- 跟踪⼀个平滑值播放的动画 SpringAnimation（弹簧动画）- 跟踪⼀个弹簧变换的值播放的动画 PathAnimation（路径动画）- 跟踪⼀个元素对象的路径的动画 Vector3dAnimation（3D容器动画）- 使⽤QVector3d值改变播放的动画PropertyAction（属性动作）- 在播放动画时改变属性
ScriptAction（脚本动作）- 在播放动画时运⾏脚本
标签：动画,定时器,height,width,qml,id,rect 来源： https://www.cnblogs.com/lllion/p/16325792.html