paper.js模仿精子动画效果-html代码-BFW代码库

代码语言：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;
                        segments[0].point = shortSegments[0].point = point;
                        // Chain goes the other way than the movement
                        var lastVector = -this.vector;
                        for (var i = 1; i < this.amount; i++) {
                            var vector = segments[i].point - point;
                            this.count += speed * 10;
                            var wave = Math.sin((this.count + i * 3) / 300);
                            var sway = lastVector.rotate(90).normalize(wave);
                            point += lastVector.normalize(pieceLength) + sway;
                            segments[i].point = point;
                            if (i < 3)
                                shortSegments[i].point = point;
                            lastVector = vector;
                        }
                        this.path.smooth();
                    },

                    createItems: function() {
                        this.head = new Shape.Ellipse({
                            center: [0, 0],
                            size: [13, 8],
                            fillColor: 'white'
                        });

                        this.path = new Path({
                            strokeColor: 'white',
                            strokeWidth: 2,
                            strokeCap: 'round'
                        });
                        for (var i = 0; i < this.amount; i++)
                            this.path.add(new Point());

                        this.shortPath = new Path({
                            strokeColor: 'white',
                            strokeWidth: 4,
                            strokeCap: 'round'
                        });
                        for (var i = 0; i < Math.min(3, this.amount); i++)
                            this.shortPath.add(new Point());
                    },

                    moveHead: function() {
                        this.head.position = this.position;
                        this.head.rotation = this.vector.angle;
                    },

                    // We accumulate a new acceleration each time based on three rules
                    flock: function(boids) {
                        var separation = this.separate(boids) * 3;
                        var alignment = this.align(boids);
                        var cohesion = this.cohesion(boids);
                        this.acceleration += separation + alignment + cohesion;
                    },

                    update: function() {
                        // Update velocity
                        this.vector += this.acceleration;
                        // Limit speed (vector#limit?)
                        this.vector.length = Math.min(this.maxSpeed, this.vector.length);
                        this.position += this.vector;
                        // Reset acceleration to 0 each cycle
                        this.acceleration = new Point();
                    },

                    seek: function(target) {
                        this.acceleration += this.steer(target, false);
                    },

                    arrive: function(target) {
                        this.acceleration += this.steer(target, true);
                    },

                    borders: function() {
                        var vector = new Point();
                        var position = this.position;
                        var radius = this.radius;
                        var size = view.size;
                        if (position.x < -radius) vector.x = size.width + radius;
                        if (position.y < -radius) vector.y =  size.height + radius;
                        if (position.x > size.width + radius) vector.x = -size.width -radius;
                        if (position.y > size.height + radius) vector.y = -size.height -radius;
                        if (!vector.isZero()) {
                            this.position += vector;
                            var segments = this.path.segments;
                            for (var i = 0; i < this.amount; i++) {
                                segments[i].point += vector;
                            }
                        }
                    },

                    // A method that calculates a steering vector towards a target
                    // Takes a second argument, if true, it slows down as it approaches
                    // the target
                    steer: function(target, slowdown) {
                        var steer,
                        desired = target - this.position;
                        var distance = desired.length;
                        // Two options for desired vector magnitude
                        // (1 -.........完整代码请登录后点击上方下载按钮下载查看