首页 > 其他分享> > 五、HTML5 千纸鹤动画特效

五、HTML5 千纸鹤动画特效

2021-03-25 21:58:06 作者：互联网

文章目录

五、HTML5 千纸鹤动画特效

五、HTML5 千纸鹤动画特效

5.1 图片预览

在这里插入图片描述

5.2 index.html代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>HTML5 Canvas千纸鹤动画特效</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div id="controls"></div>
		<script src='js/p5.min.js'></script>
		<script src="js/index.js"></script>
	</body>
</html>

5.3 style.css代码

* {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: black;
}

canvas {
	display: block;
}

#controls {
	z-index: 2;
	margin: 20px;
	position: absolute;
	top: 0;
	left: 0;
	color: white;
}

5.5 index.js代码

birds = [];
let numBirds = 50;

class Bird {
	constructor() {
		this.pos = [random(width), random(height)];
		this.size = pow(random(), 2) * 80 + 40;
		this.angle = random(PI / 16) + PI / 8;
		this.speed = this.size / 600;
		this.hue = random();

		let p = [
			[0, 0],
			[random(.00, .10), random(.1, .4)], //beak
			[random(.10, .50), -random(.1, .2)], //head
			[random(.50, .80), random(.1, .3)], //body
			[random(.80, 1.0), -random(.2, .4)], //tail
			[1, 0],
			[random(.30, .40), 0], //wing base 1
			[random(.80, .90), 0], //wing base 2
			[random(.50, .65), -random(.4, .6)], //wing tip 1
			[random(.65, .70), -random(.4, .6)], //wing tip 2
		];

		this.triangles = [
			//   idx,     idx,     idx, color              , isWing
			[...p[0], ...p[1], ...p[2], randColor(this.hue), false], //head
			[...p[3], ...p[4], ...p[5], randColor(this.hue), false], //tail
			[...p[6], ...p[7], ...p[8], randColor(this.hue), true], //back wing
			[...p[0], ...p[2], ...p[3], randColor(this.hue), false], //body 1
			[...p[2], ...p[3], ...p[5], randColor(this.hue), false], //body 2
			[...p[6], ...p[7], ...p[9], randColor(this.hue), true], //front wing
		]
	}
	render() {
		push();
		let p = this.pos;
		translate(...p);
		scale(this.size);
		strokeWeight(1 / this.size);

		p[0] += cos(this.angle + PI) * this.speed * 20;
		p[1] += sin(this.angle + PI) * this.speed * 20;
		if (p[0] < -this.size) p[0] += width + this.size;
		if (p[1] < -this.size / 2) p[1] += height + this.size / 2;

		let s = cos(frameCount * this.speed)
		rotate(this.angle);
		this.triangles.map(t => {
			fill(...(t[6]))
			if (t[7]) triangle(...t.slice(0, 5), t[5] * s);
			else triangle(...t);
		})

		pop();
	}
}

function randColor(base = 0, amt = .2) {
	return [(base + random(amt) - amt / 2) % 1, .2 + random(amt), .8 + random(amt)];
}

function setup() {
	pixelDensity(1);
	createCanvas();
	colorMode(HSB, 1, 1, 1);
	windowResized();
}

function init() {
	birds = [];
	for (let i = 0; i < numBirds; i++) birds.push(new Bird());
	birds = birds.sort((a, b) => a.size - b.size);
}

function draw() {
	background(0, .5);
	birds.map(b => b.render());
}

function mousePressed() {
	windowResized();
}

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
	init();
}

5.6 p5.min.js代码

链接：分享百度网盘的链接，点击即可下载
提取码：0258

标签：动画,randColor,...,random,千纸鹤,HTML5,birds,hue,size
来源： https://blog.csdn.net/qq_52916408/article/details/115219376