湿的canvas交互动画特效-html代码-BFW代码库

湿的canvas交互动画特效

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Wet Canvas (Interactive)</title>

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

canvas {
  display: block;
/*   background:#00e1e9; */
  background:radial-gradient(ellipse at top, #00e1e9 50%, #000 100%);
}
  </style>

</head>
<body translate="no">
<canvas id="c"></canvas>

<script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>
<script>
// Customize these...
var n = 300,
    speed = 15,
    startSize = rand(200,500);

// ...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 = [],
    particleNumber = 0,
    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%1.5==0) ctx.globalCompositeOperation = 'overlay';
        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 = function(e){ mousePos = {x:"", y:""} }

function setParticle(p, firstRun) {
  var _x = cw*rand(0,1), _y = ch*rand(0,1), _s = startSize;
  if (rand(0,1)>0.3 && mousePos.x!=""){ //console.log(mousePos)
    _x = mousePos.x;
    _y = mousePos.y;
    _s = _s/10;
  }
  var _tl = new TimelineMax()
            .fromTo(p, p.dur, {
                x:_x,
                y:_y,
                size:_s,
                alpha:0
            },{
                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()); //fast-forward on first run
}


TweenMax.ticker.addEventListener("tick", function(){
  ctx.clearRect(0, 0, cw, ch);
  for (var i=0; i<.........完整代码请登录后点击上方下载按钮下载查看