利用html5实现canvas一群鸟飞行特效



11 42 15



特效描述:利用html5实现 canvas一群鸟 飞行特效,利用html5实现canvas一群鸟飞行特效

代码结构

1. HTML代码

<canvas></canvas>
<script>
var Birds = function()
{
    var me = this;
    var config = {
        number : 100
    };
    var width;
    var height;
    var canvas;
    var engine;
    var birds;
    var frame = 0;
    var speed         = 0.4;
    var birdLineCount = 10;
    var birdLineIndex = -1;
    var bgTop;
    var bgBot;
    var z = {
        current : 1,
        target  : 1
    };
    var mouse = {
        x : 0.5,
        y : 0.5,
        z : 0.5
    };
    var prepare = function()
    {
        canvas = document.getElementsByTagName('canvas')[0];
        engine = canvas.getContext('2d');
        width  = window.innerWidth;
        height = window.innerHeight;
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        bgTop = engine.createLinearGradient(0, 0, 0, height / 2);
        bgTop.addColorStop(0, '#000');
        bgTop.addColorStop(1, '#110');
        bgBot = engine.createLinearGradient(0, height / 2, 0, height);
        bgBot.addColorStop(0, '#000');
        bgBot.addColorStop(1, '#001');
    };
    var request = function()
    {
        window.requestAnimationFrame(tick);
    };
    var solveBirdMove = function(bird)
    {
        ['x', 'y', 'z'].forEach(function(key) {
            if (Math.abs(bird.move[key]) > 0.003) {
                bird.move[key] *= 0.99;
            }
        });
        if (frame % bird.ownMove.t === 0) {
            bird.ownMove.x = (0.5 - Math.random()) / 3;
            bird.ownMove.y = (0.5 - Math.random()) / 3;
        }
        bird.move.x += speed * (mouse.x - bird.pos.x + bird.ownMove.x) * bird.speed;
        bird.move.y += speed * (mouse.y - bird.pos.y + bird.ownMove.y) * bird.speed;
        bird.move.z += speed * (mouse.z - bird.pos.z) * bird.speed;
    };
    var applyPath = function(pathStack)
    {
        engine.moveTo(pathStack[0].x, pathStack[0].y);
        for (var i = 1; i < pathStack.length; i ++) {
            engine.lineTo(pathStack[i].x, pathStack[i].y);
        }
    };
    var drawBird = function(bird)
    {
        engine.fillStyle = 'hsl(' + (frame % 360) +  ', 100%, 90%)';
        var pos = {
            x : bird.pos.x * width,
            y : bird.pos.y * height,
            z : bird.pos.z * 1.5
        };
        var size = (width + height) / 200 * pos.z * z.current;
        var atan = Math.atan2(bird.move.y, bird.move.x);
        engine.lineWidth   = 1;
        var p = function(rad, customSize)
        {
            return {
                x : pos.x + Math.cos(atan + rad * Math.PI * 2) * size * customSize,
                y : pos.y + Math.sin(atan + rad * Math.PI * 2) * size * customSize
            };
        };
        //addLinePath
        addLinePath(bird, p(0.5, 1.3));
        engine.beginPath();
        //body
        applyPath([
            //spitze
            p(0, 1.2),
            p(0.01, 0.9),
            p(0.05, 0.7),
            //schweif
            p(0.47, 0.9),
            p(0.45, 1.5),
            p(0.47, 1.2),
            p(0.5, 1.5),
            p(0.52, 1.2),
            p(0.55, 1.5),
            p(0.53, 0.9),
            //spitze
            p(-0.25, 0.5),
            p(-0.05, 0.7),
            p(-0.01, 0.9),
            p(0, 1.2)
        ]);
        engine.fill();
        var wingWave = Math.sin(bird.wing);
        var wingAdd  = wingWave * 0.1;
        var wingPositiveWave = (wingWave + 1) / 2;
        engine.beginPath();
        //body
        applyPath([
            p(0, 0.5),
            //rauf
            p(-0.15, wingPositiveWave),
            p(-0.25, -1 + 3 * wingPositiveWave),
            //runter
            p(-0.4, 0.5),
            p(0, 0)
        ]);
        engine.fill();
    };
    var addLinePath = function(bird, pos)
    {
        bird.lines[birdLineIndex * 2]     = pos.x;
        bird.lines[birdLineIndex * 2 + 1] = pos.y;
    };
    var drawBirdLines = function()
    {
        for (var i = birdLineCount; i >= 2; i--) {
            engine.beginPath();
            engine.lineWidth   = i / birdLineCount * (width + height) / 1000;
            engine.strokeStyle = 'hsla(' + ((frame + i) % 360) +  ', 100%, 50%, ' + i / birdLineCount + ')';
            // engine.strokeStyle = 'hsla(230, 0%, 30%, ' + i / birdLineCount / 2 + ')';
            var currentIndex = (birdLineIndex + i) % birdLineCount;
            var lastIndex    = (birdLineIndex + i + birdLineCount - 1) % birdLineCount;
            birds.forEach(function(bird) {
                if (bird.lines[lastIndex * 2] !== 0 && bird.lines[currentIndex * 2] !== 0) {
                    engine.moveTo(
                        bird.lines[currentIndex * 2],
                        bird.lines[currentIndex * 2 + 1]
                    );
                    engine.lineTo(
                        bird.lines[lastIndex * 2],
                        bird.lines[lastIndex * 2 + 1]
                    )
                }
            });
            engine.stroke();
        }
    };
    var drawShine = function()
    {
        // engine.globalCompositeOperation = 'lighter';
        // engine.fillStyle = 'hsla(' + (frame % 360) +  ', 100%, 90%, 0.005)';
        //
        // birds.forEach(function(bird) {
        //
        //     engine.beginPath();
        //
        //     engine.moveTo(bird.pos.x * width, bird.pos.y * height);
        //     engine.arc(
        //         bird.pos.x * width,
        //         bird.pos.y * height,
        //         bird.pos.z * (width + height) / 3,
        //         0,
        //         Math.PI * 2
        //     );
        //
        //     engine.fill();
        //     engine.closePath();
        // });
        engine.fillStyle = 'hsla(' + (frame % 360) +  ', 100%, 90%, 0.01)';
        engine.beginPath();
        birds.forEach(function(bird) {
            engine.moveTo(bird.pos.x * width, bird.pos.y * height);
            engine.arc(
                bird.pos.x * width,
                bird.pos.y * height,
                bird.pos.z * (width + height) / 30,
                0,
                Math.PI * 2
            );
        });
        engine.fill();
        engine.closePath();
        engine.globalCompositeOperation = 'source-over';
    };
    var renderBirds = function()
    {
        birds.forEach(function(bird) {
            solveBirdMove(bird);
            bird.wing += 0.05 + bird.wingAdd * 0.3 * speed;
            bird.pos.x += bird.move.x;
            bird.pos.y += bird.move.y;
            bird.pos.z += bird.move.z;
        });
        drawBirdLines();
        birdLineIndex = (birdLineIndex + 1) % birdLineCount;
        birds.forEach(function(bird) {
            drawBird(bird);
        });
        drawShine();
    };
    var clear = function()
    {
        engine.clearRect(0, 0, width, height);
    };
    var drawBg = function()
    {
        engine.fillStyle = bgTop;
        engine.fillRect(0, 0, width, height / 2);
        engine.fillStyle = bgBot;
        engine.fillRect(0, height / 2, width, height);
    };
    var tick = function()
    {
        frame++;
        z.current += (z.target - z.current) / 100;
        clear();
        // drawBg();
        renderBirds();
        request();
    };
    var createBirds = function()
    {
        birds = [];
        for (var i = 0; i < config.number; i++) {
            birds.push({
                wing : Math.random(),
                wingAdd : Math.random(),
                speed : (0.2 + Math.random() * 0.8) / 2000,
                pos : {
                    x : 0.25 + Math.random() * 0.5,
                    y : 0.25 + Math.random() * 0.5,
                    z : Math.random()
                },
                move : {
                    x : 0,
                    y : 0,
                    z : 0
                },
                ownMove : {
                    t : 20 + Math.random() * 100 | 0,
                    x : 0,
                    y : 0
                },
                tar : {
                    x : 0.5,
                    y : 0.5
                },
                lines : new Float32Array(birdLineCount * 2)
            });
        }
    };
    var registerMouse = function()
    {
        // document.addEventListener('mousemove', function(e) {
        //     mouse.x = e.clientX / width;
        //     mouse.y = e.clientY / height;
        // });
        setInterval(function() {
            mouse.x = Math.random();
            mouse.y = Math.random();
            z.target = 0.5 + Math.random();
        }, 1000);
    };
    this.run = function()
    {
        registerMouse();
        prepare();
        createBirds();
        tick();
    }
};
var b = new Birds();
b.run();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5线条动画 html5线条动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到