TweenMax实现水滴波纹动画效果代码-html代码-BFW代码库

TweenMax实现水滴波纹动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax实现水滴波纹动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        * {
            overflow: hidden;
            background: #000;
        }

        canvas {
            display: block;
            background: #00e1e9;
            background: radial-gradient(#00e1e9 20%, #000 120%);
        }
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
</head>
<body>
    <canvas id="c" width="733" height="679"></canvas><script>
        // Customize these...
        var n = 150,
        speed = 15,
        startSize = rand(99, 300);

        // ...not these
        var c = document.getElementById("c"),
        ctx = c.getContext("2d"),
        cw = (c.width = window.innerWidth),
        ch = (c.height = window.innerHeight),
        mousePos = {
            x: "",
            y: ""
        },
        img = new Image(),
        particles = [],
        Particle = function(index) {
            this.index = index;
            this.dur = (100-rand(9, 90))/speed;
            this.draw = function() {
                ctx.translate(this.x, this.y);
                ctx.globalAlpha = this.alpha;
                ctx.globalCompositeOperation = 'lighter';
                if (index%2 == 0) ctx.globalCompositeOperation = 'xor';
                ctx.drawImage(img, -this.size/2, -this.size/2, this.size, this.size);
                ctx.translate(-this.x, -this.y);
            }
        };


        c.onmousemove = function(e) {
            mousePos = {
                x: e.clientX,
                y: e.clientY
            };
        }
        document.onmouseleave = document.ontouchend = function(e) {
            mousePos = {
                x: "",
                y: ""
            }
        }


        function setParticle(p, firstRun) {
            var startProps = {
                x: cw/2+rand(0, 60)-30,
                y: ch/2+rand(0, 60)-30,
                size: startSize,
                alpha: 0
            };
            if (rand(0, 1) > 0.3 && mousePos.x != "") startProps = {
                x: mousePos.x,
                y: mousePos.y,
                size: startSize/10,
                alpha: 0
            };
            var _tl = new TimelineMax().fromTo(p, p.dur, startProps, {
                size: '+='+String(rand(200, 400)),
                bezier: [{
                    alpha: rand(0.15, 0.65)}, {
                    alpha: 0
                }],
                ease: Power1.easeOut, //ease:Power0.easeNone,
                onComplete: function() {
                    setParticle(p);
                }
            });
            if (firstRun) _tl.seek(p.dur*rand());
        }


        TweenMax.ticker.addEven.........完整代码请登录后点击上方下载按钮下载查看