How should an animation behave when it is cancelled/changed?
For example, let's say I have a button in my application that triggers the visibility of a tool panel. When the panel is shown, an animation slides it into view; when it is hidden, it slides off screen. To make the movement more realistic, the animation eases in/out (it accelerates at the start and slows down at the end).
What should happen if the user clicks the toggle button when the panel is halfway in view? Should the "slide in" animation:
- A: simply continue to fully show the panel, with the "slide out" animation queued behind it?
- B: stop immediately and start the "slide out" animation?
- C: decelerate its movement, then switch to the "slide out" animation?
If B or C, how long should the partial "slide out" animation take? If the full animation takes 200ms, should it be re-timed proportionally (100ms if the panel is halfway on screen), or should it still take up the full 200ms cycle (resulting in a slower movement of the panel as it slides out)?