模拟风吹动的效果

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

console.clear();

var width = window.innerWidth;
var height = window.innerHeight;

var scale = 25;

var cols = Math.ceil(width / scale);
var rows = Math.ceil(height / scale);

var app = new PIXI.Application({
	width: width,
	height: height,
 	antialias: true, 
	view: document.querySelector("#scene")
});

var lines = new PIXI.Container();
app.stage.addChild(lines);

// Draw lines
function createWinds () {
  lines.children = [];
  
  var lineGraph = new PIXI.Graphics();
  lineGraph.lineStyle(1, 0xffffff, 1);
  lineGraph.moveTo(0, 0);
  lineGraph.lineTo(scale * 1.5, 0);
  lineGraph.endFill();
  var texture = app.renderer.generateTexture(lineGraph);
  
  for(var y = 0; y < rows; y++) {
    for(var x = 0; x < cols; x++) {
      var force = new PIXI.Sprite(texture);
      force.x = x * scale;
      force.y = y * scale;
      force.smallX = x * 0.05;
      force.smallY = y * 0.05;
      lines.addChild(force);
    }
  }
}

function updateForces () {
  var delta = app.ticker.lastTime * 0.0002;
  for (var i = 0; i < lines.children.length; i++) {
    var force = lines.children[i];
    var rotate = noise.simplex3(force.smallX, force.smallY, delta);
    force.rotation = rotate * Math.PI;
    force.alpha = Math.max(Math.abs(rotate), 0.1);
  }
}

createWinds();
app.ticker.add(updateForces);

var debounce = null;
window.addEventListener('resize', function () {
  debounce = window.clearTimeout(debounce);
  debounce = setTimeout(onResize, 200);
});
function onResize () {
  width = window.innerWidth;
  height = window.innerHeight;

cols = Math.ceil(width / scale);
  rows = Math.ceil(height / scale);
  
  app.renderer.resize(width, height);
  
  createWinds();
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg