mootools fx bezier

by Danijel

HTML

<div id="box">
    <div id="img"></div>
</div>

<div id="add">Start</div>
<div id="rem">Unset</div>

CSS

#box {
    width:300px;
    height:300px;
    position:relative;
    border: 1px solid black;
}

#img {
    width:50px;
    height:50px;
    background:red;
    border: 1px solid black;
    position: absolute;
    top: 10px;
    left: 10px;
}

#add {
    float: left;
    clear:left;
    margin: 0 5px 0 0;
    padding: 0 4px;
    border:1px solid black;
}

#rem {
    float: left;
    padding: 0 4px;
    border:1px solid black;
}

JavaScript

Fx.Bezier = new Class({

	Extends: Fx,
	
	initialize: function ( element, options ) {
		this.element = document.id(element);
		this.parent(options);
	},
	
	set: function ( now ) {
		var pos = this.get_points( now );
		this.element.setStyles( { 'left': pos.x, 'top': pos.y } );
		return this;
	},	
	
	start: function( from, to ) {
		return this.parent( from, to );
	},
				
	get_points: function( t ) {
		var p = this.options.points;
		var t1 = 1-t;
		return {
			x: p.x0*t*t*t + p.x1*3*t*t*t1 + p.x2*3*t*t1*t1 + p.x3*t1*t1*t1,
			y: p.y0*t*t*t + p.y1*3*t*t*t1 + p.y2*3*t*t1*t1 + p.y3*t1*t1*t1
		};
	}

});	

Element.Properties.bezier = {

	set: function(options){
		this.get('bezier').cancel().setOptions(options);
		return this;
	},

	get: function(){
		var bezier = this.retrieve('bezier');
		if (!bezier){
			bezier = new Fx.Bezier(this, {link: 'cancel'});
			this.store('bezier', bezier);
		}
		return bezier;
	}
  
};


$( 'img' ).set({
	'bezier': { 
		points: { x0: 10, y0: 10, x1: 250, y1: 0, x2: 250, y2: 250, x3: 100, y3: 250 },
		duration: 1500, 
		transition: Fx.Transitions.Expo.easeIn
	}			
});	

$('add').addEvent('click', function() {
	$( 'img' ).get( 'bezier' ).start( 1, 0 )				
		.chain( function() {
			var points = this.options.points;
			
			this.setOptions({
				points: { x0: points.x3, y0: points.y3, x1: (points.x3-points.x2)+points.x3, y1: points.y2, x2: 0, y2: 0, x3: 150, y3: 150 },
				transition: Fx.Transitions.Expo.easeOut
			}).start( 1, 0 );

		});				
  
});			


$('rem').addEvent('click', function() {
	$( 'img' ).get( 'bezier' )
		.cancel()
		.setOptions({
			points: { x0: 10, y0: 10, x1: 250, y1: 0, x2: 250, y2: 250, x3: 100, y3: 250 },
			transition: Fx.Transitions.Expo.easeIn
		});

	$('img').removeProperty('style');
});