rum

Simple, decomplected, isomorphic HTML UI library for Clojure and ClojureScript | 0.12.8 https://github.com/tonsky/rum/blob/gh-pages/CHANGELOG.md#0128
pez 2018-10-02T08:32:36.000100Z

Thanks, @mattly. (I missed that someone answered 😃 )

pez 2018-10-02T08:37:28.000100Z

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.

mattly 2018-10-02T14:46:27.000100Z

I know in the react world the typical solution would be to just use something like: https://github.com/chenglou/react-motion

mattly 2018-10-02T14:46:57.000100Z

but I don't think this translates to cljs well

mattly 2018-10-02T14:48:23.000100Z

really if you had easing functions that you could trigger over a local state variable

mattly 2018-10-02T14:48:39.000100Z

I thought I knew of a good JS library for just easing functions but can't find it now

mattly 2018-10-02T14:52:48.000100Z

basically, take these functions: https://gist.github.com/gre/1650294

mattly 2018-10-02T14:54:25.000100Z

do a requestAnimationFrame that increments t as a function of how far along it is from startTime to startTime + animationTime

mattly 2018-10-02T14:54:51.000100Z

and then make the result of that plus your easing function the value of a local state var

pez 2018-10-02T15:28:10.000100Z

So rum rerenders on change of local state vars?

pez 2018-10-02T15:33:06.000100Z

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)))

pez 2018-10-02T15:36:46.000100Z

But that looks a bit more complicated than what you describe, @mattly. And, for reasons that are yet unclear to me, I don't seem to be able to use it to animate more than one value in a map at a time.

pez 2018-10-02T15:37:52.000100Z

So, before I continued to dig myself deeper down this hole, I started to wonder if there is a library or better pattern to use.