html5绘制一朵逼真的白云动画特效

来源:https://www.sucaihuo.com/js/3540.html 2018-03-10 15:51浏览(1170) 收藏

html5绘制一朵逼真的白云动画特效,蓝蓝的天空中一朵白色模糊云朵飘动着。
html5绘制一朵逼真的白云动画特效
分类:html5 > 动画效果 难易:初级
查看演示 下载资源 下载积分: 10 积分

js代码

<script>
var Cloud = {};

Cloud.init = function() {
  this.width = window.innerWidth;
  this.height = window.innerHeight;
  this.xC = this.width / 2;
  this.yC = this.height / 2;
  this.stepCount = 0;
  this.population = 200;
  this.particles = [];
  
  for (var i = 0; i < this.population; i++) {
    Cloud.birth();
  }
};
Cloud.evolve = function() {
  this.stepCount++;
  this.move();
  this.draw();
};
Cloud.move = function() {
  for (var i = 0; i < this.particles.length; i++) {
    var p = this.particles[i];
    p.x = p.xStart + p.dist * Math.cos(p.speed * this.stepCount);
    p.y = p.yStart + p.dist * Math.sin(p.speed * this.stepCount);
  }
};
Cloud.draw = function() {
  var divs = document.getElementsByClassName('drop');
  for (var i = 0; i < this.particles.length; i++) {
    var particle = this.particles[i],
        div = divs[i];
    
    var r = particle.r,
        x = particle.x - r / 2,
        y = particle.y - r / 2;
    div.style.left = x + 'px';
    div.style.top = y + 'px';
    div.style.height = particle.r + 'px';
    div.style.width = particle.r + 'px';
  }
};
Cloud.birth = function() {
  var speed = 0.2,
      x = this.xC + 220 * (-1 + 2 * Math.random()),
      y = this.yC + 100 * (-1 + 2 * Math.random()),
      minSize = 10,
      maxSize = 150,
      distToCenter = Math.sqrt(Math.pow(x - this.xC, 2) + Math.pow(y - this.yC, 2)),
      size = 170 - 0.65 * distToCenter;
  
  // Create new particle
  var particle = {
    x: x,
    y: y,
    xStart: x,
    yStart: y,
    speed: speed * (-0.5 + Math.random()),
    dist: 15,
    r: size
  };
  
  // Push new particle to global particles array
  this.particles.push(particle);
  
  // Create one more div node and append to DOM
  var div = document.createElement('div');
  div.className = 'drop';
  document.getElementsByTagName('body')[0].appendChild(div);
};

document.addEventListener('DOMContentLoaded', function() {
  
  Cloud.init();
  
  setInterval(function() {
    Cloud.evolve();
  }, 50);
  
});</script>
标签: 云朵白云
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2