From 42859d377a91896a8869507a0dbac73de7d94572 Mon Sep 17 00:00:00 2001
From: reionwong <reionwong@gmail.com>
Date: Thu, 14 Oct 2021 16:03:17 +0800
Subject: [PATCH] Add battery percentage animation

---
 src/qml/Battery/BatteryItem.qml |  4 ++--
 src/qml/Battery/Main.qml        | 19 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/qml/Battery/BatteryItem.qml b/src/qml/Battery/BatteryItem.qml
index 708b5a9..b5f20d6 100644
--- a/src/qml/Battery/BatteryItem.qml
+++ b/src/qml/Battery/BatteryItem.qml
@@ -36,7 +36,7 @@ Item {
         anchors.fill: parent
         color: Qt.rgba(FishUI.Theme.highlightColor.r,
                        FishUI.Theme.highlightColor.g,
-                       FishUI.Theme.highlightColor.b, 0.5)
+                       FishUI.Theme.highlightColor.b, 0.4)
         radius: control.radius
 
         layer.enabled: true
@@ -73,7 +73,7 @@ Item {
             Behavior on width {
                 SmoothedAnimation {
                     velocity: 1000
-                    easing.type: Easing.InOutCubic
+                    easing.type: Easing.OutSine
                 }
             }
 
diff --git a/src/qml/Battery/Main.qml b/src/qml/Battery/Main.qml
index 8e41e1e..43447d1 100644
--- a/src/qml/Battery/Main.qml
+++ b/src/qml/Battery/Main.qml
@@ -32,6 +32,21 @@ ItemPage {
     readonly property var timespanComboChoices: [qsTr("Last hour"),qsTr("Last 2 hours"),qsTr("Last 12 hours"),qsTr("Last 24 hours"),qsTr("Last 48 hours"), qsTr("Last 7 days")]
     readonly property var timespanComboDurations: [3600, 7200, 43200, 86400, 172800, 604800]
 
+    readonly property int chargePercent: battery.chargePercent
+
+    onChargePercentChanged: {
+        valueAnimation.restart()
+    }
+
+    NumberAnimation {
+        id: valueAnimation
+        target: percentLabel
+        property: "value"
+        from: percentLabel.value
+        to: batteryPage.chargePercent
+        duration: 500
+    }
+
     Battery {
         id: battery
 
@@ -83,8 +98,10 @@ ItemPage {
 
                     RowLayout {
                         Label {
+                            property int value: 0
+
                             id: percentLabel
-                            text: battery.chargePercent
+                            text: value
                             color: "white"
                             font.pointSize: 40
                             font.weight: Font.DemiBold