Drive water ring and bar preview animations from FrameAnimation

hancore.shibumi.battery/BatteryRing.qml

@@ -14,7 +14,7 @@ Item {
   readonly property bool water: true
   readonly property bool animating: liquid.animating || arcClock.running
   readonly property bool plasmaAnimating: arcClock.running
-  readonly property int waveFrame: liquid.waveFrame
+  readonly property real waveFrame: liquid.waveFrame
   readonly property real physicalPixel: 1 / Math.max(1, Screen.devicePixelRatio)
   readonly property color lightAccent: Qt.tint(accent, Qt.rgba(foreground.r, foreground.g, foreground.b, 0.55))
   readonly property color brightInk: Qt.lighter(foreground, 1.12)

hancore.shibumi.battery/WaterRing.qml

@@ -19,22 +19,24 @@ Canvas {
   property real phaseOffset: 0
   readonly property bool animationActive: water && panelOpen && (waves || bubbles)
   readonly property bool animating: clock.running
-  property int waveFrame: 0
+  property real waveFrame: 0
   property real displayedPercent: percent
 
   width: Commons.Style.space(80)
   height: width
 
   function repaint() { if (!water || panelOpen) requestPaint() }
-  Timer {
+  // Follows the display refresh; the wave keeps its 20 steps/s speed and the
+  // percent easing its 25% per 50 ms rate, whatever the frame time.
+  FrameAnimation {
     id: clock
-    interval: 50
     running: root.water && root.panelOpen && (root.waves || root.bubbles)
-    repeat: true
     onTriggered: {
-      root.waveFrame = (root.waveFrame + 1) % 72
+      const step = Math.min(frameTime, 0.1) / 0.05
+      root.waveFrame = (root.waveFrame + step) % 72
       const delta = root.percent - root.displayedPercent
-      root.displayedPercent = Math.abs(delta) < 0.1 ? root.percent : root.displayedPercent + delta * 0.25
+      root.displayedPercent = Math.abs(delta) < 0.1 ? root.percent
+        : root.displayedPercent + delta * (1 - Math.pow(0.75, step))
       root.requestPaint()
     }
   }

hancore.shibumi.control-center/ActiveBarSettingsPage.qml

@@ -588,9 +588,7 @@ Column {
       Component.onCompleted: requestPaint()
     }
 
-    Timer {
-      interval: 33
-      repeat: true
+    FrameAnimation {
       running: gapChoice.previewRunning
       onTriggered: previewCanvas.requestPaint()
     }

hancore.shibumi.cpu/WaterRing.qml

@@ -19,22 +19,24 @@ Canvas {
   property real phaseOffset: 0
   readonly property bool animationActive: water && panelOpen && (waves || bubbles)
   readonly property bool animating: clock.running
-  property int waveFrame: 0
+  property real waveFrame: 0
   property real displayedPercent: percent
 
   width: Commons.Style.space(80)
   height: width
 
   function repaint() { if (!water || panelOpen) requestPaint() }
-  Timer {
+  // Follows the display refresh; the wave keeps its 20 steps/s speed and the
+  // percent easing its 25% per 50 ms rate, whatever the frame time.
+  FrameAnimation {
     id: clock
-    interval: 50
     running: root.water && root.panelOpen && (root.waves || root.bubbles)
-    repeat: true
     onTriggered: {
-      root.waveFrame = (root.waveFrame + 1) % 72
+      const step = Math.min(frameTime, 0.1) / 0.05
+      root.waveFrame = (root.waveFrame + step) % 72
       const delta = root.percent - root.displayedPercent
-      root.displayedPercent = Math.abs(delta) < 0.1 ? root.percent : root.displayedPercent + delta * 0.25
+      root.displayedPercent = Math.abs(delta) < 0.1 ? root.percent
+        : root.displayedPercent + delta * (1 - Math.pow(0.75, step))
       root.requestPaint()
     }
   }

hancore.shibumi.temperature/WaterRing.qml

@@ -19,22 +19,24 @@ Canvas {
   property real phaseOffset: 0
   readonly property bool animationActive: water && panelOpen && (waves || bubbles)
   readonly property bool animating: clock.running
-  property int waveFrame: 0
+  property real waveFrame: 0
   property real displayedPercent: percent
 
   width: Commons.Style.space(80)
   height: width
 
   function repaint() { if (!water || panelOpen) requestPaint() }
-  Timer {
+  // Follows the display refresh; the wave keeps its 20 steps/s speed and the
+  // percent easing its 25% per 50 ms rate, whatever the frame time.
+  FrameAnimation {
     id: clock
-    interval: 50
     running: root.water && root.panelOpen && (root.waves || root.bubbles)
-    repeat: true
     onTriggered: {
-      root.waveFrame = (root.waveFrame + 1) % 72
+      const step = Math.min(frameTime, 0.1) / 0.05
+      root.waveFrame = (root.waveFrame + step) % 72
       const delta = root.percent - root.displayedPercent
-      root.displayedPercent = Math.abs(delta) < 0.1 ? root.percent : root.displayedPercent + delta * 0.25
+      root.displayedPercent = Math.abs(delta) < 0.1 ? root.percent
+        : root.displayedPercent + delta * (1 - Math.pow(0.75, step))
       root.requestPaint()
     }
   }

shared/presentation/WaterRing.qml

@@ -19,22 +19,24 @@ Canvas {
   property real phaseOffset: 0
   readonly property bool animationActive: water && panelOpen && (waves || bubbles)
   readonly property bool animating: clock.running
-  property int waveFrame: 0
+  property real waveFrame: 0
   property real displayedPercent: percent
 
   width: Commons.Style.space(80)
   height: width
 
   function repaint() { if (!water || panelOpen) requestPaint() }
-  Timer {
+  // Follows the display refresh; the wave keeps its 20 steps/s speed and the
+  // percent easing its 25% per 50 ms rate, whatever the frame time.
+  FrameAnimation {
     id: clock
-    interval: 50
     running: root.water && root.panelOpen && (root.waves || root.bubbles)
-    repeat: true
     onTriggered: {
-      root.waveFrame = (root.waveFrame + 1) % 72
+      const step = Math.min(frameTime, 0.1) / 0.05
+      root.waveFrame = (root.waveFrame + step) % 72
       const delta = root.percent - root.displayedPercent
-      root.displayedPercent = Math.abs(delta) < 0.1 ? root.percent : root.displayedPercent + delta * 0.25
+      root.displayedPercent = Math.abs(delta) < 0.1 ? root.percent
+        : root.displayedPercent + delta * (1 - Math.pow(0.75, step))
       root.requestPaint()
     }
   }