moo.fx.js as lightweight standalone functionality for javascript effects

In my workings out, I use a self-signed JS framework. And everything would be fine if the other day did not need to implement a functional with smooth animation. 3 scenarios come to mind:

1. try to take everything you need for animation from a framework similar to jQuery (it turned out to be quite time-consuming exercise)
2. You can write the functionality yourself (there is a risk to think badly about the architecture or not to fail in some browsers)
3. find an independent base class with effects

As for me, option 3. the most optimal. And then I came across moo.fx ... =)

To my surprise, haborapoisk framework moo.fx.js gave nothing, so the main purpose of the topic is to pay attention to it. For the developer, moo.fx is a super easy “backbone” for writing applications using smooth animation. Its main task is to give the developer a basic architecture and interface for writing more complex effects.

Since I did not find enough documentation and examples of using moo.fx of the second version, I decided to briefly discuss the moo.fx format itself. The engine deserves attention also because the developer is Valerio Proietti (the leading developer of mootools ). Moo.fx itself was created for use in conjunction with two well-known frameworks mootools and prototype . I will not consider the use case with mootools here (since I am looking for the most lightweight standalone solution). In fact, the connection of all prototype.js is not necessary, for the operation of moo.fx, you must connect the so-called prototype.lite.js , which is included in the moo.fx package for the prototype framework . The existence of prototype.lite.js is very good, because now we can use the effects engine by connecting only 2 files:

<script type= "text/javascript" src= "prototype.lite.js" ></script><!-- ~3-4 KB -->
<script type= "text/javascript" src= "source/moo.fx.js" ></script><!-- ~3-4 KB -->

* This source code was highlighted with Source Code Highlighter .

Package delivery moo.fx.js to work with prototype.js:

1. prototype.lite.js (required) - a trimmed version of prototype.js specifically for working with moo.fx.js or the full version of prototype.js
2. moo.fx.js (required) - the basic architecture for effects
   Hereinafter the details will be
   Here you can see examples of the use of moo.fx.js
   
3. moo.fx.pack.js (optional) - an extension that includes additional effects
   - scrolling control ( Fx.Scroll )
   - color management ( Fx.Color )
   - additional functions rgbToHex (array) and hexToRgb (array)
   Here you can see examples of using moo.fx.pack.js.
   
4. moo.fx.utils.js (optional) - extension to animate the height, width, and transparency of DOM elements. It should be noted that the toggle () method works not as expected in all cases. Problems begin if you set the width / height style attributes. On the other hand, this additional functionality takes up very little space and is easy to adjust to fit your needs.
   - height control ( Fx.Height ) [total 2 methods: toggle (), show ()]
   - control width ( Fx.Width ) [total 2 methods: toggle (), show ()]
   - transparency control ( Fx.Opacity ) [total 2 methods: toggle (), show ()]
   Here you can see examples of using moo.fx.utils.js
   
5. moo.fx.accordion.js (optional) - accordion functionality (available on the moofx.mad4milk.net page itself )
6. moo.fx.transitions.js (optional) - fnk. smooth transitions based on Easing Equations by Robert Penner

The main file in this list is of course moo.fx.js - it contains the implementation of the basic effects functionality. The rest, in fact, are standard plug-ins (add-ons) that provide additional functionality. Everything is done beautifully and in the spirit of mootools - connect what you need now . A brief description of the add-on interfaces has already been carried out above; the application itself can be seen in the accompanying examples.

moo.fx.js - basic functionality (framework) for moo.fx effectants

When creating a new effect, you can change the options, which are set by default as follows:

setOptions: function (options){
this .options = Object.extend({
onStart: function (){}, //
onComplete: function (){}, //
transition: Fx.Transitions.sineInOut, // ( )
duration: 500, //
unit: 'px' , //
wait: true , // ?
fps: 50 // : Math.round(1000/this.options.fps)
}, options || {});
}

* This source code was highlighted with Source Code Highlighter .

I think it is very useful that the wait, onStart (), onComplete () parameters are incorporated into the architecture initially - this allows you to create complex effects and their queues.
')
Effects in moo.js can be applied to 2 types:

1. which manipulate one property [created via new Fx.Style (el, property, options)]
2. simultaneously changing several properties [created via new Fx.Styles (el, options)]

It is natural to refer to the main “public” methods of the effect just created:

• set: function (to) {...} - setting one or more parameters of some values
  Example (cross-browser sets the element with id = "someId" transparency value 0.5):
  

  var eff = new Fx.Style( 'someId' , 'opacity' );
eff.set(0.5);

* This source code was highlighted with Source Code Highlighter .

  
  
• hide: function () {...} - zeroing some parameter (the one for which the animation is being made). If this is the “opacity” parameter, then the usual element hiding
  Example (hide item):
  

  var eff = new Fx.Style( 'someId' , 'opacity' );
eff.hide();

* This source code was highlighted with Source Code Highlighter .

  
  
• custom: function (from, to) {...} is the most valuable method. Makes smooth animation of one or more parameters [from values ​​from to to]
  Example (simultaneous smooth animation of the element's location):
  

  var eff = new Fx.Styles( 'myElement' , {duration: 1000, transition: Fx.Transitions.linear});
eff.custom({ 'top' : [100, 400], 'left' : [300, 200]});

* This source code was highlighted with Source Code Highlighter .

  
  
• clearTimer: function () {...} - early termination of the current animation
  Example (immediately reset the first move and start the second):
  

  var eff = new Fx.Styles( 'myElement' , {duration: 1000, transition: Fx.Transitions.linear});
eff.custom({ 'top' : [100, 200], 'left' : [100, 200]}); // №1
eff.clearTimer(); // №1
eff.custom({ 'top' : [300, 100], 'left' : [200, 900]});// №2

* This source code was highlighted with Source Code Highlighter .

In this topic, I did not want to make a complete overview of the moo.fx functional, but only tried to outline the capabilities and architecture of the framework. In conclusion, I would like to note that I liked the architecture of the latest version (2.0) of this really “lightweight” framework. And I plan to use it as an independent (standalone) effects module in conjunction with another samopisnym functionality, and also write a few of its plug-ins for further expansion of its functionality.

Useful links:

• Official site of the project
• Documentation on the previous version of this framework (for the latter I did not find)
• Some examples using the previous version (version 1.2)

PS please do not strongly "torbit", I would like this first topic at the same time not to be the last =).