Hi!
When working on my latest project I decided to try and learn how to use animations, and specifically I’ve used @mdgriffith’s elm-style-animation package.
The aforementioned package requires saving a state for every animation in your model, and by looking at a few other packages I’ve noticed that this pattern is common. Now, it seems that this introduces two kinds of “models”: The user model and the “display” model (or internal? probably not the best name).
The user model is model that deals with the user perceivable state, for example, the displayed tab, which controls are selected, the colour scheme used etc.
The display model deals with book-keeping for tracking how to correctly render the view, for example, if we want to animate a button press, we need to know how many milliseconds had past since the clicking the button in-order to display the correct state.
How do you organise the two models? Do you keep them together, e.g.
type alias ButtonModel
= { isClicked : Bool
, animation : Animation.State
}
type alias Model
= { button1 : ButtonModel
, button2 : ButtonModel
, textBox : String
}
or maybe as two separate entities, e.g.
type alias Model
= { button1Clicked : Bool
, button2Clicked : Bool
, textBox : String
, button1Animation : Animation.State
, button2Animation : Animation.State
}
What worked well for you? What feels more clearly organised?