Animation im Web

Animation mit JavaScript,CSS SVG und Canvas

Cooler Triangles Tiles Effekt

http://codepen.io/mistic100/pen/JobPLK (2016-12)

<div id="tiles"></div>
<p>Enhancement of my original <a href="http://codepen.io/mistic100/pen/GFHkm">Colorful Tiles</a> with truly random animation.</p>
<p>At the end of each cycle (49 steps) a new Perlin noise map is generated.</p>

body { background:#111; }
#tiles { margin:0 auto; }
p { max-width:680px; margin:10px auto; color:white; font:16px "Calibri", sans-serif; }
a { color:#3E7289; }

(function(){
    if (!SVG.supported) {
        alert('SVG not supported !');
        return;
    }
    
    // parameters
    var size = { x: 680, y: 400, tile: 40 },
        speed = 50,
        tile_nb = { x: Math.ceil(size.x/size.tile)+1, y: Math.ceil(size.y/size.tile)+1 },
        colors = ["#ED1156", "#ED194E", "#ED2247", "#ED2B3F", "#EE3438", "#EE3D31", "#EE4529", "#EF4E22", "#EF571A", "#EF6013", "#F0690C", "#E8720E", "#E17B10", "#D98512", "#D28E14", "#CB9816", "#C3A118", "#BCAA1A", "#B4B41C", "#ADBD1E", "#A6C721", "#96C62F", "#87C53E", "#78C44D", "#69C35C", "#5AC26B", "#4AC17A", "#3BC089", "#2CBF98", "#1DBEA7", "#0EBDB6", "#0EBAB0", "#0EB8AA", "#0EB5A4", "#0EB39E", "#0EB098", "#0EAE92", "#0EAB8C", "#0EA986", "#0EA680", "#0EA47B", "#269376", "#3F8372", "#58736E", "#71626A", "#895266", "#A24262", "#BB315E", "#D4215A"],
        objects = [],
        values = [],
        nb_colors = colors.length;
    
    // function to generate simplex noise map
    function generateValues(add) {
        var values = [], foo,
            simplex = new SimplexNoise();
        
        for (var l=0; l<tile_nb.y; l++) {
            for (var c=0; c<tile_nb.x; c++) {
                foo = Math.round((simplex.noise(c/10, l/10)+1) / 2 * nb_colors) + add;
                values.push(foo, foo+1, foo+2, foo+3);
            }
        }
        
        return values;
    }

    // init canvas
    var container = document.getElementById('tiles');
    container.style.width = size.x+'px';
    container.style.height = size.y+'px';

    var paper = SVG(container).size(size.x, size.y),
        pos, cmd,
        counter = 0;

    // draw tiles
    for (var l=0; l<tile_nb.y; l++) {
        for (var c=0; c<tile_nb.x; c++) {
            pos = { x: c*size.tile, y: l*size.tile };
            
            // tile 1
            cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile) +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
            objects.push(paper.polygon(cmd, true));
            // tile 2
            cmd = (pos.x+size.tile) +','+ (pos.y+size.tile) +' '+ pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
            objects.push(paper.polygon(cmd, true));
            // tile 3
            cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
            objects.push(paper.polygon(cmd, true));
            // tile 4
            cmd = pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
            objects.push(paper.polygon(cmd, true));
        }
    }

    // cycle colors
    values[0] = generateValues(0);
    values[1] = generateValues(nb_colors);
    
    setInterval(function() {
        var idx;
        for (var i=0, l=objects.length; i<l; i++) {
            idx = Math.round((values[1][i]-values[0][i]) * counter/(nb_colors-1) + values[0][i]);
            if (idx >= nb_colors) idx = idx%nb_colors;
            objects[i].fill(colors[idx]);
        }
        
        counter++;
        if (counter == nb_colors) {
            counter = 1;
            values[0] = values[1].map(function(v) { return v-nb_colors; });
            values[1] = generateValues(nb_colors);
        }
    }, speed);

    // bug in svg.js
    var temp = document.getElementById('SvgjsSvg1002');
    temp.parentNode.removeChild(temp);
}());