paper.js模仿精子动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <script src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script> <script src="http://repo.bfw.wiki/bfwrepo/js/paper.js"></script> <title>Paper.js — Tadpoles</title> </head> <body class="fullscreen"> <article> <div class="paperscript"> <script type="text/paperscript" canvas="canvas-1"> // Adapted from Flocking Processing example by Daniel Schiffman: // http://processing.org/learning/topics/flocking.html var Boid = Base.extend({ initialize: function(position, maxSpeed, maxForce) { var strength = Math.random() * 0.5; this.acceleration = new Point(); this.vector = Point.random() * 2 - 1; this.position = position.clone(); this.radius = 30; this.maxSpeed = maxSpeed + strength; this.maxForce = maxForce + strength; this.amount = strength * 10 + 10; this.count = 0; this.createItems(); }, run: function(boids) { this.lastLoc = this.position.clone(); if (!groupTogether) { this.flock(boids); } else { this.align(boids); } this.borders(); this.update(); this.calculateTail(); this.moveHead(); }, calculateTail: function() { var segments = this.path.segments, shortSegments = this.shortPath.segments; var speed = this.vector.length; var pieceLength = 5 + speed / 3; var point = this.position; segmen.........完整代码请登录后点击上方下载按钮下载查看
网友评论0