spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dlab / 9904
Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source
 
  Animation principles
 
 

Now that we've discussed the effects of motion on different visual aspects of the moving object, let's concentrate on the motion proper and try to figure out what constitutes an engaging but not annoying computer animation. We'll do this by listing a number general principles rather than describing particular tricks or techniques.

The first thing you should bear in mind is that, common as it is, animated graphics on the essentially static Web is still a very strong means on emphasis. As such, it must be used very reservedly so as to avoid annoying or overwhelming the user. For many designers, especially beginners, playing with animation is a lot of fun, but not always they manage to make it equally enjoyable for their viewers. Even if your goal is to dazzle your visitors by an intensive, high quality animated presentation (such as the olympic.org web site) - and if you possess sufficient design skills for such undertaking - remember to leave enough static keystones, i.e. objects of consistent position and appearance that will help your users to navigate through the site and get the message you want to deliver.

Another, much more specific and much less obvious principle is: Follow the natural inherent motions for any objects you animate. In part, this is similar to the "learning from physical world" principle discussed earlier. However, natural motion is a bit more abstract concept; it's not as simple as apples always dropping down, and balloons, always ascending. Finding an engaging natural motion for an object may involve analyzing many of its aspects, including its inherent static dynamism, architectonics, common patterns of perception, etc.

Thus, the text fragment in Fig. 1 moves horizontally exactly because we read it in that direction, which is therefore natural for such an element. (Note, however, that left-to-right is not always the most natural direction for textual objects.) Animation teasers used in my two previous columns (Fig.3) present a more sophisticated example. For Beziers, it is natural to "dance" with their endpoints fixed and the curvature range more or less constant; a superposition of three such dancing lines, with shifted phases, makes for an interesting animation sequence. For circles, one of the most natural "modes of operation" is blowing up (enlarging) and imploding back into a central point; combined with the push and pull forces applied to a horizontal line, they result in a simple yet neat movie making a good use of all of the available space.

 

Figure 3, a Figure 3, b
a b
  Fig. 3:  Each geometric figure has its own "most natural movement," which additionally depends on the current design context surrounding it  

  The rationale behind using natural movements is that our eye has already expected things to behave as the animator made them behave. The fulfillment of these expectations is the source of the psychological pleasure that translates into a high aesthetic estimate of the image we are viewing. However, to keep your viewer's attention, you need to learn the secret of "being engaging" rather than just "being natural." This is best achieved by using nonlinear motion patterns described in the next section.  

Comments are welcome
Produced by Dmitry Kirsanov and

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery
Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
  Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Fixing MySQL Replication · Firewall Guide: First Steps to Securing the Enterprise · VoxOx Tames the Tumultuous Communications Tangle

Created: Apr. 14, 1999
Revised: Apr. 14, 1999

URL: http://www.webreference.com/dlab/9904/principles.html