Commit bbfc1317 authored by Devin Lin's avatar Devin Lin 🎨
Browse files

Add clock intro animation

parent c9a40618
Pipeline #71583 passed with stage
in 18 seconds
......@@ -15,10 +15,15 @@ import org.kde.plasma.core 2.0 as PlasmaCore
Item {
id: representation
property int hours
property int minutes
property int seconds
property double hours: 0
property double minutes: 0
property double seconds: 0
property int realHours
property int realMinutes
property int realSeconds
// update time each second
Timer {
running: true
repeat: true
......@@ -26,11 +31,37 @@ Item {
interval: 1000
onTriggered: {
let date = new Date();
hours = date.getHours();
minutes = date.getMinutes();
seconds = date.getSeconds();
realHours = date.getHours();
realMinutes = date.getMinutes();
realSeconds = date.getSeconds();
}
}
// open dial hands moving animation
NumberAnimation on hours {
id: hoursShowAnimation
to: new Date().getHours()
running: true
duration: 1500
easing.type: Easing.OutQuint
onFinished: representation.hours = Qt.binding(() => representation.realHours)
}
NumberAnimation on minutes {
id: minutesShowAnimation
to: new Date().getMinutes()
running: true
duration: 1500
easing.type: Easing.OutQuint
onFinished: representation.minutes = Qt.binding(() => representation.realMinutes)
}
NumberAnimation on seconds {
id: secondsShowAnimation
to: new Date().getSeconds()
running: true
duration: 1500
easing.type: Easing.OutQuint
onFinished: representation.seconds = Qt.binding(() => representation.realSeconds)
}
PlasmaCore.Svg {
id: clockSvg
......@@ -90,13 +121,14 @@ Item {
verticalRotationOffset: clock.verticalShadowOffset
rotation: 180 + hours * 30 + (minutes/2)
svgScale: clock.svgScale
animateRotation: !hoursShowAnimation.running
}
AnalogClockHand {
elementId: "HourHand"
rotationCenterHintId: "hint-hourhand-rotation-center-offset"
rotation: 180 + hours * 30 + (minutes/2)
svgScale: clock.svgScale
animateRotation: !hoursShowAnimation.running
}
AnalogClockHand {
......@@ -106,12 +138,14 @@ Item {
verticalRotationOffset: clock.verticalShadowOffset
rotation: 180 + minutes * 6
svgScale: clock.svgScale
animateRotation: !minutesShowAnimation.running
}
AnalogClockHand {
elementId: "MinuteHand"
rotationCenterHintId: "hint-minutehand-rotation-center-offset"
rotation: 180 + minutes * 6
svgScale: clock.svgScale
animateRotation: !minutesShowAnimation.running
}
AnalogClockHand {
......@@ -121,12 +155,14 @@ Item {
verticalRotationOffset: clock.verticalShadowOffset
rotation: 180 + seconds * 6
svgScale: clock.svgScale
animateRotation: !secondsShowAnimation.running
}
AnalogClockHand {
elementId: "SecondHand"
rotationCenterHintId: "hint-secondhand-rotation-center-offset"
rotation: 180 + seconds * 6
svgScale: clock.svgScale
animateRotation: !secondsShowAnimation.running
}
PlasmaCore.SvgItem {
......
......@@ -2,6 +2,7 @@
* Copyright 2012 Viranch Mehta <viranch.mehta@gmail.com>
* Copyright 2012 Marco Martin <mart@kde.org>
* Copyright 2013 David Edmundson <davidedmundson@kde.org>
* Copyright 2021 Devin Lin <espidev@gmail.com>
*
* SPDX-License-Identifier: GPL-2.0-or-later
*/
......@@ -13,6 +14,8 @@ import org.kde.plasma.core 2.0 as PlasmaCore
PlasmaCore.SvgItem {
id: handRoot
property bool animateRotation: true
property alias rotation: rotation.angle
property double svgScale
property double horizontalRotationOffset: 0
......@@ -57,9 +60,9 @@ PlasmaCore.SvgItem {
Behavior on angle {
RotationAnimation {
id: anim
duration: 200
duration: animateRotation ? 400 : 0
direction: RotationAnimation.Clockwise
easing.type: Easing.OutElastic
easing.type: animateRotation ? Easing.OutElastic : Easing.Linear
easing.overshoot: 0.5
}
}
......
......@@ -64,6 +64,15 @@ Kirigami.ScrollablePage {
height: clockRadius * 2
width: clockRadius * 2
}
// clock rotation animation at app launch
transform: Rotation {
origin.x: clockItemLoader.width / 2
origin.y: clockItemLoader.height / 2
angle: 180
NumberAnimation on angle { running: true; to: 0; duration: 800; easing.type: Easing.OutCubic }
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment