前言
之前从其他博客哪里搬了一个樱花落叶效果。但是我本人不是很喜欢那个樱花，而且那个樱花效果太密集太大了。很影响阅读体验，可以说是一个负优化。我这个人要求比较高，自然是很不满意这个效果，所以，我把代码稍微的改动了一下，达成了现在的效果。
改动步骤
我当时将JS实装到博客后发现这个樱花的色调和我的博客非常的不符合，毕竟白色和樱色的对冲太明显，所以我当时考虑过替换成白色花瓣，和金色落叶。但是因为白色花瓣实在是太不明显了，当时博客很多白色区块。看上去就和没有装这个JS一样，就没啥意义。
然后自然就选择了金色的落叶，毕竟白色配这种毕竟偏向金色的落叶还是挺好看的。
但是很快就发现了另一个问题，这个落叶….
太密集了就会挡视线啦！
于是对JS再加工，将数量和大小降低，从而不是那么的挡视线而是一种装饰效果啦。总体来说这个JS的美观程度还是有的，但是部分博客可能不会太适配这个落叶，每个人的喜好会有所不同，也可以考虑选择自己喜欢的图片进行替换。
修改代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
| var stop, staticx;
var img = new Image();
img.src = "https://img.cdn.nesxc.com/2022/02/202202251325420webp";
function Sakura(x, y, s, r, fn) {
this.x = x;
this.y = y;
this.s = s;
this.r = r;
this.fn = fn
}
Sakura.prototype.draw = function(cxt) {
cxt.save();
var xc = 20 * this.s / 2;
cxt.translate(this.x, this.y);
cxt.rotate(this.r);
cxt.drawImage(img, 0, 0, 20 * this.s, 20 * 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) {
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")
}
}
};
SakuraList = function() {
this.list = []
};
SakuraList.prototype.push = function(sakura) {
this.list.push(sakura)
};
SakuraList.prototype.update = function() {
for (var i = 0, len = this.list.length; i < len; i++) {
this.list[i].update()
}
};
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() * 4;
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();
for (var i = 0; i < 50; 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
});
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")
};
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特效
将这段代码引入博客就行了。
直接html代码引入
1
| <script src="/js/leaves.js"></script>
|
或者修改主题配置文件_config.butterfly.yml
1
2
3
4
| inject:
head
bottom:
- <script src="/js/leaves.js"></script>
|
参考链接：https://cloud.tencent.com/developer/article/1948591
微信
