timothypratley / reanimated

An animation library for Reagent (ClojureScript)
250 stars 14 forks source link

Just wondering why duration is fixed? #18

Open Folcon opened 6 years ago

Folcon commented 6 years ago

Thanks for this, It's a pretty neat library, I was just trying to work out how to adjust the speed of the text being displayed based on what text is being shown, and how to send a sequence of text to be displayed at different speeds :)...

I was just playing around with a variant of your example which I adapted to slowly fade in text and I was wondering why the optional parameters such as duration are fixed? Essentially is there any way I can pass in an atom of options? Especially as x can be an atom. Or am I using this incorrectly?

(defn test-display-text [text]
  (let [x (reagent/atom 0) speed (reagent/atom 20) t (reagent/atom 20000)
        speed->duration (fn [] (do (println "x" @x "t" @t "speed" @speed)
                                   @t))]
    (fn [text]
      (let [cx (anim/interpolate-to x {:duration (speed->duration)})]
        (fn a-spring-example2-component [text]
          (when (= @cx 100)
            (println "Animation Done!"))
          [:div
           [:button {:on-click (fn [e] (swap! x - 50))} "<"]
           [:button {:on-click (fn [e] (swap! x + 50))} ">"]
           [:button {:on-click (fn [e] (reset! x 0))} "0%"]
           [:button {:on-click (fn [e] (reset! x 100))} "100%"]
           [:div {:style {:width (str @cx "%")
                          :white-space :nowrap
                          :overflow    :hidden}}
            [:p text]]
           [:svg [:circle {:r 20, :cx @cx, :cy 50, :fill "green"}]]])))))
timothypratley commented 6 years ago

Hey that sounds like a great idea to me...

I think it just means that where options are passed: If the options passed are a function, then the function should be called to return a map of options, If an atom is passed it should deref to get the map of options.

Thanks for showing the use case where options might be changing.

I'm currently travelling so might not be able to make the change right now... but if you are interested in submitting a pull request I will approve it quickly :) I guess it will be something like (cond (ref? options) @options (fn? options) (options) :else options) but maybe that should be a function that can be used by wherever options are accepted.

On Sat, Nov 3, 2018 at 6:41 AM Folcon notifications@github.com wrote:

Thanks for this, It's a pretty neat library, I was just trying to work out how to adjust the speed of the text being displayed based on what text is being shown :)...

I was just playing around with a variant of your example which I adapted to slowly fade in text and I was wondering why the optional parameters such as duration are fixed? Essentially is there any way I can pass in an atom of options? Especially as x can be an atom. Or am I using this incorrectly?

(defn test-display-text [text] (let [x (reagent/atom 0) speed (reagent/atom 20) t (reagent/atom 20000) speed->duration (fn [] (do (println "x" @x "t" @t "speed" @speed) @t))] (fn [text] (let [cx (anim/interpolate-to x {:duration (speed->duration)})] (fn a-spring-example2-component [text] (when (= @cx 100) (println "Animation Done!")) [:div [:button {:on-click (fn [e] (swap! x - 50))} "<"] [:button {:on-click (fn [e] (swap! x + 50))} ">"] [:button {:on-click (fn [e] (reset! x 0))} "0%"] [:button {:on-click (fn [e] (reset! x 100))} "100%"] [:div {:style {:width (str @cx "%") :white-space :nowrap :overflow :hidden}} [:p text]] [:svg [:circle {:r 20, :cx @cx, :cy 50, :fill "green"}]]])))))

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/timothypratley/reanimated/issues/18, or mute the thread https://github.com/notifications/unsubscribe-auth/AADAkhh2o2t2FNSWSwmX8fyzfl5bFFDVks5urJ_agaJpZM4YMLdo .

Folcon commented 6 years ago

Hey @timothypratley, that sounds great. Little busy at the moment, but I'll put something together this weekend =)...

Folcon commented 5 years ago

@timothypratley Ok so I've had a think, perhaps something like?

duration-fn (fn []
               (cond
                 (fn? options)   (:duration (options))
                 (atom? options) (:duration @options)
                 :else           200))

Which would allow you to call (duration-fn) when you need the duration, and do similarly for easing?

With atom? defined as:

(defn atom? [x]
  "Tests if atom."
  (instance? cljs.core/IAtom x))

Can you think of something better?

timothypratley commented 5 years ago

I like it! My only suggestion is to use clojure.lang.IDeref instead of IAtom (if it works) because I'd like it to work with reagent atoms as well.

On Wed, Nov 14, 2018 at 12:09 PM Folcon notifications@github.com wrote:

@timothypratley https://github.com/timothypratley Ok so I've had a think, perhaps something like?

duration-fn (fn [] (cond (fn? options) (:duration (options)) (atom? options) (:duration @options) :else 200))

Which would allow you to call (duration-fn) when you need the duration, and do similarly for easing?

With atom? defined as:

(defn atom? [x] "Tests if atom." (instance? cljs.core/IAtom x))

Can you think of something better?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/timothypratley/reanimated/issues/18#issuecomment-438499420, or mute the thread https://github.com/notifications/unsubscribe-auth/AADAkm_Tr7NjKoVBcKefHnacLRwB5UBTks5uu20_gaJpZM4YMLdo .

Folcon commented 5 years ago

Might need to make that cljs.core/IDeref then? As I believe the clojure.lang version isn't in cljs?

timothypratley commented 5 years ago

Yes, you are correct. After thinking about it a bit, reagent atoms probably implement IAtom anyhow. IDeref should catch things like promises (not sure if that really matters).

On Wed, Nov 14, 2018 at 12:21 PM Folcon notifications@github.com wrote:

Might need to make that cljs.core/IDeref then? As I believe the clojure.lang version isn't in cljs?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/timothypratley/reanimated/issues/18#issuecomment-438501919, or mute the thread https://github.com/notifications/unsubscribe-auth/AADAkrzHt9OQQAxGZt227alZPMbV7YWfks5uu3AlgaJpZM4YMLdo .