Js雨滴随风飘落特效分享

基于TweenMax的逼真雨滴随风飘落特效，代码如下 可自行控制雨滴数量、速度、透明度、大小等参数

//插入一个画布id=c
var ele=document.createElement('canvas');
ele.setAttribute('id',"c");
ele.setAttribute('width',"1040");
ele.setAttribute('height',"912");
ele.setAttribute('style',"margin: 0 auto;height: 100vh;width: 100vw;position: fixed;pointer-events: none;top: 0;overflow: hidden;z-index: 9999;");
document.body.appendChild(ele);

function loadJs(path,callback){
  var header=document.getElementsByTagName("head")[0];
  var script=document.createElement('script');
  script.setAttribute('src',path);
  header.appendChild(script);
  //对于浏览器的判断是ie还是其他
  if(!/*@cc_on!@*/false){
      script.onload=function(){
        console.log("非ie");
        callback();
      }
  }else{
    script.onreadystatechange=function(){
      if(script.readystate=="loaded" ||script.readState=='complate'){
        console.log("ie");
        callback();
      }
    }
  }
}
//引入TweenMax.js
loadJs("https://bk.yyge.net/Jsdata/js/TweenMax.min.js",function(){
  //雨滴数量
  var n = 200;

  // ...not these
  var c = document.getElementById("c"),
    ctx = c.getContext("2d"),
    cw = (c.width = window.innerWidth),
    ch = (c.height = window.innerHeight),
    duration = ch/500, //雨点速度 默认850
    img = new Image(),
    particles = [],
    particleNumber = 0,
    Particle = function() {
      this.alpha = rand(0.1, 0.7); //雨点透明度
      this.size = rand(40, 60); // 雨点大小
      this.draw = function() {
        ctx.globalAlpha = this.alpha;
        ctx.drawImage(img, this.x, this.y, this.size, this.size);
      }
  };


  function setParticle(p) {
    particleNumber++;
    var _dur = rand(duration/2, duration),
      _tl = new TimelineMax()
      .fromTo(p, _dur, {
        x:rand(-p.size, cw+ch/2),
        y:-p.size
      },{
        x:'-='+rand(ch/2-50,ch/2), 
        y:ch+p.size,
        ease:Power0.easeNone,
        onComplete:function(){ setParticle(p); }
      });
    if (particleNumber<n) _tl.seek(_dur*rand()); //fast forward on first run
  }

  // First run
  for (var i=0; i<n; i++) {
      particles.push(new Particle());
      setParticle(particles[i]);      
  }

  TweenMax.ticker.addEventListener("tick", function(){
    ctx.clearRect(0, 0, cw, ch);
    for (var i=0; i<n; i++) {
        particles[i].draw();
    }
  });

  window.addEventListener('resize', function() {
    particleNumber = 0;  
    cw = (c.width = window.innerWidth);
    ch = (c.height = window.innerHeight);
    for (var i=0; i<n; i++) {
      TweenMax.killTweensOf(particles[i]);
      setParticle(particles[i]);
    }
  });

  function rand(min=0, max=1) {
    return min + (max-min)*Math.random();
  }
  
  //雨点的图片 - 可以更换自己的图片
  img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAclBMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9wvwjfAAAAJnRSTlMADzQ3BxsfAQIKBBYFX5UsEjxPan6QJ0NJJCkUcXgvhVRZSkCKZM5koNQAAAFNSURBVHgB3ZWFkcRADARvUVozM9uXf4p/GTyMil4BTLnHvdLrN0OJfcHDs8JD7BTgDCq2CKfxHeE0W4zTzBqvJOomhkOCdgTTxEaCJv9HNCxAQzI0pcS/2URo8FqdsQIf4vFanYQkuYDythSgKYYCpxkHK0CjWYDGE658r3DT+i3Bla8cTJOYHtdVVbiuPB749Uz6AaYhdRrCH3A64spfp8IlSXsBSeqO4FqrN04z1pXFN8mqI/h4nouHaaYlhbdruJveojQuXTeGlV9rz6gk134oAkN83ZQBDLGmWToLhrhzTx1YSZQv+zBjITRX+6oDoba29QRWoq4nS32CNTLW2YNWEu49Ww2mWuTfWZuClgTTZO3hoEo4Ptp2KQuoEqubD80EWUJFmmVP5aFK2NVZ25RFBJ6bZj18YHAx3qULTOhWm+GMzzCe8ZmfZ3wBUXcSquSL1HAAAAAASUVORK5CYII=";
})