Pixi实现逼真泡泡漂浮融合分离反射动画效果代码-html代码-BFW代码库

Pixi实现逼真泡泡漂浮融合分离反射动画效果代码

代码语言：html

所属分类：动画

代码描述：Pixi实现逼真泡泡漂浮融合分离反射动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
    body {
  background: #000;
}

#stage {
  position: fixed;
}
</style>
</head>
<body>

<canvas id="stage"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.4.4.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/PixiPlugin.js"></script>
<script >
    var baseUrl = "//repo.bfw.wiki/bfwrepo/images/bubbue/";

var vw = window.innerWidth;
var vh = window.innerHeight;

var app = new PIXI.Application(vw, vh, {
  view: document.getElementById("stage"),
  resolution: window.devicePixelRatio || 1,
  backgroundColor: 0x000000,
  antialias: true,
  autoResize: true
});

var loader = new PIXI.loaders.Loader(baseUrl)
  .add("bubble", "bubble256.png?v=1")
  .add("rain", "thalion-rain.png?v=1")
  .add("displacement", "displacementmap.png?v=1")
  .load(init);

function init(loader, resources) {
    
  var rainTexture = resources.rain.texture;
  var bubbleTexture = resources.bubble.texture;
  var displacementTexture = resources.displacement.texture;
  
  var background = new PIXI.TilingSprite(rainTexture, vw, vh);
  
  var bubble1 = new PIXI.Sprite(bubbleTexture);
  var bubble2 = new PIXI.Sprite(bubbleTexture);
    
  var bubbleContainer1 = new PIXI.Container();
  var bubbleContainer2 = new PIXI.Container();.........完整代码请登录后点击上方下载按钮下载查看