One-Second Motion - Ajax Patterns

One-Second Motion

From Ajax Patterns

Evidence: 1/3

Tags: Copy Displace Duplicate Jump Leap Move Movement Motion Rearrange Transfer


Contents

In A Blink

TODO Diagram Object leaps from place to another (using cartoon conventions)


Goal Story

Bill is adding a new monthly bank order. What is a monthly bank order? The existing orders are shown in the usual way: as a table with one row per order, sorted by order size size? amount?. Once Bill has verified the new order form verified the data in the form? Not sure how you verify a form..., it Is "it" here the entire form? morphs to become a table row I was lost by this point. I think the example might be fine, but many of these goal stories are going to need figures/screenshots; otherwise it's just too hard to figure out what goes where, and what is being discussed., and then slowly floats down the table. It soon reaches its correct place in the sorted table--ordered by amount--and comes to rest after shaking up and down a little due to reverberation. Due to reverberation? Why? I had to look that word up as well, which may not be good for lazier readers :-)


Problem

How can you communicate that an element is shifting from one position to another?


Forces

  • An element's location is important as it can provide cues about its prominence and relationship to other elements.
  • An element sometimes needs to move from one place to another.
  • Similarly, a new element sometimes needs to be created, and then move from where it was created to another location.
  • When an element changes position, the user often needs to know about it.


Solution

Incrementally move an element from one location to another, or temporarily move it, to communicate an event has occurred. In most cases, the motion of the element shows a permanent transition from another do you mean the movement is permanent? A little unclear here what is meant.. It can also be used to show a temporary displacement or gesture, such as a vibration effect.

There are several benefits of what? moving it? highlighting the move?:

  • The motion and the extended transition time make it likely the user will notice something's happened.
  • The motion will highlight where the element is moving to (it won't get lost on the page).
  • The appearance It's not an apperance, though, right? It's a movement. will feel more natural than an abrupt change.

The effect combines Page Rearrangement with Event Scheduling. A loop runs for the second of mutation progresses This last bit didn't make sense; the loop runs for a second? The mutation takes a second to run? Both?, with each transition occurring perhaps once every 50 milliseconds. Each transition will likely involve a gradual change Isn't each transition one specific event that occurs? So it's not a gradual change (you can't gradually change something at a finite point), but a specific one, right? to the positioning style settings, usually top and left. The position style can be set as absolute or relative, depending on the overall application design.

When an element has to move from point A to point B, in most cases most cases when you move from A to B? or most cases the trajectory is the shortest distance? I know what you mean, but the structure here makes it unclear, it's logical for the trajectory to be the shortest distance from A to B. The algorithm in this case is a straightforward interpolation Statements like this -- while correct -- are going to leave newer Ajax people confused or behind. Try and be more conversational, for example, "To figure out how far along the journey an element is, just figure out what percentage of movement has occurred." Or whatever (that's not quite right, but certainly more readable by newer programmers). So, for example, one-quarter of the time into the effect, an element will be one-quarter of the way between A and B; so, if moving from left to right, the the left style of the element will be (0.25*x(A) + 0.75*x(B)), where x() represents the source and destinations' horizontal co-ordinate.

Can you create a "Note" span? Things like this below are really notes; not part of the text, but in fact commenting on the text, and adding detail not really required to get what's being said. This assumes a linear interpolation, and you can also experiment with other algorithms, e.g. you might like to accelerate the element as it proceeds.

Note that you probably won't have to hand-code motion, because libraries like scriptaculous (discussed below) are quite flexible and usually easy to incorporate into typical scripts.


Decisions

What events will trigger a motion effect?

The pattern is not very common in Web applications today, but there are several potential applications. First, a permanent movement can show any of the following:

  • A straightforward movement from one place to another.
  • One element being created or spawned from another, and then jumping out to a new location.
  • An element being introduced into a space. Instead of the element just appearing, or fading in, you could make it arrive from a logical starting point. For example, a new data point in a chart can "fly in" from the bottom-left corner.

