In the final episode of the series on mdgriffith/elm-style-animation, we learn how
to chain multiple animations together in a coherent way. By firing a new Msg at the end of an animation, we’re able
to keep blocks of code shorter and more maintainable.
See:
Main.elm
DealHand ->
let
card1Styles style =
Animation.interrupt
[ Animation.toWith
(Animation.easing { duration = (Time.second * 1), ease = Ease.outCubic })
[ Animation.left (Animation.rem 30)
, Animation.top (Animation.rem 30)
]
, Animation.Messenger.send FirstCardDealt
]
style
card1Style =
{ initialCardStyle
| front = card1Styles 0 initialCardStyle.front
}
in
{ model | cardStyles = [ card1Style ] } ! []
FirstCardDealt ->
let
-- Perform next animation here
in
model ! []
Animate msg ->
let
stylesAndCmds : List CardStyle -> ( List CardStyle, List (Cmd Msg) )
stylesAndCmds cardStyles =
cardStyles
|> List.map
(\s ->
let
( frontMsg, frontCmd ) =
Animation.Messenger.update msg s.front
in
( {s | front = frontMsg }, frontCmd )
)
|> List.foldr
(\( style, cmd ) ( styleList, cmdList ) ->
( style :: styleList, cmd :: cmdList )
)
( [], [] )
( styles, cmds ) =
stylesAndCmds model.cardStyles
( dealerStyles, dealerCmds ) =
stylesAndCmds model.dealerCardStyles
updated =
{ model
| cardStyles = styles
, dealerCardStyles = dealerStyles
}
in
updated ! (cmds ++ dealerCmds)