一行代碼引入博客園櫻花飄落特效

前言

博客園作為面向大眾的博客, 個性新穎可以博得一贊, 簡約美觀也不失閱讀體驗, 本文對櫻花特效js進行了解讀, 發現作者的設計確實秒不可言, 即使沒有注釋, 思路展示的也很清晰. 那就廢話不多說, 開始解讀櫻花特效js代碼吧.

起步

• 擁有博客園賬號
• 開通js權限

在博客側邊欄公告（支持HTML代碼） （支持 JS 代碼）加入下面1行代碼便可以擁有同博主的櫻花特效.

<script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js"></script>

解讀

//櫻花 Quaint 修改版

var stop, staticx;
var img = new Image();
img.src = "這里原js作者高明操作,請看源碼,如何進制轉成櫻花";

// 櫻花數量 (添加)
var sakuraNum = 21;
// 櫻花越界限制次數, -1不做限制,無限循環 (添加)
var limitTimes = 2;

// 定義限制數組 (添加)
var limitArray = new Array(sakuraNum);
for(var index = 0;index < sakuraNum;index++){
    limitArray[index] = limitTimes;
}

// 定義櫻花, idx 是修改添加的
function Sakura(x, y, s, r, fn, idx) {
	this.x = x;
	this.y = y;
	this.s = s;
	this.r = r;
	this.fn = fn;
	this.idx = idx;
}

// 繪制櫻花
Sakura.prototype.draw = function(cxt) {
	cxt.save();
	var xc = 40 * this.s / 4;
	cxt.translate(this.x, this.y);
	cxt.rotate(this.r);
	cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
	cxt.restore();
}

// 修改櫻花位置,模擬飄落.
Sakura.prototype.update = function() {
	this.x = this.fn.x(this.x, this.y);
	this.y = this.fn.y(this.y, this.y);
	this.r = this.fn.r(this.r);

	// 如果櫻花越界, 重新調整位置
	if(this.x > window.innerWidth || this.x < 0 ||
		this.y > window.innerHeight || this.y < 0) {

		// 如果櫻花不做限制
		if (limitArray[this.idx] == -1) {
			this.r = getRandom('fnr');
			if(Math.random() > 0.4) {
				this.x = getRandom('x');
				this.y = 0;
				this.s = getRandom('s');
				this.r = getRandom('r');
			} else {
				this.x = window.innerWidth;
				this.y = getRandom('y');
				this.s = getRandom('s');
				this.r = getRandom('r');
			}
		}
		// 否則櫻花有限制
		else {
			if (limitArray[this.idx] > 0) {
				this.r = getRandom('fnr');
				if(Math.random() > 0.4) {
					this.x = getRandom('x');
					this.y = 0;
					this.s = getRandom('s');
					this.r = getRandom('r');
				} else {
					this.x = window.innerWidth;
					this.y = getRandom('y');
					this.s = getRandom('s');
					this.r = getRandom('r');
				}
				// 該越界的櫻花限制數減一
				limitArray[this.idx]--;
			}
		}
	}
}


SakuraList = function() {
	this.list = [];
}
SakuraList.prototype.push = function(sakura) {
	this.list.push(sakura);
}

// list update 方法
SakuraList.prototype.update = function() {
	for(var i = 0, len = this.list.length; i < len; i++) {
		this.list[i].update();
	}
}

// list draw 方法
SakuraList.prototype.draw = function(cxt) {
	for(var i = 0, len = this.list.length; i < len; i++) {
		this.list[i].draw(cxt);
	}
}
SakuraList.prototype.get = function(i) {
	return this.list[i];
}
SakuraList.prototype.size = function() {
	return this.list.length;
}

// 位置隨機策略
function getRandom(option) {
	var ret, random;
	switch(option) {
		case 'x':
			ret = Math.random() * window.innerWidth;
			break;
		case 'y':
			ret = Math.random() * window.innerHeight;
			break;
		case 's':
			ret = Math.random();
			break;
		case 'r':
			ret = Math.random() * 6;
			break;
		case 'fnx':
			random = -0.5 + Math.random() * 1;
			ret = function(x, y) {
				return x + 0.5 * random - 1.7;
			};
			break;
		case 'fny':
			random = 1.5 + Math.random() * 0.7
			ret = function(x, y) {
				return y + random;
			};
			break;
		case 'fnr':
			random = Math.random() * 0.03;
			ret = function(r) {
				return r + random;
			};
			break;
	}
	return ret;
}

// 櫻花入口
function startSakura() {
  
	requestAnimationFrame = window.requestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		window.oRequestAnimationFrame;
	var canvas = document.createElement('canvas'),
		cxt;
	staticx = true;
	canvas.height = window.innerHeight;
	canvas.width = window.innerWidth;
	canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
	canvas.setAttribute('id', 'canvas_sakura');
	document.getElementsByTagName('body')[0].appendChild(canvas);
	cxt = canvas.getContext('2d');
	var sakuraList = new SakuraList();
	// sakuraNum 櫻花個數 (原版為50個)
	for(var i = 0; i < sakuraNum; i++) {
		var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
		randomX = getRandom('x');
		randomY = getRandom('y');
		randomR = getRandom('r');
		randomS = getRandom('s');
		randomFnx = getRandom('fnx');
		randomFny = getRandom('fny');
		randomFnR = getRandom('fnr');
		sakura = new Sakura(randomX, randomY, randomS, randomR, {
			x: randomFnx,
			y: randomFny,
			r: randomFnR
		}, i);
		sakura.draw(cxt);
		sakuraList.push(sakura);
	}

	stop = requestAnimationFrame(function() {
		cxt.clearRect(0, 0, canvas.width, canvas.height);
		// 修改櫻花位置邏輯
		sakuraList.update();
		// 畫出修改后的櫻花
		sakuraList.draw(cxt);
		// 遞歸 修改位置, 畫出修改后的櫻花
		stop = requestAnimationFrame(arguments.callee);
	})
}

window.onresize = function() {
	var canvasSnow = document.getElementById('canvas_snow');
	// canvasSnow 在改變瀏覽器大小的時候會為null (修改空指針異常), 不過在改變大小時體驗稍差
	if (canvasSnow) {
		canvasSnow.width = window.innerWidth;
		canvasSnow.height = window.innerHeight;
	}
}

img.onload = function() {
	startSakura();
}

// 沒看懂哪里調用了, 應該是關閉櫻花特效的方法. 還請大佬們解釋自己是怎么使用的.
function stopp() {
	if(staticx) {
		var child = document.getElementById("canvas_sakura");
		child.parentNode.removeChild(child);
		window.cancelAnimationFrame(stop);
		staticx = false;
	} else {
		startSakura();
	}
}

致謝

雖然不知道原版代碼是誰寫的, 不過還是感謝制作該特效的大佬

參考的js地址
https://blog-static.cnblogs.com/files/izbw/yinghua.js