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