Re: [elm-discuss] How to use elm-style-animation to make smoothly moving clock hand

[Brian Marick]

Thanks all. With help from Matthew Griffith, I have a spinning clock that 
works. https://github.com/marick/eecrit/tree/crude-spinning/web/elm/IV/Clock



The key bits are:

* You have to include a “not rotating” property to start with:

hourHandStartsAt hour =
  [
Animation.rotate (Animation.deg (30 * hour))
  ]

startingState =
  { hourHand = Animation.style (View.hourHandStartsAt 2)
  , minuteHand = Animation.style (View.minuteHandStartsAt 0)
  }

— The model starts as `Clock.startingState`

——  
* The hour hand has to center the coordinate system at the center of the clock 
using `transform-origin`:

, markerEnd "url(#arrow)"
, Html.Attributes.attribute "transform-origin" "260px 200px" -- TODO: 
insert x values


——  

After that, it’s a straightforward use of the library operators. (Note: I’ve 
hardcoded hand movements for now.)

spinCount n =
  Animation.easing
{
  ease = identity
, duration = n * 1.5 * second
}

advanceHours hours animation = 
  let
change  =
  [ Animation.toWith (spinCount 1) [Animation.rotate (Animation.deg 90)]
  , Animation.toWith (spinCount 1) [Animation.rotate (Animation.deg 120)]
  , Animation.toWith (spinCount 1) [Animation.rotate (Animation.deg 150)]
  , Animation.toWith (spinCount 1) [Animation.rotate (Animation.deg 180)]
  ]
  in
Animation.interrupt change animation
…

update msg model =
  case msg of
AdvanceHours hours ->
  { model
| hourHand = advanceHours 4 model.hourHand
, minuteHand = spinMinutes model.minuteHand
  }



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

Re: [elm-discuss] How to use elm-style-animation to make smoothly moving clock hand

[Duane Johnson]

On Sun, Sep 25, 2016 at 4:06 PM, Brian Marick 
wrote:

> I’m wondering how to do this. SVG lines are driven by x1, x2, y1, and y2
> coordinates, but those aren’t animatable properties in
> `elm-style-animation`.
>
> Perhaps I could have each hand in the clock have a `fill “none”`
> counterweight extending past the center of the clock face, so that I can
> rotate the whole thing around its center. I’m clumsy enough with Elm, SVG,
> elm-style-animation that I’m hoping someone can confirm/deny that will work
> before I start in on it.
>

You should be able to animate without elm-style-animation, albeit with a
little more manual work. I'd go that direction rather than spinning the
clock around and adding counterweights. It shouldn't be too difficult--if
the clocks representation of time is "minutes past midnight" (rather than
hours and minutes) you can set an integer as the "destination time" and
with each millisecond increase (or decrease) the current time until it
reaches the "destination time". Elm is clever about how it re-renders
things, including SVG, so you will get an animation rather than a complete
re-draw of everything on screen.

Duane

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

[elm-discuss] How to use elm-style-animation to make smoothly moving clock hand

[Brian Marick]

As a front end newbie, I was pleased I could make a clock hand with an arrow 
using a marker https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker 
That allows me a pretty(ish) clock hand that automagically has the arrowhead 
appropriately rotated to match the orientation of the line. Assuming I can post 
an image to this list, it looks like this:



It’s easy enough to move the hands to a new position in a jerk…jerk…jerk… way 
by drawing a completely different object. However, for this application, 
students first predict a result N hours hence, and then the app shows them what 
really happens. I’d like the hands of the clock to rotate quickly to indicate 
the passing of time while another animation shows IV fluid levels declining. 

I’m wondering how to do this. SVG lines are driven by x1, x2, y1, and y2 
coordinates, but those aren’t animatable properties in `elm-style-animation`. 

Perhaps I could have each hand in the clock have a `fill “none”` counterweight 
extending past the center of the clock face, so that I can rotate the whole 
thing around its center. I’m clumsy enough with Elm, SVG, elm-style-animation 
that I’m hoping someone can confirm/deny that will work before I start in on it.

Thanks.

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