头像

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

来源:http://www.sucaihuo.com/js/3540 素材火管理员 2018-03-10 15:51浏览(515) 收藏

html5绘制一朵逼真的白云动画特效,蓝蓝的天空中一朵白色模糊云朵飘动着。
html5绘制一朵逼真的白云动画特效
分类:html5 > 动画效果 难易:初级

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ3401083589直接充值

查看演示 下载资源: 5

手机扫码访问:

下载资源 下载积分: 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>
标签: 云朵白云
最新交易
评论4
头像

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

  • 头像 3楼
    03-16 09:52
    Ja***es
    非常实用的程序,ui做的很好!
  • 头像 板凳
    03-14 09:10
    sa***08
    所以flash被淘汰也是有原因的
  • 头像 椅子
    03-11 19:35
    阿***鱼
    感谢分享……效果逼真,很赞,
  • 头像 沙发
    03-10 23:26
    心***扬
    效果逼真,很赞,感谢分享……
1 2