Animated javascript banners are just *

^{*) In fact, it is still difficult, but simpler than before.}

The story began with the formulation of the problem: you need to make an animated banner with about thirty objects using HTML + javascript in one day. The day, of course, the banner was not made, and was made for two efforts of three man-days. After the assignment, the library of batch animation remained, which I called Scenario . I want to tell about its modified version.

The main idea of ​​the library is to collect information about all animated objects in one script and send it for execution. One script can be executed as many times as desired or it can be modified, since it is the usual Javascript structure.

Running a script from anywhere is extremely simple:
')

var newScenario = [...]; $.scenario(newScenario, { complete: function(time) { alert('!'); } }); 

It remains only to figure out what to write instead of the three points in the example :)

Script Description

Any script is an array of animated objects or a single animated object. Each animated object can contain three basic properties:

• element is a pointer to an HTML element or several elements representing a given animated object. You can point to an HTML element in a thousand and one ways, so I’ll omit the detailed description of this property for now.
• scene - an array of scenes or one scene. The scene in this case refers to some actions on the animated object that have a start time and an end time.
• child is an array of child objects or one child object.

Thus, the whole script is a tree of animated objects. Moreover, the structure of this tree is not obliged to coincide with the structure of HTML elements, the animation of which is described by the script. It seems to me that starting the script is most convenient with building this tree. In the end you should get something like this:

 var newScenario = { element: '#scenario', child: [{ element: '.rocket_smile' child: [{ element: '.fire' }, { element: '.eyes' }, { element: '.ears' }] }, { element: '.rocket_atack' child: { element: '.fire' } }, { element: '.cloud', child: [{ element: ['eq', 0] }, { element: ['eq', 1] } }] }; 

And now the magic is the description of the scene object.

• time is the only required property. An array of two or three elements. The first element is the start time of the scene in milliseconds, counted from the start of the script, i.e. from the time the $ .scenario () function is called. The second is the end time counted from the same event. The total duration of the entire script is equal to the largest end time of the scene.
  The third optional element is the name of the ising function (easing) that will be used for this scene. Ising is taken from jQuery, so third-party ising functions should work fine.
• before - an object with css-properties that need to be applied to the element before the animation starts, i.e. at the time time [0].
• after - an object with css-properties to be applied to the element after the animation is completed, i.e. at the time [1].
• animate is an object that lists animated css properties and their final values. The current css-properties of the element being animated are taken as initial values. So far only numeric values ​​are supported.
• start is the function that will be called when the scene starts, immediately after applying the css-properties from the before property.
• end is a function that will be called after the scene is completed, immediately after applying the css-properties from the after property.
• step is a function that will be called at each animation step while the current time is between time [0] and time [1].

The parameters before and after allow in most cases to do without the callback functions start and end. In addition to the usual css-properties, you can specify some additional manipulations over the elements being animated: the functions show, hide, attr, removeAttr, addClass, removeClass, toggleClass are supported. A small example from which everything will become clear:

 scene: [{ time: [2500, 4000], before: { opacity: 0, show: '' }, animate: { opacity: 1 } after: { opacity: '' } }, { time: [5500, 6500], before: { addClass: 'rocket_wink' }, after: { removeClass: 'rocket_wink' } }] 

Well, the spherical code of clouds in a vacuum:

 { element: '.cloud', child: [{ element: ['eq', 0], time: [0, 7500, 'linear'], before: { top: -80, display: 'block', left: 300 }, animate: { top: 374 } }, { element: ['eq', 1], scene: [{ time: [2500, 5500, 'linear'], before: { top: -80, display: 'block', left: 500 }, animate: { top: 374 } }, { time: [5500, 9000, 'linear'], before: { top: -80, display: 'block', left: 150 }, animate: { top: 374 } }] }] } 

Note that the .cloud element has no animation at all, and the eq (0) element does not contain the scene property, but contains the time, before and animate properties - this is an opportunity to shorten the script a little more.

For mastering the basic principles is enough.

Why not do everything on jQuery.animate. Living example

I will answer the second part of the subtitle. I have prepared an example of animation made with the help of Scenario. The example is very similar to the banner, which was discussed at the very beginning, although I cut out all the identity from it and replaced the main characters with a ninja. In addition, for the sake of interest, I made the same banner on jQuery.animate (the one below).

Living example

And this is why jQuery.animate is not very suitable for such tasks:

1. Animate calls the complete function after the animation ends. But she does not cause anything before the start. Because of this feature, you have to use queues:
   

    .delay(2500) .queue(function(next) { $(this).css({top: 82, left: 74}); next(); }) .animate({top: 85}, 1500) 

   
   
2. Animate animates all HTML elements in the current jQuery object independently of each other. For each of the elements after the end of the animation, the complete function is called. The step function is called for each property of each element at each animation step. This is even more uncomfortable.
   
   
3. Through animate, you can not just run the step function for a certain time. When empty set of animated properties animate returns immediately the result. We have to use a dirty trick: animate any value from 0 to 0.
   
   
4. Many exit points of the animation. If 10 different objects finish the animation at the same time, what’s the complete event of which one to put the final banner code? Which complete event should look for this code in 10 days?
   Scenario, by contrast, has one exit point, this is the complete $ .scenario () function

Because of these problems, the following code is obtained:

 //    ,      var $rocket_smile_fire = $rocket_smile.find('.fire'); $rocket_smile_fire //  :  ,       .eq(0) //  : marginTop   0,        .animate({marginTop: 0}, { duration: 9000, step: function(x, opt) { //    this,     $rocket_smile_fire .hide() //          .eq(((new Date() - opt.startTime) / 100) % $rocket_smile_fire.length) .show(); }, complete: function() { $rocket_smile_fire.removeAttr('style'); } }); 

This, of course, sad, but you can live, if not ...

Killer feature Scenario

Imagine: the animation you do lasts 20 seconds. You make the final scene that lasts two seconds. How much time is wasted while you are viewing the banner until the last seconds? How to solve a problem in jQuery? Comment out the piece of code that does most of the work. It’s not a fact that all the objects will be in their places, because the code that moved them is commented out.

The decision from Scenario - just specify from what time to start the scene and in which to finish. Well, the playback speed can be set. And the frame rate to the heap.

An example with the ability to adjust the time

Debugging is a pleasure.

More about scripts

Without a description, the property of the element object being animated and the callback function for the scenes remain. Fill the gap. Element can have the following values:

• May be absent. In this case, the element is taken from the parent object to be animated. This can be used to group the properties of several scenes:
  

   { element: '.rocket_smile', //    scene: { time: [0, 2500, 'easeInOutSine'], animate: { top: 69 } }, //     child: { //        before: { addClass: 'rocket_wink' }, after: { removeClass: 'rocket_wink' } scene: [{ time: [0, 1000] }, { time: [2000, 3000] }, { time: [4000, 5000] }] } } 

  
  
• JQuery object For example, $ ('# scene .element');
  
  
• DOM object For example, document.
  
  
• String , css selector. It is passed to the find () method of the parent element, or to the $ () function if the parent element is missing.
  
  
• Array The first element is the name of the method of the parent element: find, eq, parent, etc. The second and subsequent elements are the arguments for this method.
  element: ['eq', 0] equivalent to $parent.eq(0) .
  If the first element is false, the parent element is ignored and arguments are passed to the $ () function.
  element: [false, 'input[name="name"]'] equivalent to $('input[name="name"]') .
  
  
• A function that returns an item. The parent element is passed through the function parameters.

The start, end, and step callback functions are executed in the context of the found element. The first argument all three take the time elapsed from the beginning of the script. Last of all is the current scene object, expanded by the animation object:

 { element: '.rocket_smile', button: $('#start-button'), scene: { time: [0, 2500], fadeDuration: 400, start: function(time, scene) { // scene.fadeDuration     // scene.button     scene.button.fadeOut(scene.fadeDuration); }, animate: { top: 69 } }, } 

The step callback function, in addition to these two parameters, accepts another parameter with detailed information about the current animation step:
- time , time from the beginning of the script;
- passed , time from the beginning of the scene;
- progress , time from the beginning of the scene, normalized over the segment 0..1;
- position , this is progress after applying the ising function.

 { element: '.rocket_atack', scene: { before: { top: 20 }, //  ,    step lastTop: 300, step: function(time, opt, scene) { //    var startTop = scene.before.top; //     var changeTop = scene.lastTop - startTop; // this —   this.css({top: startTop + changeTop * opt.position}); } } } 

Scenario Code on Github

Future plans

• Come up with a way to painlessly modify scenarios. Now, to make different scenes for browsers that support css-transformations and not, you will have to suffer, getting objects and scenes by indices in arrays.
  
  
• Implement a more flexible way to specify animated properties. At a minimum, values ​​with sign and units other than pixels:
  

   var scene = { before: { top: '20%' }, animate: { top: '40%', left: '+=200px' } } 

  
  
• Develop a visual editor with a timeline, layers, filters and push Flash from the web.
  

Many did not understand that the visual editor is a joke. I write in plain text - this is a joke.