|
It's taken long enough but it's finally here: Mootools Fx for Moo3D (the 3D engine)!
You can see an application at the top of the page - the revisions scroller (use the mouse wheel to scroll between revisions).
What does it mean pratically? If you know the current Mootools.Fx, then you must know that it allows you to transform the CSS properties of an element with a nice transition and a whole bunch of parameters. The problem here was that I didn't want it to change CSS properties, but 3D properties (basically points' coordinates).
As of now, you can move an entire object (a series of points) by the provided values, meaning you cannot specify starting values or target values (these will get calculated based on the starting coordinates of each point and the provided values). An interesting side effect of Moo3DFx is that you can also apply an effect to the camera itself or the rotation axis of your scene, since they're pretty much points too.
Read further for details on how to use it, and go to the SVN to get the latest version (or just download it here).
The example, a carousel-like feature, just click and see Moo3DFx in action:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
window.addEvent('domready', function()
{
var scene = new Moo3D();
var images = $$('#moo3dfxexample img');
var points = [];
var points_nb = images.length;
var radius = 200;
var angle = (2 * Math.PI) / points_nb;
var pointsDiff = [];
var pointsFx = [];
var animating = false;
var current = 0;
//adding each image as a point around a circle
images.each(function(image, i)
{
var point_angle = angle * i - Math.PI / 1.9;
var image_width = image.width;
var image_height = image.height;
var pointX = Math.round(radius * Math.cos(point_angle));
var pointZ = Math.round(radius * Math.sin(point_angle));
//calculate the the difference between normal and expanded coordinates
pointsDiff.push({x: Math.round(radius * 2 * Math.cos(point_angle)) - pointX, z: Math.round(radius * 2 * Math.sin(point_angle)) - pointZ});
points.push(
{
element: image,
x: pointX,
y: 0,
z: pointZ,
modifiers:
{
'left': function(){return this.projection.x;},
'top': function(){return this.projection.y;},
'width': function(){return this.projection.scale * image_width;},
'height': function(){return this.projection.scale * image_height;},
'z-index': function(){return Math.round(this.projection.scale * 100);}
}
});
//creating Fx for this point
pointsFx.push(new Moo3DFx(points.getLast(), scene, {duration: 800, transition: Fx.Transitions.Elastic.easeOut}));
i++;
});
scene.add(points);
//setting the first point to expanded
points[0].x += pointsDiff[0].x;
points[0].z += pointsDiff[0].z;
scene.render();
//creating rotation Fx - renderPoints to false since rotationAxis is not a point as such, so render whole scene
var fx = new Moo3DFx(scene.options.rotationAxis, scene, {duration: 1200, transition: Fx.Transitions.Elastic.easeOut, wait: true, renderPoints: false});
//whenever a click is triggered, start animation
window.addEvent('click', function()
{
if (!animating)
{
animating = true;
//move current point back
pointsFx[current].start({x: 0 - pointsDiff[current].x, z: 0 - pointsDiff[current].z}).chain(function()
{
//rotate scene
fx.start({y: angle}).chain(function()
{
current = (current + 1) % points_nb;
//move new point forward
pointsFx[current].start({x: pointsDiff[current].x, z: pointsDiff[current].z}).chain(function(){animating = false;});
});
});
}
});
});
|
|
Comments