paper.js实现鼠标跟随互动纸飞机动画背景效果代码-html代码-BFW代码库

paper.js实现鼠标跟随互动纸飞机动画背景效果代码

代码语言：html

所属分类：动画

代码描述：paper.js实现鼠标跟随互动纸飞机动画背景效果代码

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

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
<style>
    html,
body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/paper-full.min.js"></script>
</head>
<body>
	<canvas id="triangle-lost-in-space" resize="true"></canvas>
	<script type="text/javascript">
		paper.install(window);
		var SQRT_3 = Math.pow(3, 0.5);
		var triangle, D, mousePos, position;
		var count = 50;

		window.onload = function() {
		  paper.setup('triangle-lost-in-space');

		  D = Math.max(paper.view.getSize().width, paper.view.getSize().height);

		  mousePos = paper.view.center.add([view.bounds.width / 3, 100]);
		  position = paper.view.center;

		  // Draw the BG
		  var background = new Path.Rectangle(view.bounds);
		      background.fillColor = '#3B3251';
		  buildStars();
		  triangle = new Triangle(50);

		  paper.view.draw();

		  paper.view.onFrame = function(event) {
		    position = position.add( (mousePos.subtract(position).divide(10) ) );
		    var vector = (view.center.subtract(position)).divide(10);
		    moveStars(vector.multiply(3));
		    triangle.update();
		  };
		};
		// ---------------------------------------------------
		//  Helpers
		// ---------------------------------------------------
		window.onresize = function() {
		  project.clear();
		  D = Math.max(paper.view.getSize().width, paper.view.getSize().height);
		  // Draw the BG
		  var background = new Path.Rectangle(view.bounds);
		      background.fillColor = '#3B3251';
		  buildStars();
		  triangle.build(50);
		};

		var random = function(minimum, maximum) {
		  return Math.round(Math.random() * (maximum - minimum) + minimum);
		};

		var map = function (n, start1, stop1, start2, stop2) {
		  return (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
		};
		// ---------------------------------------------------
		//  Triangle
		// ---------------------------------------------------
		var Triangle = function(a) {
		  this.build(a);
		};

		Triangle.prototype.build = function(a) {
		  // The points of the triangle
		  var segments = [new paper.Point(0, -a / SQRT_3),
		                  new paper.Point(-a/2, a * 0.5 / SQRT_3),
		                  new paper.Point(a/2, a * 0.5 / SQRT_3)];

		  this.flameSize = a / SQRT_3;
		  var flameSegments = [new paper.Point(0, this.flameSize),
		                       new paper.Point(-a/3, a * 0.4 / SQRT_3),
		                       new paper.Point(a/3, a * 0.4 / SQRT_3)];

		  this.flame = new Path({
		    segments: flameSegments,
		    closed: true,
		    fillColor: '#FCE589'
		  });
		  this.ship = new Path({
		    segments: segments,
		    closed: true,
		    fillColor: '#FF7885'
		  });
		  this.group = new Group({
		    children: [this.flame, this.ship],
		    position: view.cen.........完整代码请登录后点击上方下载按钮下载查看