In my workspace I've done some research on how to make effects with
graphical transformations. When I Googled about it, I only found that
the new Safari supports using CSS transformations. I didn't find that
IE has supported these things from earlier versions (5.5) --
though with another name: Matrix filters.
So as of now, I have 2 ways to make effects with graphical transformations:
- The
Safari way: using the 'transform' property of CSS (extensions to
the spec and proposal too) with one of its functions: skew, translate,
rotate, perspective etc. Mozilla announced that they will support that
too.
- The Internet Explorer way: using the 'filter' property
(extensions to the spec) set to 'DXImageTransform.Microsoft.Matrix', which gets a 2x2 matrix.
What's
common to both ways is the support for passing a matrix argument.
Safari's support for this option is more extensive: it can handle 3-
and 4-size matrices (the latter, for 3D projection)
So
making a graphical transformation is easy -- just passing a matrix and
voila! -- the object is transformed. But how do I integrate it into
MooTools, my JavaScript library of choice?
I've
been trying very hard to integrate it into Fx.Morph so it can live side
by side with other CSS properties, but I didn't succeed (yet!). So I've
created a class extending Fx class and learned for the first time how
to create custom effects. It is very easy, but there isn't enough
documentation about this subject. There also isn't any documentation on
the code specifying what each method in Fx/Fx.CSS does, so I read the
code and analyzed the order of the calls to each method and looked in
the source code of another custom effects of what I found while
Googling on it.
The result is the Fx.Matrix class, which I added
to my MUI project (Mootools UI). It supports the following functions:
scale, skewX, skewY, rotate, scaleNonUniform and rotateFromVector.
These transformations are the only ones which can be implemented in
both the Safari and the IE way; the rest (perspective, translate, etc.)
are only supported in Safari/Firefox 3.1, so I didn't implement them.
How to use the class?
First, create a instance:
var mfx = new Fx.Matrix(element, options) -- all options are the options of Fx class.
Then
you can use the set method, which makes the transformation without
effects. The matrix of the transformation is passed as a parameter
mfx.set([[2,0], [0, 2]]);
This code will scale (=multiply) the element by a factor of 2. The matrix is an array containing 2 arrays of 2 values each.
A more semantic way to make this is using the `Functions` static associative array, which contains all the supported transformation matrices. Thus, the code above can be written this way:
mfx.set( Fx.Matrix.Functions.scale(2) );
To
make more than one transformation at a time, you can use the `prepare`
static method of Fx.Matrix, which concatenates all matrices to one
matrix that can be supplied to the `set` method:
mfx.set( Fx.Matrix.prepare({
scale: [2],
rotate: [30] // 30 degrees
}));
The `set` method saves the matrix in Element's Storage and retrieves it when an effect is applied.
To
make transformation effects (the most interesting part of this post),
you need to use the `start` method and provide an object, as to
Fx.Morph, containing the settings of start and end values for each
transformation function you want to use:
mfx.start( {
scale:[1, 2],
skewX: [40],
skewY: [50, 0]
});
You
can pass one value to the function, and it will set the end value of
the function. It also supports two values, of which the first is the
start point and the second is the end point of the function.
View a demo of using this class.
The demo checked on IE7/8, Firefox 3.1 beta and Safari 3.1.2 on Windows Vista.
Thanks a lot to Yuval Kaplan on fixing my English.