Reproducing A Clever Animation Product, Part 13

Today I made sure the left and right arrows could be used to advance the animation forwards or backwards by the current increment. I also highlighted the increment on the buttons used to set it.

I also learned that the slider’s oninput method calls the associated function after every change while its onchange method calls the associated function only after the mouse move is complete. Even using the slider’s oninput method, however, the added keypress processing is needed to make moving the slider with the arrow keys do anything.

Also, the arrow keys work to update the slider position and animation whether the slider has focus or not. That could turn out to be a problem is multiple items might be affected by the arrow keys, or if elements that might themselves respond to the arrow keys fail to absorb them when they have focus.

This code processes the arrow keys.

This noodleage updates the highlighting on the speed buttons.

Here is the relevant HTML. Note that using the span allows the border to be placed around the button text and not the entire button.

Just for kicks and giggles, I’ve placed the same animation in twice (in separate frames) to get an idea of the scope of processing arrow key inputs. It turns out that processing of keys is limited to each frame individually, so a) the state of each frame is independent and b) a frame has to have focus in order to process keystrokes. The animations also pause and continue independently depending on whether they are visible or have been scrolled out of view.

This entry was posted in Tools and methods and tagged , , , , . Bookmark the permalink.

Leave a Reply