This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-10-02
Channels
- # 100-days-of-code (1)
- # announcements (2)
- # beginners (122)
- # boot (5)
- # calva (5)
- # cider (54)
- # cljdoc (1)
- # clojure (132)
- # clojure-brasil (1)
- # clojure-italy (4)
- # clojure-nl (6)
- # clojure-uk (105)
- # clojurescript (43)
- # core-async (17)
- # cursive (14)
- # datomic (60)
- # emacs (35)
- # figwheel-main (44)
- # fulcro (70)
- # graphql (1)
- # jobs (19)
- # jobs-discuss (5)
- # leiningen (5)
- # luminus (2)
- # off-topic (40)
- # onyx (2)
- # overtone (5)
- # re-frame (36)
- # reagent (29)
- # ring-swagger (20)
- # rum (13)
- # shadow-cljs (19)
- # testing (5)
- # tools-deps (25)
- # vim (5)
Now another question. With reagent I liked to use reanimated
for smooth tweening of values. Is there something similar for rum? Reanimated lets me have animated and reactive atoms that I deref and then can trust reagent to react on.
I know in the react world the typical solution would be to just use something like: https://github.com/chenglou/react-motion
basically, take these functions: https://gist.github.com/gre/1650294
do a requestAnimationFrame that increments t as a function of how far along it is from startTime to startTime + animationTime
and then make the result of that plus your easing function the value of a local state var
I actually have some easing functions and a tween function that I've adapted from some code I found somewhere:
(defn easeOutQuad
[elapsed-t duration]
(let [dt (/ elapsed-t duration)]
(* dt (- 2 dt))))
(defn easeLinear
[elapsed-t duration]
(let [dt (/ elapsed-t duration)]
dt))
#?(:cljs ;; TODO: Add signature for choosing ease function
(defn tween-to! [state key new-value duration]
(let [anim-key (keyword (str (name key) "-anim"))
initial-value (key @state)]
(letfn [(tick [_]
(let [a-map (anim-key @state)
t (- (.now js/Date) (::t0 a-map))]
(if (< t duration)
(let [progress (easeLinear t duration)
new-val (+ (::initial-value a-map)
(* progress (::delta a-map)))]
(swap! state assoc key new-val
::ticker (js/requestAnimationFrame tick)))
(do
(js/cancelAnimationFrame (::ticker a-map))
(swap! state dissoc anim-key)
(swap! state assoc key new-value)))))]
(swap! state assoc anim-key
{::t0 (.now js/Date.)
::ticker (js/requestAnimationFrame tick)
::delta (- new-value initial-value)
::initial-value initial-value}))))
:clj
(defn tween-to! [state key new-value duration]
(swap! state assoc key new-value)))