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 [email protected].
For more options, visit https://groups.google.com/d/optout.
