Pixi.js实现的镜头复合光圈特效

3d paper cut style with Pixi.js

pixi, ripple

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2580
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/*--------------------------------------------------
Vars
--------------------------------------------------*/
let winW = window.innerWidth,
    winH = window.innerHeight,
    ticker = 0,
    Blobs = [];

/*--------------------
Get Mouse
--------------------*/
let mouse = { x: window.innerWidth / 2, y: window.innerHeight / 2, dir: '' };
let shadowMove = {x: 1, y: 1};
let clicked = false;
const getMouse = (e) => {
  mouse = {
    x: e.clientX || e.pageX || e.touches[0].pageX || 0 || window.innerWidth / 2,
    y: e.clientY || e.pageX || e.touches[0].pageY || 0 || window.innerHeight / 2,
    dir: (getMouse.x > e.clientX) ? 'left' : 'right'
  }
  
  shadowMove.x = (winW / 2 - mouse.x) / 10;
  shadowMove.y = (winH / 2 - mouse.y) / 10;
};
['mousemove', 'touchstart', 'touchmove'].forEach(e => {
  window.addEventListener(e, getMouse);
});
window.addEventListener('mousedown', (e) => {
  e.preventDefault();
  clicked = true;
});
window.addEventListener('mouseup', () => {
  clicked = false;
});

/*--------------------------------------------------
Init
--------------------------------------------------*/
var app = new PIXI.Application({width: winW, height: winH, transparent: true, antialias: true, view: canvas});
app.renderer.autoResize = true;

/*--------------------------------------------------
Blob
--------------------------------------------------*/
class Blob {
  constructor(options) {
    Object.assign(this, options);
    this.el = new PIXI.Graphics();
    this.stage();
    this.resize();
    
  }
  
  stage () {
    app.stage.addChild(this.el);
    if (this.shadow) {
      this.shadowFilter = new PIXI.filters.BlurFilter();
      this.shadowFilter.blur = 10;
      this.el.filters = [this.shadowFilter];
      this.el.alpha = .25;
    } else {
    }
  }
  
  resize() {
    
  }
  
  animate() {
    this.el.clear();
    this.el.beginFill(this.fill);
    this.el.x = winW / 2 + ((this.shadow) ? shadowMove.x : 0);
    this.el.y = winH / 2 + ((this.shadow) ? shadowMove.y : 0);

let moveSin = Math.sin(ticker) * this.parkinson;
    let moveCos = Math.cos(ticker) * this.parkinson;
    
    this.el.moveTo(0, -this.radius);
    this.el.quadraticCurveTo(this.radius, -this.radius , this.radius, 0 + moveSin);
    this.el.quadraticCurveTo(this.radius - moveCos, this.radius + moveSin, 0 - moveCos, this.radius + moveSin);
    this.el.quadraticCurveTo(-this.radius + moveCos, this.radius, -this.radius, 0 - moveSin);
    this.el.quadraticCurveTo(-this.radius, -this.radius, 0, -this.radius);
    
    this.el.endFill();
    
    this.el.rotation = ticker / 10;
  }
}

let shadow6 = new Blob({fill: 0x000000, radius: 280, parkinson: 16, shadow: true});
Blobs.push(shadow6);

let blob6 = new Blob({fill: 0x001d32, radius: 300, parkinson: 11});
Blobs.push(blob6);

let shadow5 = new Blob({fill: 0x000000, radius: 250, parkinson: 16, shadow: true});
Blobs.push(shadow5);

let blob5 = new Blob({fill: 0x012e55, radius: 250, parkinson: 20});
Blobs.push(blob5);

let shadow4 = new Blob({fill: 0x000000, radius: 200, parkinson: 15, shadow: true});
Blobs.push(shadow4);

let blob4 = new Blob({fill: 0x005c9d, radius: 200, parkinson: 19});
Blobs.push(blob4);

let shadow3 = new Blob({fill: 0x000000, radius: 160, parkinson: 12, shadow: true});
Blobs.push(shadow3);

let blob3 = new Blob({fill: 0x028abe, radius: 160, parkinson: 16});
Blobs.push(blob3);

let shadow2 = new Blob({fill: 0x000000, radius: 120, parkinson: 11, shadow: true});
Blobs.push(shadow2);

let blob2 = new Blob({fill: 0x02b2ed, radius: 120, parkinson: 13});
Blobs.push(blob2);

let shadow1 = new Blob({fill: 0x000000, radius: 80, parkinson: 13, shadow: true});
Blobs.push(shadow1);

let blob1 = new Blob({fill: 0x93e1ed, radius: 80, parkinson: 12});
Blobs.push(blob1);

/*--------------------------------------------------
Animation
--------------------------------------------------*/
app.ticker.add(function() {
  ticker += 0.1;
  Blobs.forEach(b => {
    b.animate();
  });
  
  shadowMove.x += Math.cos(ticker) * 1;
  shadowMove.y += Math.sin(ticker) * 1;
});

/*--------------------------------------------------
Resize
--------------------------------------------------*/
const resize = () => {
  winW = window.innerWidth;
  winH = window.innerHeight;
  app.renderer.resize(winW, winH);
  Blobs.forEach(b => {
    b.resize();
  });
}
window.addEventListener('resize', resize);

编译

CSS

HTML

3d paper cut style with Pixi.js

pixi, ripple

编辑器支持Emmet

快捷键

3d paper cut style with Pixi.js

pixi, ripple

Pixi.js使用着色器（shader）代码实现的超炫烟雾特效

使用Pixi.js制作带上帝之光特效的海底世界水母浮游动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：