Awesome!
So, `Animation.speed` was made to handle the specific case of getting a
reasonable default for rotating things. It's not really intended to be
used widely...but Im still open to hearing use cases :)
First, heres why `Animation.speed` is present in the library at all and why
its only used as the default interpolation for rotation.
Lets say I tell something to "Rotate 872 degrees" vs saying "Rotate 36
degrees". It's actually pretty reasonable to assume that it will have the
same speed to go to each value. However you can't achieve that result with
duration + easing (where the duration for both of those rotations would be
the same, making one ridiculously fast.) You also can't use springs in
this situation because it looks pretty weird. The duration is just however
long it takes to get to the target value at that speed.
Now that I've given you way too information on that subject:) lets talk
about what you are actually trying to do.
I'm assuming you're literally animating some number of drops per second?
The basic way to approach it would be to just using duration + easing
Something like
Animation.interrupt
[ Animation.loop
[ Animation.toWith
(easing { ease = identity
, duration = 0.33 * second
}
)
[ top (percent 100)
]
, Animation.set
[ top (percent 0)
]
]
]
Though in real life the drops will always fall at the same speed, so we
could have a `Animation.wait` step in there that varies. So you could find
what the duration is for a drop that feels the most natural and just vary
the wait step to fill the spaces between.
Or, alternatively, don't worry about creating a looping animation. Get a
time subscription and just worry about starting an animation every nth
milliseconds.
So, every time period, just run:
Animation.interrupt
[ Animation.set
[ top (percent 0)
]
, Animation.to
[ top (percent 100)
]
]
It'll only run into issues if you try to animate them too fast :)
Hopefully all this helps!
On Wednesday, September 21, 2016 at 5:34:31 PM UTC-4, Brian Marick wrote:
>
>
> > On Sep 21, 2016, at 4:19 PM, Brian Marick <mar...@roundingpegs.com
> <javascript:>> wrote:
> >
> > This is working nicely for me, a CSS (and animation newbie). Naive
> question: what is the relationship between `Animation.speed {perSecond :
> Float}` and the duration of the animation (or the `animation-duration`
> property)?
>
> To put this into context: I need to produce an animation in support of
> exercises on setting up IV drops. I need to implement phrases like “3 drops
> per second”.
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
