Animation attempt

Design review: create profile password
2024-01-25 13:30:07 +01:00 · 2024-01-24 14:45:55 +01:00
2 changed files with 21 additions and 8 deletions
@@ -3,7 +3,7 @@
 (def container
  {:height             40
   :flex-direction     :row
-   :padding-horizontal 20
+   :padding-horizontal 16
   :align-items        :center})

 (defn text
@@ -6,6 +6,7 @@
    [quo.foundations.colors :as colors]
    [react-native.core :as rn]
    [react-native.linear-gradient :as linear-gradient]
+    [react-native.reanimated :as reanimated]
    [react-native.svg :as svg]
    [utils.i18n :as i18n]))

@@ -28,15 +29,23 @@
   :info        {:color colors/white-opa-40}
   :alert       {:color colors/danger-60}})

-(defn circular-progress
+(defn f-circular-progress
  [{:keys [color percentage]}]
-  (let [strength-indicator-radius        6.5
-        strength-indicator-circumference (* 2 Math/PI strength-indicator-radius)]
+  (let [strength-indicator-radius        7.5
+        strength-indicator-circumference (* 2 Math/PI strength-indicator-radius)
+        percentage-anim (reanimated/use-shared-value percentage)
+        percentage-in (reanimated/interpolate
+                        percentage-anim
+                        {:inputRange  [0 100]
+                         :outputRange [0 (* (- 100 percentage) 0.01 strength-indicator-circumference)]}
+                        {:extrapolateLeft  "clamp"
+                         :extrapolateRight "clamp"})
+        _ (js/console.log "ALWX PERC" percentage-in)]
    [svg/svg
-     {:view-box  "0 0 16 16"
-      :width     14.2
+     {:view-box  "0 0 18 18"
+      :width     15.2
      :transform [{:rotate "270deg"}]
-      :height    14.2}
+      :height    15.2}
     [svg/circle
      {:cx           8
       :cy           8
@@ -51,10 +60,14 @@
       :fill              :transparent
       :stroke-width      1.2
       :stroke-dasharray  strength-indicator-circumference
-       :stroke-dashoffset (* (- 100 percentage) 0.01 strength-indicator-circumference)
+       :stroke-dashoffset percentage-in
       :stroke            color}]
     [svg/circle]]))

+(defn circular-progress
+  [params]
+  [:f> f-circular-progress params])
+
 (defn strength-indicator
  [type]
  (let [{:keys [color percentage]} (strength-divider-types type)]
Author	SHA1	Message	Date
alwx	1223b96890	Animation attempt	2024-01-25 13:30:07 +01:00
alwx	c552fd9f5d	Design review: create profile password	2024-01-24 14:45:55 +01:00