js实现群鸟在天空中聚集飞翔动画效果代码
代码语言: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 && dist <= this.area) { totvel.add(_b.vel); cnt++; } } if (cnt > 0) { totvel.lowscale(cnt); var v = totvel.len(); if (v > this.mfrc) { totvel.lowscale( v / this.mfrc); } } return totvel; }, togeth: function(b) { var _b, dist, plus = new Bird.Vtr(), dir = new Bird.Vtr(), cnt = 0; for (var i = 0, il = b.length; i < il; i++) { if (Math.random() > 0.6) continue; _b = b[i]; dist = _b.pos.dst(this.pos); if (dist > 0 && dist <= this.area) { plus.add(_b.pos); cnt++; } } if (cnt > 0) { plus.lowscale(cnt); } dir.subv(plus, this.pos); var l = dir.len(); if (l > this.mfrc) { dir.lowscale(l / this.mfrc); } return dir; }, apart: function(b) { var _b, dist, plus = new Bird.Vtr(), rep = new Bird.Vtr(); for (var i = 0, il = b.length; i < il; i++) { if (Math.random() > 0.6) continue; _b = b[i]; dist = _b.pos.dst(this.pos); if (dist > 0 && dist <= this.area) { rep.subv(this.pos, _b.pos); rep.level(); rep.lowscale(dist); plus.add(rep); } } return plus; } } ); Bird.Build = Bird.def( function() { this.base = 0, this.left = 1, this.right = 2; this.pos = new Bird.Vtr(); this.rot = new Bird.Vtr(); this.bbase = this.tri(this.base); this.leftwing = this.tri(this.left); this.rightwing = this.tri(this.right); }, { matrix: function() { this.bbase.vtx(); this.leftwing.vtx(); this.rightwing.vtx(); this.leftwing.wingY(this.wY); this.rightwing.wingY(this.wY); this.bbase.rotY(this.rot.y); this.bbase.rotZ(this.rot.z); this.leftwing.rotY(this.rot.y); this.leftwing.rotZ(this.rot.z); this.rightwing.rotY(this.rot.y); this.rightwing.rotZ(this.rot.z); this.bbase.trans(this.pos); this.leftwing.trans(this.pos); this.rightwing.trans(this.pos); }, draw: function() { this.bbase.draw(); this.leftwing.draw(); this.rightwing.draw(); }, tri: function(i) { var v1, v2, v3, v; v = Bird.v[Bird.beak[i][0]]; v1 = new Bird.Vtr(v[0], v[1], v[2]); v = Bird.v[Bird.beak[i][1]]; v2 = new Bird.Vtr(v[0], v[1], v[2]); v = Bird.v[Bird.beak[i][2]]; v3 = new Bird.Vtr(v[0], v[1], v[2]); return new Bird.Tri(v1, v2, v3); }, wang: function(y) { var v1 = Bird.v[Bird.beak[1][1]]; this.rot.x = Math.atan2(y, v1[0]); }, zpos: function() { var z1 = this.bbase._z(); var z2 = this.leftwing._z(); var z3 = this.rightwing._z(); return Math.min(z1, z2, z3); }, wing: function(y) { this.wY = y; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0