//// BEGIN HEADER //////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////// //// //// //// MOTIONHANDLER CLASS. V2.0 //// //// //// //// Copyright 2008, Jose Cao-Garcia //// //// //// //// This software is licensed under the Creative Commons //// //// Attribution-ShareAlike 2.5 License: //// //// //// //// //// //// HELP/INFO/DEVELOPER CONTACT: jose@jcao.com, http://jcao.com //// //// //// //// You are free to use and distribute this code as long as this header remains intact. //// //// If you create a derivative work from this, or modify this script significantly, //// //// please note your changes clearly and obviously below this header. //// //// //// ////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////// //// //// //// //// //// This is a general purpose, css-based, unit-independent animation object creator. It //// //// provides a lightweight, efficient, and smooth/fast animation tool for the concurrent //// //// animation of multiple document elements and element properties with ease. Some of //// //// the key features built into this creator are as follows: //// //// //// //// UNIT-INDEPENDENT ANIMATION: //// //// Most of the javascript based animation libraries that I have seen on the web require //// //// that you use an absolute unit (px) to specify element metrics. If you have built a //// //// scalable or resolution-independent website with EM-based scaling, using an animation //// //// script that depends upon px as a unit for moving properties will damage the //// //// scalability of your site. This script allows you to use any valid CSS unit you want //// //// for styling your animated elements, so you can use it on EM-scaled sites. //// //// //// //// JOB-QUEUE BASED ANIMATION: //// //// Uses a job-queue and a single timer to animate multiple elements and element //// //// properties concurrently, to keep memory footprint and cpu demand as low as possible. //// //// Job Queue permits sequential linking of multiple linear animations as one. //// //// //// //// BALANCES LOAD BETWEEN RENDERING ENGINE AND JAVASCRIPT: //// //// Uses a combination of css rendering techniques to balance the load between //// //// the javascript engine and the rendering engine. //// //// - An element with fewer animating css properties will be rendered via a method //// //// that is less javascript intense, but would otherwise be more demanding of the //// //// rendering engine if there were more animating properties. //// //// - An element with more animating css properties will be renderd via a a method //// //// that is more javascript-intensive, but allows all css properties involved to //// //// be rendered in one redraw (rather than triggering a redraw for each property). //// //// //// //// ADJUSTABLE FRAME-RATE AND SCOPE PER INSTANCE: //// //// This is an object creator fucntion, and as such, you can use it to create multiple //// //// instances of the object it yeilds. This allows you to fine-tune the animations on //// //// your web page to further balance smoothness and cpu/rendering engine load. You can //// //// create one object to manage animation of all the elements in one part of your page, //// //// at 24 frames per second for low-cpu-imact animation, and another object to manage //// //// animation of all the elements in another part of your page, at 80 frames per //// //// second for extra-smooth animation. //// //// //// //// SUPPORT FOR SHORTHAND CSS PROPERTIES: //// //// Allows you to specify animations with css shorthand, rather than having to enter //// //// multiple longhand properties for complex animations. //// //// //// //// SIMPLE DOM ELEMENT-METHOD BASED IMPLEMENTATION: //// //// Hooks into the animation methods are added to elements in the DOM, making it easy //// //// to target elements for animation. //// //// //// //// FOR MORE INFO VISIT: http://jcao.com/scripts/motionHandler/ //// //// //// ////////////////////////////////////////////////////////////////////////////////////////////////// //// END HEADER ////////////////////////////////////////////////////////////////////////////////// //// GENERAL-PURPOSE RUNTIME-BASED ANIMATION CLASS function motionHandler(fps, scope) { //////////////////////////////////////////////////////////////////////////////////// //// overall setup properties //////////////////////////////////////////////////////////////////////////////////// var root = this; //