Dodging Bullets in EGL Rich UI
ChrisLaffra 060000KCEQ Comments (7) Visits (6445)
Please join me on a trip through time.
Thirty years ago
Back in the late eighties I saw a presentation by David Ungar on animation algorithms implemented in the Self programming language interface. I was blown away by the innovative ideas implemented by him and his research team. Here are some of the though-provoking animations implemented in Self:
Twenty years ago
Michael Jordan starts with the the Looney Toons cast in the movie called "Space Jam". Computer animation in movies has come a long way since then. Especially the last few years, the distinction between reality and animation is becoming increasingly blurred. A similar trend is happening in the gaming industry. Think back how the characters moved in classics, such as Space Invaders, PacMan, and Tetris. Each moved in a linear path and the animations can only be categorized using my 12-year old son's favorite phrase as being "so obviously fake!".
Ten year ago
In one of the most iconic scenes in the "Matrix" movie, Keanu Reaves learns how to dodge bullets. He moves at super-human speed and twists and turns to avoid the bullets coming at him at roughly the speed of sound.
Luckily, the directors of the movie, the Wachowski brothers, have enough empathy with the poor audience to show the scene in slow motion. Here is a still fragment:
Notice the blurry motion suggesting movement. What you cannot really see in the still of course, is how the computer animation wizards used real-life laws of physics to "correctly" model the actual movements. Newton already taught us the lesson of inertia. Things don't tend to move in a linear fashion, but they take time to get going, then they move, and then they slow down again using some mathematical function.
Three years ago
The iPhone is launched. It is immediately known for bringing many user interface innovations to the general market. One of them is the "swipe". To switch between images, you move your finger over the touch screen, and the iPhone takes over by finishing your gesture by making a nicely controlled animation of the old and new images scrolling on the screen. Few people notice the math that goes behind that simple scrolling, yet it is crucial to making the animation believable. By providing a good animation, the user actually feels like they are dragging a physical object. And for those that still feel like they need to practice, there's an app for that too:
iPhone app: Finger Sprint, only $0.99.
Animation comes to EGL Rich UI
By abstracting the JSTween library, it is now quite easy to animate browser objects believably and move them or resize them using a almost-realistic animation.
The animation in the ad at the top right is using the following mathematical function to reveal and hide the underlying links:
Don't ask me to go into the details here. EGL is designed for hiding complexities like those mathematical functions, and we very nicely wrap them into an API that can be used like this:
This defines an animator object, with a target widget and a duration. The widget can be moved to a certain location simply by calling the moveTo operation. It will then the animation function that was specified for the animator, with strongEaseIn being the default, and move it there in 2 seconds.
Therefore, the underlying jstween library will split up each animation step, and run the individual animation fragments in a separate job. Basically, it does this until it is done: move
The ad shown above is included in the project attached to this blog entry. In addition, a second example is included that shows all the different animation functions:
When the user clicks anywhere in the grey box, the yellow box is moved to that position, while being resized at the same time. You should try out the real sample here.