Fx.Matrix

29 באוקטובר 2008

3 תגובות

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 2×2 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.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

3 תגובות

  1. Paul Bakaus3 בנובמבר 2008 ב 10:17

    Hi Nir!

    I just read the post about your work on Ajaxian, and I was wondering if you saw my blog post about my plugin Transformie: http://paulbakaus.com/?p=11&language=en .

    It basically does the very same, but it bridges CSS transforms to Internet Explorer automatically – just include the JS, and all CSS transforms will simply work. Of course, it has some limitations, as you described above as well.

    Cheers,
    Paul

    הגב
  2. Nir Tayeb3 בנובמבר 2008 ב 13:40

    Yep, I've seen it, i learned from it about IE Matrix Filter and how to use it with JavaScript (how to set the MXX values) if you look on the code you will see that it very similar to your code.

    הגב
  3. omtv4 בנובמבר 2008 ב 10:03

    Quite a useful tip. Thanks for sharing.

    הגב