qml 带时钟效果
qt 自带源码样例:在样例中输入clock,找到名叫Qt Quick Demo Clocks。
这个样例写的不错,还是带时差的。不过我们其实不需要这么复杂的功能。
timer启动这个就不用说了:
Timer {
interval: 100; running: true; repeat: true;
onTriggered: clock.timeChanged()
}
下面这三个才是最最重要的,时针,分针,秒针的转动。其中的x,y,origin.x,origin.y都是要重新调整坐标的。
x,y的设定要把timer停止。把时针,分针,秒针调整到重合即可。
然后把timer启动,origin.x一定要是引用的图片的资源的宽度的一半。origin.y我还没有找到规律,每次调试都是用眼睛看,汗~~~~
一定要注意时针,分针,秒针的偏转角。
Image {
x: 92.5; y: 27
source: "hour.png"
transform: Rotation {
id: hourRotation
origin.x: 7.5; origin.y: 73;
angle: (clock.hours * 30) + (clock.minutes * 0.5)
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
}
Image {
x: 93.5; y: 17
source: "minute.png"
transform: Rotation {
id: minuteRotation
origin.x: 6.5; origin.y: 83;
angle: clock.minutes * 6
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
}
Image {
x: 97.5; y: 20
source: "second.png"
transform: Rotation {
id: secondRotation
origin.x: 2.5; origin.y: 80;
angle: clock.seconds * 6
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
}