Mootools : Loading Canvas : Cerlces

03-06-2013
Kevin Lancien

La balise canvas permet bien des choses. Sur notre site, vous pouvez rencontrer cette balise sur plusieurs pages, et également sous forme d'un loading qui nous permet de vous faire patienter pendant le chargement d'une ressource :)

Voici notre classe JS (MooTools) qui permet de générer notre loading, avec quelques options paramétrables dont : la taille, la couleur et les fps.

Cette classe créé un canvas en mémoire, que vous pouvez ensuite injecter dans votre page, ou bien dessiner dans un autre canvas. Voici le code JS :

var Loading = new Class({
||t||Implements: [Events, Options],

||t||options: {
||t||||t||'size' : 100,
||t||||t||'color' : '#ffffff',
||t||||t||'fps':60
||t||},

||t||initialize: function(options){
||t||||t||this.setOptions(options);
||t||||t||this.canvas = new Element('canvas', {'width' : this.options.size, 'height' : this.options.size});
||t||||t||if (this.canvas.getContext){
||t||||t||||t||this.ctx = this.canvas.getContext("2d");
||t||||t||||t||this.enabled = true;

||t||||t||||t||this.ctx = this.canvas.getContext("2d");
||t||||t||||t||this.radian = Math.PI/180;
||t||||t||||t||this.counter = 0;
||t||||t||||t||this.direction = 1;

||t||||t||||t||this.ctx.strokeStyle = (this.options.color.test(/\#[A-Fa-f0-9]{6}/)) ? this.options.color : '#fff';
||t||||t||||t||this.ctx.lineCap = 'round';
||t||||t||||t||this.ctx.lineWidth = Math.floor(this.options.size/100*5);

||t||||t||||t||this.startAnimation();
||t||||t||}else{
||t||||t||||t||this.enabled = false;
||t||||t||||t||return true;
||t||||t||}
||t||},

||t||drawCircles: function(){
||t||||t||this.ctx.save();
||t||||t||this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

||t||||t||this.ctx.translate(this.canvas.width/2, this.canvas.height/2);

||t||||t||this.drawCircle((this.options.size/12)*1, 3*(Math.PI/2), Math.PI/2, this.counter, 29);
||t||||t||this.drawCircle((this.options.size/12)*2, 3*(Math.PI/2), Math.PI/2, this.counter, 37);
||t||||t||this.drawCircle((this.options.size/12)*3, 2*(Math.PI), 4*Math.PI/5, -this.counter, 16);
||t||||t||this.drawCircle((this.options.size/12)*4, 3*(Math.PI/2), Math.PI/2, this.counter, 12);
||t||||t||this.drawCircle((this.options.size/12)*5, 3*(Math.PI/2), Math.PI/2, -this.counter, 26);

||t||||t||this.counter++;
||t||||t||this.ctx.restore();
||t||},

||t||drawCircle: function(radius, angleStart, angleEnd, direction, speed){
||t||||t||var angleDisplacementUnit = this.radian * (speed / 5 );
||t||||t||this.ctx.beginPath();
||t||||t||this.ctx.arc(0, 0, radius, (angleDisplacementUnit * direction + angleStart), (angleDisplacementUnit * direction + angleEnd), true);
||t||||t||this.ctx.stroke();
||t||},

||t||stopAnimation: function(){
||t||||t||clearInterval(this.timer);
||t||},

||t||startAnimation: function(){
||t||||t||this.timer = this.drawCircles.periodical(1000/this.options.fps, this);
||t||}
});

Suivi de l'intanciation, où vous pouvez spécifier les options que vous souhaitez. (Le code générant une couleur aléatoire est là jsute pour la démo :) 

window.addEvent('domready', function(){
||t||$$('.box').each(function(box, index){
||t||||t||var loading = new Loading({
||t||||t||||t||'size' : 50 + 15 * index,
||t||||t||||t||'color' : getRandomHexa(),
||t||||t||||t||'fps' : 30 + 5 * index
||t||||t||});
||t||||t||loading.canvas.inject(box);
||t||});
});

var colorChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
function getRandomHexa(){
||t||var hexa = '#';
||t||for (var i = 0; i < 6; i++)
||t||||t||hexa += colorChars.getRandom();
||t||return hexa;
}

 

Télécharger la démonstration/fichiers souces

Télécharger

Apporter votre contribution

Expérience utilisateur

Wandi vous propose de découvrir une nouvelle approche de la navigation sur un site web...
Êtes-vous prêt ?

Démarrer l'expérience