Diagrama animado con Raphael y CSS3

Publicado el 17 de Julio, 2012. 03:50:13 en Webmasters
Crea un diagrama muy divertido con uso de Raphaël - una pequeña biblioteca JavaScript que es ideal para trabajar con gráficos vectoriales. La idea es muy simple: vamos a sacar algunos arcos con funciones matemáticas y vamos a mostrar un porcentaje de habilidad en un círculo principal, cuando se ciernen sobre los arcos.
Vamos a empezar con la marca.

Para que se den una idea, pueden ver el demo funcionando o descargar el codigo completo que utilizamos en este tutorial.

Demo | Descargar Codigo


La estructura HTML que va a consistir en un contenedor principal con la clase 'get'. Este contenedor almacena todos los datos que necesitamos para dibujar los arcos. Luego creamos un nuevo elemento div con el "diagrama" el id que será el contenedor de los arcos:


<div id="diagram"></div>
<div class="get">
    <div class="arc">
        <span class="text">jQuery</span>
        <input type="hidden" class="percent" value="95" />
        <input type="hidden" class="color" value="#97BE0D" />
    </div>
    <div class="arc">
 
        <span class="text">CSS3</span>
        <input type="hidden" class="percent" value="90" />
        <input type="hidden" class="color" value="#D84F5F" />
    </div>
    <div class="arc">
        <span class="text">HTML5</span>
        <input type="hidden" class="percent" value="80" />
        <input type="hidden" class="color" value="#88B8E6" />
 
    </div>
    <div class="arc">
        <span class="text">PHP</span>
        <input type="hidden" class="percent" value="53" />
        <input type="hidden" class="color" value="#BEDBE9" />
    </div>
    <div class="arc">
        <span class="text">MySQL</span>
        <input type="hidden" class="percent" value="45" />
        <input type="hidden" class="color" value="#EDEBEE" />
    </div>
</div>

En el CSS que sólo hará dos cosas: ocultar los elementos con 'get' la clase y establecer la anchura y la altura del div con "diagrama" el ID:

 
.get {
    display:none;
}
 
#diagram {
    float:left;
    width:600px;
    height:600px;
}

La idea principal es crear primero un nuevo objeto de Rafael (variable 'r') y dibujar nuestro primer círculo con un radio que se especifica en el "Rad".
Luego creamos un nuevo círculo en el objeto de Rafael. Tenemos el centro del círculo (x: 300 x e y: 300px) y añadimos un poco de texto a la misma.

var o = {
    init: function(){
        this.diagram();
    },
    random: function(l, u){
        return Math.floor((Math.random()*(u-l+1))+l);
    },
    diagram: function(){
        var r = Raphael('diagram', 600, 600),
            rad = 73;
 
        r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });
 
        var title = r.text(300, 300, 'Skills').attr({
            font: '20px Arial',
            fill: '#fff'
        }).toFront();
 
    }
}
Ahora, vamos a dar un paso más.
Vamos a ampliar el objeto de Raphael con algunos atributos personalizados:
alfa - ángulo del arco
al azar - de números aleatorios del rango especificado
sx, sy - empezar a dibujar a partir de este punto
x, y - Dibujo de final en este punto
camino
M - ir al punto de partida. Ninguna línea se dibuja. Todos los datos de la trayectoria debe comenzar con una 'moveto' comando.
A - radio-x, el radio-y el eje x de rotación, de gran arco de la bandera, la bandera de barrido, x, y (leer más: https://developer.mozilla.org/en/SVG/Tutorial/Paths )


var o = {
    init: function(){
        this.diagram();
    },
    random: function(l, u){
        return Math.floor((Math.random()*(u-l+1))+l);
    },
    diagram: function(){
        var r = Raphael('diagram', 600, 600),
            rad = 73;
 
        r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });
 
        var title = r.text(300, 300, 'Skills').attr({
            font: '20px Arial',
            fill: '#fff'
        }).toFront();
 
        r.customAttributes.arc = function(value, color, rad){
            var v = 3.6*value,
                alpha = v == 360 ? 359.99 : v,
                random = o.random(91, 240),
                a = (random-alpha) * Math.PI/180,
                b = random * Math.PI/180,
                sx = 300 + rad * Math.cos(b),
                sy = 300 - rad * Math.sin(b),
                x = 300 + rad * Math.cos(a),
                y = 300 - rad * Math.sin(a),
                path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
            return { path: path, stroke: color }
        }
 
        $('.get').find('.arc').each(function(i){
            var t = $(this),
                color = t.find('.color').val(),
                value = t.find('.percent').val(),
                text = t.find('.text').text();
 
            rad += 30;  
            var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });
 
            z.mouseover(function(){
                this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
                if(Raphael.type != 'VML') //solves IE problem
                    this.toFront();
                title.animate({ opacity: 0 }, 500, '>', function(){
                    this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, 500, '<');
                });
            }).mouseout(function(){
                this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic');
            });
        });
    }
}
A continuación, vamos a recuperar todos los datos necesarios, tales como el valor porcentual, el color del arco y el texto. Aumentamos el valor del radio de cada arco y, finalmente, crear un camino nuevo arco.
En el último paso que estamos agregando algunas animaciones en vuelo estacionario. Cuando el ratón será sobre el arco del título (que se coloca en el círculo principal) está cambiando. Además, vamos a hacer el arco un poco más grande.
0 Comentarios Diagrama animado con Raphael y CSS3
No hay comentarios en este post!