To do something like this you'll need an animation system being able to blend two different animations over each other (i.e. apply both at the same time).
Other than that, it's not that different from standard animations. The animation changing the appearance is just playing situational (i.e. during the "phase changes").
Something like this is trivial to do, if you're morphing different things (e.g. only switching colors).
The easiest way to do this would probably be some way to create some counter for the progress. For example - I'm using only two different states here - you could have summer and winter (ignore spring and fall for now).
Let's call this value timeOfTheYear
with a valid range from 0
to 255
(i.e. a single byte).
To animate the time/change you just let the value alternate to/from the minimum and maximum values based on your game timing. E.g. the value starts at 0
(summer) and increases till it hits 255
(winter). It then goes back to 0
, back to 255
, etc. This change can happen with a specific velocity, e.g. +-1
per millisecond.
You only do this change if you want to change time (e.g. when some special button is pushed).
Once this is implemented, you only have to animate the change as well.
As an example, you might be drawing leaves on trees. Set their transparency according to your timeOfTheYear
value (e.g. 0 -> 100%, 32 -> 90%, 127 -> 80%, 192 -> 40%, etc.).
Instead of changing the opacity/transparency you could as well draw some animation frame based on this (which is what Giana Sisters is doing). For example, at 0 you draw the first frame, at 255 you draw the last frame - any other values in between draw steps between these.