水滴融合动画效果-html代码-BFW代码库

水滴融合动画效果

代码语言：html

所属分类：动画

代码描述：水滴融合动画效果，利用gsap制作

代码标签：效果

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


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

<style>
html, body {
  background-image: url("http://repo.bfw.wiki/bfwrepo/image/5e965c146a2fc.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: #eaeaea;
}

#instructions {
  position: absolute;
  width: 100%;
  font-family: "Helvetica", sans-serif;
  text-align: center;
  font-size: 12px;
  top: 55px;
  opacity: .5;
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-filter: url("#shadowed-goo");
          filter: url("#shadowed-goo");
}

#texture {
  position: absolute;
  background-image: url("http://repo.bfw.wiki/bfwrepo/image/5e965c146a2fc.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  mix-blend-mode: hard-light;
}
</style>

</head>
<body translate="no">
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
<feOffset in="shadow" dx="0" dy="0" result="shadow" />
<feBlend in2="shadow" in="goo" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="1" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
<div id='texture'></div>
<div id='instructions'>点击鼠标看效果</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.2.4.js"></script>
<script>
/* 
Rorschach

I wanted to play with mixing svg blur filters with canvas and create a generative rorschach test. Performance isn't the best because of the SVG filter, but the effect isn't bad.
 
 */

// Utils
const Between = (min, max) => {
  return Math.random() * (max, min) + max;
};

// App
class RorschachTest {
  constructor() {
    // Main canvas
    this.canvas = document.querySelector("canvas");
    this.ctx = this.canvas.getContext("2d");

    // Buffer canvas
    this.bufferCanvas = document.createElement("canvas");
    this.bufferCtx = this.bufferCanvas.getContext("2d");

    // Assets
    let assetManifest = {
      one: "http://repo.bfw.wiki/bfwrepo/image/5e965c7a60268.png",
      two: "http://repo.bfw.wiki/bfwrepo/image/5e965c7a60268.png" };


    let loader = new AssetLoader(assetManifest);
    loader.preload().then(data => {
      this.assets = data;
      this.currentAssetIndex = 0;
      this.init();
    });
  }

  init() {
    this.blobs = [];
    this.currentAsset = null;

    // Make blobs
    for (let i = 0; i < 300; i++) {
      let blob = new Blob(this.bufferCanvas, this.bufferCtx);
      this.blobs.push(blob);
    }

    // Resize
    window.addEventListener("resize", () => {
      this.resize();
    });

    document.body.addEventListener("click", () => {
      let total = Object.keys(this.assets).length;
      this.currentAssetIndex++;
      if (this.currentAssetIndex > total - 1) {
        this.currentAssetIndex = 0;
      }
      this.setCurrentAsset();
.........完整代码请登录后点击上方下载按钮下载查看