js实现群鸟在天空中聚集飞翔动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现群鸟在天空中聚集飞翔动画效果代码

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

<html>

<head>
    <style>
        body {
          width: 100%;
          min-height: 100%;
          margin: 0;
          overflow: hidden;
        }
        
        canvas {
          z-index: 99;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: linear-gradient(#B7B0E3, #FFD3D6);
        }
        
        @-webkit-keyframes anim {
          from {
            transform: translateX(200%);
          }
          to {
            transform: translateX(-200%);
          }
        }
        
        @keyframes anim {
          from {
            transform: translateX(200%);
          }
          to {
            transform: translateX(-200%);
          }
        }
        @-webkit-keyframes anime {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(-200%);
          }
        }
        @keyframes anime {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(-200%);
          }
        }
        .c1, .c2 {
          width: 800px;
          height: 700px;
          position: absolute;
          background: transparent url("//repo.bfw.wiki/bfwrepo/image/5edc746d6bfd5.png") 0 0 no-repeat;
          background-size: 100%;
          z-index: 999;
        }
        
        .c1.one, .c2.one {
          top: -260px;
          left: 0px;
        }
        
        .c1.two, .c2.two {
          top: -200px;
          left: 100px;
        }
        
        .c1.three, .c2.three {
          top: -240px;
          right: 100px;
        }
        
        .c1.four, .c22.four {
          top: -180px;
          right: 0px;
        }
        
        .c2 .one {
          top: -209px;
        }
        
        @media (max-width: 1023px) {
          .c2.one {
            left: -80px;
          }
        
          .c2.two {
            left: -120px;
          }
        
          .c2.three {
            right: 220px;
          }
        
          .c2.four {
            right: 220px;
          }
        }
        .c1 {
          -webkit-animation: anime 1000s linear infinite forwards;
                  animation: anime 1000s linear infinite forwards;
        }
        
        .c2 {
          transform: translateX(200%);
          -webkit-animation: anim 1000s linear infinite forwards;
                  animation: anim 1000s linear infinite forwards;
        }
    </style>

</head>

<body><canvas id="canv" width="1047" height="646"></canvas>
    <div class="sky">
        <div class="clouds">
            <div class="c1 one"></div>
            <div class="c1 two"></div>
            <div class="c1 three"></div>
            <div class="c1 four"></div>
            <div class="c2 one"></div>
            <div class="c2 two"></div>
            <div class="c2 three"></div>
            <div class="c2 four"></div>
        </div>
    </div>
    <script>
        var Bird = {
          def: function(n, m, s) {
            if (m) this.e(n.prototype, m);
            if (s) this.e(n, s);
            return n;
          },
          e: function(o, p) {
            for (prop in p) o[prop] = p[prop];
            return o;
          },
          v: [
            [5, 0, 0],
            [-5, -2, 1],
            [-5, 0, 0],
            [-5, -2, -1],
            [0, 2, -6],
            [0, 2, 6],
            [2, 0, 0],
            [-3, 0, 0]
          ],
          beak: [
            [0, 1, 2],
            [4, 7, 6],
            [5, 6, 7]
          ],
          L: null,
          V: {
            x: 0,
            y: 0,
            z: 5000
          }
        }
        Bird.obj = Bird.def(
          function() {
            this.vtr = new Bird.Vtr(),
              this.accel, this.width = 600, this.height = 600, this.depth = 300, this.ept, this.area = 200,
              this.msp = 4, this.mfrc = 0.1, this.coll = false;
            this.pos = new Bird.Vtr();
            this.vel = new Bird.Vtr();
            this.accel = new Bird.Vtr();
          }, {
        
            _coll: function(value) {
              this.coll = value;
            },
            param: function(w, h, dth) {
              this.width = w;
              this.height = h;
              this.depth = dth;
            },
            run: function(b) {
              if (this.coll) {
                this.vtr.set(-this.width, this.pos.y, this.pos.z);
                this.vtr = this.detect(this.vtr);
                this.vtr.scale(5);
                this.accel.add(this.vtr);
                this.vtr.set(this.width, this.pos.y, this.pos.z);
                this.vtr = this.detect(this.vtr);
                this.vtr.scale(5);
                this.accel.add(this.vtr);
                this.vtr.set(this.pos.x, -this.height, this.pos.z);
                this.vtr = this.detect(this.vtr);
                this.vtr.scale(5);
                this.accel.add(this.vtr);
                this.vtr.set(this.pos.x, this.height, this.pos.z);
                this.vtr = this.detect(this.vtr);
                this.vtr.scale(5);
                this.accel.add(this.vtr);
                this.vtr.set(this.pos.x, this.pos.y, -this.depth);
                this.vtr = this.detect(this.vtr);
                this.vtr.scale(5);
                this.accel.add(this.vtr);
                this.vtr.set(this.pos.x, this.pos.y, this.depth);
                this.vtr = this.detect(this.vtr);
                this.vtr.scale(5);
                this.accel.add(this.vtr);
              }
              if (Math.random() > 0.5) {
                this.fly(b);
              }
              this.move();
            },
            fly: function(b) {
              if (this.ept) {
                this.accel.add(this.meet(this.ept, 0.005));
              }
              this.accel.add(this.line(b));
              this.accel.add(this.togeth(b));
              this.accel.add(this.apart(b));
            },
            move: function() {
              this.vel.add(this.accel);
              var l = this.vel.len();
              if (l > this.msp) {
                this.vel.lowscale(l / this.msp);
              }
              this.pos.add(this.vel);
              this.accel.set(0, 0, 0);
            },
            detect: function(pt) {
              var dir = new Bird.Vtr();
              dir.copy(this.pos);
              dir.sub(pt);
              dir.scale(1 / this.pos.dsq(pt));
              return dir;
            },
            rep: function(pt) {
              var dist = this.pos.dst(pt);if (dist < 150) {
                var dir = new Bird.Vtr();
                dir.subv(this.pos, pt);
                dir.scale(0.5 / dist);
                this.accel.add(dir);
              }
            },
            meet: function(pt, amt) {
              var dir = new Bird.Vtr();
              dir.subv(pt, this.pos);
              dir.scale(amt);
              return dir;
            },
            line: function(b) {
              var _b, totvel = new Bird.Vtr(),
                cnt = 0;
              for (var i = 0, il = b.length; i < il; i++) {
                if (Math.random() > 0.6) continue;
                _b = b[i];
                var dist = _b.pos.dst(this.pos);
                if (dist > 0 &&am.........完整代码请登录后点击上方下载按钮下载查看