A temporary movement has its own applications:

  • For general attention-grabbing, motion is literally a killer app - humans are wired for sensitive motion detection as a means of surival. We've all seen enough annoying banner ads to know that. Extreme cases involve rapid vibration and rapid circuitous movement, such as tracing out a square 20 times a second. Of course, these extremes are rarely justified, and you can often use more subtle approaches to get the same effect (with a lot less annoyance factor).
  • For aesthetic effect. People sometimes expect an object to move in a certain way, based on experiences in the physical world as well as learned expectations from conventions in movies, cartoons, and video games. For example, when one object moves next to another object, you would expect each to reverberate Really? Maybe if they bump, but just in general, this didn't really strike me as true. a little.
  • As a gesture. This often involves anthopomorphisation - endowing the object with human-like characteristics. In the Scriptaculous demo (discussed below), the search form shakes left and right when a validation error occurs, similar to a person shaking their head from side-to-side. Another effect would be to feign desire, by showing an element temporarily "reaching" in a certain direction, and pulling back again. This could be used as a hint to a novice user that they need to drag the element in that direction.

Since motion can be distracting, you will likely want to limit its usage to the following situations:

  • When the event is important enough to divert the user's attention to it.
  • When the user is likely to be focused on the motion already. Here, the motion is not used to attract attention, but rather to convey what's happening to the element.
  • When visualisation and motion is central to the application style; for example, if the application was tracking a car's movement every few seconds, it would probably be worthwhile animating the move between sample points.

Also, consider whether you should use motion at all. The conventional wisdom is that motion is more natural as a transition because it's based on the physical world. But how about the massive population who grew up with computers and might be perfectly comfortable with the sudden jumps that are only possible in a digital realm? I haven't seen any research one way or the other, but I suspect many in this large user base might see some popular forms of motion as a gratuitous distraction and a waste of time. Or--at best--it can be seen as a flashy effect, but not something you'd want to see everyday. This is just speculation, but you might consider performing some investigation before committing to this animation style, or perhaps allow animation in your applications to be switched off.

What will the element do when it reaches its destination?

In every example case I've seen, the element stops suddenly at its destination. However, it might appear more natural to show some reverberation if the element ends up stacked against another element.


Real-World Examples


TiddlyWiki

As detailed in oneSecondMutation, clicking on a TiddlyWiki Microlink causes the entire content to "leap out" from the link and form in a new position.

Backbase

The Backbase Portal Demo contains a page full of Portlets, arranged in three columns, each with its own menu. The menu contains all Portlets on the page, and choosing a Portlet causes it to move over to the top of the column. One-Second Motion is used to animate the Portlet's movement, allowing users to see that the Portlet has "flown in" to the top of a column from elsewhere on the page.

DHTML Lemmings

As detailed in Sprite, DHTML Lemmings involves the movement of Lemming creatures through a game space. Each Lemming is represented as a DOM element. In the pattern before this (One Second Mutation, I think), you consistently used "lemming", with a lowercase "l". Need to make these consistent.

Scriptaculous

As mentioned in One-Second Spotlight, scriptaculous is a general-purpose Javascript library. The visual effects demo supports motion-based effects.

MS-Windows

MS-Windows uses a form of One-Second Motion. When minimising a window, the whole window appears to leap downwards to its handle in the taskbar, like a large object being packed into a small container. The reverse process occurs upon activating the window. This is not an Ajaxian system, but is still significant, as its frequently cited as rationale for the kind of animation this pattern details.


Code Examples

Scriptaculous

Motion is one of the effects offered by Scriptaculous. Sometimes you capitalize Scriptaculous, and somtimes not (across patterns); need to try and firm that up,and be consistent. Examining its implementation provides an opportunity to look at the overall Scriptaculous effects engine, which also provides One-Second Spotlight and One-Second Mutation-style effects.

First, tag this as a note. Second, it confused me; how does the engine "look different", and why does it look different to "applications"? In fact, how -does- something look different to an application? Note that the engine looks a little different to most JavaScript applications because it uses Prototype to allow for a more object-oriented coding style.

