Skip to content

Commit

Permalink
fix: re-animated v3 animations cleanup
Browse files Browse the repository at this point in the history 
- Easing Import
- FadeIn swap for Transition Import
- easing
- linear
- Extrapolate
- Interpolate
  • Loading branch information
@siddarthkay
siddarthkay committed Sep 9, 2023
1 parent 1be8d64 commit 318d131
Show file tree
Hide file tree
Showing 27 changed files with 125 additions and 800 deletions.
88 changes: 17 additions & 71 deletions src/quo/animated.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
(ns quo.animated
(:refer-clojure :exclude [abs set delay divide])
(:require ["react-native-reanimated" :default animated :refer
(clockRunning
; EasingNode
)]
(clockRunning Easing Extrapolate)]
["react-native-redash" :as redash]
[oops.core :refer [ocall oget]]
[quo.gesture-handler :as gh]
Expand Down Expand Up @@ -87,26 +85,18 @@

(def clock-running clockRunning)

;;;; commented out to upgrade react-native-reanimated to v3 and react-native to 0.72
;;;;; TODO: replace this with an updated implementation
;;;TypeError: undefined is not an object (evaluating
;;;'shadow.js.shim.module$react_native_reanimated.EasingNode.bezier')
;(def bezier (.-bezier ^js EasingNode))

;;;ERROR TypeError: undefined is not an object (evaluating
;;;'shadow.js.shim.module$react_native_reanimated.EasingNode.linear')
;(def linear (.-linear ^js EasingNode))


;;; They depend on bezier and linear
;(def easings
; {:linear linear
; :ease-in (bezier 0.42 0 1 1)
; :ease-out (bezier 0 0 0.58 1)
; :ease-in-out (bezier 0.42 0 0.58 1)
; :cubic (bezier 0.55 0.055 0.675 0.19)
; :keyboard (bezier 0.17 0.59 0.4 0.77)})
;
(def bezier (.-bezier ^js Easing))

(def linear (.-linear ^js Easing))

(def easings
{:linear linear
:ease-in (bezier 0.42 0 1 1)
:ease-out (bezier 0 0 0.58 1)
:ease-in-out (bezier 0.42 0 0.58 1)
:cubic (bezier 0.55 0.055 0.675 0.19)
:keyboard (bezier 0.17 0.59 0.4 0.77)})

(def springs
{:lazy {:damping 50
:mass 0.3
Expand Down Expand Up @@ -183,9 +173,6 @@
[opts]
(.block ^js animated (to-array opts)))

(defn interpolate
[anim-value config]
(.interpolateNode ^js animated anim-value (clj->js config)))

(defn call*
[args callback]
Expand All @@ -205,16 +192,13 @@
(clj->js opts)
(clj->js config)))

;;;; commented out to upgrade react-native-reanimated to v3 and react-native to 0.72
;;;;; TODO: replace this with an updated implementation
;;;ERROR Error: Oops, Missing expected object key 'log'
;(def extrapolate {:clamp (oget animated "Extrapolate" "CLAMP")})
;
(def extrapolate {:clamp (oget Extrapolate "CLAMP")})

;;; utilities
;

(def clamp (oget redash "clamp"))
(def diff-clamp (.-diffClamp ^js redash))
;

(defn with-spring
[config]
(ocall redash "withSpring" (clj->js config)))
Expand Down Expand Up @@ -284,41 +268,3 @@
(defn snap-point
[v velocity snap-points]
(.snapPoint ^js redash v velocity (to-array snap-points)))

;;;; commented out to upgrade react-native-reanimated to v3 and react-native to 0.72
;;;;; TODO: replace this with an updated implementation
;(defn with-easing
; [{v :value
; :keys [snap-points velocity offset state easing duration
; animation-over]
; :or {duration 250
; animation-over (value 1)
; easing (:ease-out easings)}}]
; (let [position (value 0)
; c (clock)
; interrupted (and* (eq state (:began gh/states))
; (clock-running c))
; vel (multiply velocity 1.5)
; to (snap-point position vel snap-points)
; finish-animation [(set offset position)
; (stop-clock c)
; (set animation-over 1)]]
; (block
; [(cond* interrupted finish-animation)
; (cond* animation-over
; (set position offset))
; (cond* (neq state (:end gh/states))
; [(set animation-over 0)
; (set position (add offset v))])
; (cond* (and* (eq state (:end gh/states))
; (not* animation-over))
; [(set position
; (re-timing
; {:clock c
; :easing easing
; :duration duration
; :from position
; :to to}))
; (cond* (not* (clock-running c))
; finish-animation)])
; position])))
154 changes: 0 additions & 154 deletions src/quo/components/animated/pressable.cljs
View file

This file was deleted.

70 changes: 27 additions & 43 deletions src/quo/components/animated_header.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,10 @@
(merge
{:background-color (:ui-background @colors/theme)}
(when (and offset platform/android?)
{:elevation (animated/interpolate
value
{:inputRange [0 offset]
:outputRange [0 4]
;commented out to upgrade react-native-reanimated to v3 and react-native to 0.72
;TODO: replace this with an updated implementation
; :extrapolate (:clamp animated/extrapolate)
})})
{:elevation 2})
(when (and offset platform/ios?)
{:z-index 2
:shadow-opacity (animated/interpolate
value
{:inputRange [0 offset]
:outputRange [0 1]
;commented out to upgrade react-native-reanimated to v3 and react-native to 0.72
;TODO: replace this with an updated implementation
; :extrapolate (:clamp animated/extrapolate)
})
:shadow-opacity 0.4
:shadow-radius 16
:shadow-color (:shadow-01 @colors/theme)
:shadow-offset {:width 0 :height 4}})))
Expand All @@ -44,15 +30,11 @@
[]
(let [y 0 ;;(animated/value 0)
animation-value 0 ;;(animated/value 0)
animation (animated/with-timing-transition
animation-value
{:duration 250
;commented out to upgrade react-native-reanimated to v3 and react-native to
;0.72
;TODO: replace this with an updated implementation
; :easing (:ease-in animated/easings)
})
on-scroll (animated/on-scroll {:y y})
; animation (animated/with-timing-transition
; animation-value
; {:duration 250
; :easing (:ease-in animated/easings)})
; on-scroll (animated/on-scroll {:y y})
layout (reagent/atom {})
offset (reagent/atom 0)
on-layout (fn [evt]
Expand Down Expand Up @@ -81,28 +63,30 @@
:title-component [animated/view {:style (title-style @layout)}
[extended-header
{:value y
:animation animation
; :animation animation
:minimized true
:offset @offset}]]
:title-align :left}
(dissoc props :extended-header))]]
(into [animated/scroll-view
{:on-scroll on-scroll
:refreshControl (when refresh-control
(refresh-control
(and @refreshing-sub
@refreshing-counter)))
:style {:z-index 1}
:scrollEventThrottle 16}
[animated/view {:pointer-events :box-none}
[animated/view
{:pointer-events :box-none
:on-layout on-layout}
[extended-header
{:value y
:animation animation
:offset @offset}]]]]
children)])))
(into [animated/scroll-view
{
; :on-scroll on-scroll
:refreshControl (when refresh-control
(refresh-control
(and @refreshing-sub
@refreshing-counter)))
:style {:z-index 1}
:scrollEventThrottle 16}
[animated/view {:pointer-events :box-none}
[animated/view
{:pointer-events :box-none
:on-layout on-layout}
[extended-header
{:value y
; :animation animation
:offset @offset}]]]]
children)
])))

(defn header
[{:keys [use-insets] :as props} & children]
Expand Down
Loading

0 comments on commit 318d131

Please sign in to comment.