TweenMax+svg实现海底鱼儿游动冒泡动画效果代码-html代码-BFW代码库

TweenMax+svg实现海底鱼儿游动冒泡动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现海底鱼儿游动冒泡动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
        body {
      background: #0f1030;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    canvas, svg {
      position: absolute;
    }
    
    #squid {
      fill: #d28bfd;
    }
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <canvas id="canvas" width="200" height="200"></canvas>
    <svg id="squid" width="200" height="200" viewBox="0 0 340 340">
  <path id="squid-body" d="M100,250 C100,10 400,10 400,250" />
  <path class="squid-tenticle" d="M0,0 C0,70 20,70 40,0" />
  <path class="squid-tenticle" d="M0,0 C0,70 20,70 40,0" />
  <path class="squid-tenticle" d="M0,0 C0,70 20,70 40,0" />
  <path class="squid-tenticle" d="M0,0 C6,70 34,70 38,0" />
  <path class="squid-tenticle" d="M0,0 C6,70 34,70 38,0" />
  <path class="squid-tenticle" d="M0,0 C6,70 34,70 38,0" />
    <circle class="eye" cx="125" cy="130" r="20" stroke-width="3" fill="#fff" />
    <circle class="eye" cx="125" cy="130" r="6" stroke-width="3" fill="#000" />
    <circle class="eye" cx="175" cy="130" r="20" stroke-width="3" fill="#fff" />
    <circle class="eye" cx="175" cy="130" r="6" stroke-width="3" fill="#000" />
</svg>
    <!-- partial -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RequestAnimationFrame.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>

    <script>
        function Glitter() {
      var _this = this;
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      var glitterImagePath = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/';
      var glitter = [];
      var glitterImages = [];
      var width, height;
      var glitterPointer = 0;
      var _squidPos;
      
      (function() {
        resize();
    
        for (var i = 0; i < 4; i++) {
          var img = new Image();
          img.src = glitterImagePath+'g'+i+'.png';
          glitterImages.push(img);
        }
        
        for (var i = 0; i < 300; i++) {
          glitter.push(new GlitterPiece(glitterImages[i%4]));
        }
        
        window.addEventListener('resize', resize);
      })();
      
      function GlitterPiece(img) {
        var _this = this;
        this.x = -100;
        this.y = -100;
        this.vx = 0;
        this.vy = 0;
        this.friction = 0.999;
        this.size = 2 + Math.random()*4;
        this.opacity = 1;
        this.img = img;
        
        twinkle();
        
        function twinkle() {
          TweenMax.to(_this, Math.random()*2, {opacity: 0, 
                      onComplete: function() {
            TweenMax.to(_this, Math.random()*2, {opacity: 1, onComplete: function() {
              twinkle();
          }})}});
        }
        
        this.draw = function(ctx) {
          _this.x += _this.vx;
          _this.y += _this.vy;
          _this.vx *= _this.friction;
          _this.vy *= _this.friction;
          
          ctx.save();
          ctx.globalAlpha = _this.opacity;
          ctx.drawImage(_this.img, _this.x, _this.y, _this.size, _this.size);
          ctx.restore();
        }
      }
      
      function emitGlitter(x, y) {
        glitter[glitterPointer].x = x;
        glitter[glitterPointer].y = y;
        glitter[glitterPointer].vx = Math.random()*2;
        glitter[glitterPointer].vy = Math.random();
        
        glitterPointer++;
        if (glitterPointer >= 300) glitterPointer = 0;
      }
      
      function resize() {
        canvas.width = width = window.innerWidth;
        canvas.height = height = window.innerHeight;
      }
      
      this.render = function() {
        ctx.clearRect(0, 0, width, height);
        var l = glitter.length;
        for (var i = 0; i < l; i++).........完整代码请登录后点击上方下载按钮下载查看