The generic engine component controls the flow, by continuously delegating to an individual effect object to perform an incremental animation. Make this following sentence a note as well. This is an example of the Strategy pattern (see Gamma et al.'s "Design Patterns" for more details). The intialisation sequence initialises the frame count, computes the total effect time, and kicks off the loop:

 start: function(options) {
   ...
   this.currentFrame = 0;
   this.startOn      = new Date().getTime();
   this.finishOn     = this.startOn + (this.options.duration*1000);
   ...
   if(!this.options.sync) this.loop();
 }

The loop runs until the predicted Why is the finish time "predicted"? I didn't understand the context of that word here. finish time, at which time the animation cleans up and terminates. The most important thing here is the pos calculation, which determines how far along the animation is. The calculation is essentially: timeSoFar/timeRemaining. So, one-quarter of the way through the animation, it What is "it" here? will be 0.25. Next, a calculation takes place to support the fps option, which lets the caller state the maximum number of animation frames per second. If an animation is indeed required, the engine's render() function is called:

 loop: function() {
   var timePos = new Date().getTime();
   if(timePos >= this.finishOn) {
     this.render(1.0);
     ...
     return;  
   }
   var pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
   *** var frame = Math.round(pos * this.options.fps * this.options.duration); ***
   if(frame > this.currentFrame) {
     this.render(pos);
     this.currentFrame = frame;
   }
   this.timeout = setTimeout(this.loop.bind(this), 10);
 },

The main purpose of render() is to delegate to the effect strategy to perform the update. The strategy will receive a value between 0 and 1 to tell it how far the animation has proceeded.

The MoveBy effect takes a DOM element and tracks its start and end position. The element's style is set to relative using a call to the effect engine's makePositioned(). Because positioning is relative, you construct a MoveBy effect with relative arguments. To move an object 5 right and 10 down 5 what? units? pixels? points?, you'd pass in 5 and 10 as parameters. The effect is to increase the left style by 5 and the top style by 10:

 initialize: function(element, toTop, toLeft) {
   this.originalTop  = parseFloat(this.element.style.top || '0');
   this.originalLeft = parseFloat(this.element.style.left || '0');
   this.toTop        = toTop;
   this.toLeft       = toLeft;
   Element.makePositioned(this.element);
   ...
 }

Remember Remember? Was this ever mentioned before? that the effects engine delegates to update() for effect-specific behaviour, passing in a progress ratio between 0 and 1. In the case of MoveBy, the algorithm performs the necessary interpolation calculation to see how far along the object should be (topd and leftd). Having made the calculation, all that remains is to update the DOM element's style:

 update: function(position) {
   topd  = this.toTop  * position + this.originalTop;
   leftd = this.toLeft * position + this.originalLeft;
   this.setPosition(topd, leftd);
 },
 setPosition: function(topd, leftd) {
   this.element.style.top  = topd  + "px";
   this.element.style.left = leftd + "px";
 }

The MoveBy effect is useful in itself, to get an object from A to B. But you can build on it to create effects such as motion displacements. One such effect, included with Scriptaculous, is Shake(), which swings an element left and right a few times. With the framework in place, the effect is easily defined as a sequence of moves:

Effect.Shake = function(element) {

 return new Effect.MoveBy(element, 0, 20, 
   { duration: 0.05, afterFinish: function(effect) {
 new Effect.MoveBy(effect.element, 0, -40, 
   { duration: 0.1, afterFinish: function(effect) { 
 new Effect.MoveBy(effect.element, 0, 40, 
   { duration: 0.1, afterFinish: function(effect) {  
 ...

}


Alternatives

One-Second Spotlight and One-Second Mutation

One-Second Spotlight and One-Second Mutation are also used to draw attention to a significant event. One-Second Motion is suited to indicating an object's state has changed where there is some geometric mapping to each object's state. When used as a temporary displacement effect, the effect is sometimes an alternative to these other patterns.


Related Patterns

Sprite

A Sprite often undergoes motion similar to One-Second Motion, and can make use of similar interpolation calculations.

Guesstimate

In some cases, the motion is a form of Guesstimate. When an object is moving around according to state information, the motion effect is effectively an estimate of what's happening between positions.


Visual Metaphor

Until "Beam Me Up" instant transport technology hits the markets, every visible movement in the physical world is an illustration of this pattern.


Want to Know More?