文末
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
-
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
1.水平速度
水平和垂直方向的速度是一样的，但是看起来有点太斜了，所以调整一下，把水平速度和垂直速度区分开来：
class Snow {
constructor (opt = {}) {
// …
// 水平速度
this.sx = 0
// 垂直速度
this.sy = 0
// …
}
init (reset) {
// …
this.sy = Math.random() * this.maxSpeed + this.minSpeed
this.sx = this.sy * Math.random()
}
move () {
this.x += this.sx
this.y += this.sy
// …
}
}
复制代码
2.左下角没有雪
因为整体向右倾斜，所以左下角大概率没有雪，这可以通过让雪随机出现在左侧来解决：
init (reset) {
// …
this.x = Math.floor(Math.random() * (this.windowWidth - this.width))
this.y = Math.floor(Math.random() * (this.windowHeight - this.width))
if (reset && Math.random() > 0.8) {// 让一小部分的雪初始化在左侧
this.x = -this.width
} else if (reset) {
this.y = -this.width
}
// …
}
复制代码
3.眼前的雪
随机性的选择一点雪给它较大的体积、透明度和速度，然后再使用css3的3D透视效果，把它的z轴数值调大一点，这样的感觉就好像是在眼前划过的一样：
复制代码
class Snow {
constructor (opt = {}) {
// …
// z轴数值
this.z = 0
// 快速划过的最大速度
this.quickMaxSpeed = opt.quickMaxSpeed || 10
// 快速划过的最小速度
this.quickMinSpeed = opt.quickMinSpeed || 8
// 快速划过的宽度
this.quickWidth = opt.quickWidth || 80
// 快速划过的透明度
this.quickOpacity = opt.quickOpacity || 0.2
// …
}
init (reset) {
let isQuick = Math.random() > 0.8
this.width = isQuick ? this.quickWidth : Math.floor(Math.random() * this.maxWidth + this.minWidth)
this.z = isQuick ? Math.random() * 300 + 200 : 0
this.opacity = isQuick ? this.quickOpacity : Math.random()
// …
this.sy = isQuick ? Math.random() * this.quickMaxSpeed + this.quickMinSpeed : Math.random() * this.maxSpeed + this.minSpeed
// …
}
move () {
// …
this.el.style.transform = translate3d(${this.x}px, ${this.y}px, ${this.z}px)
}
}
复制代码
4.鹅毛大雪
雪花嘛，轻如鹅毛，鹅毛是怎么飘的？是不是左右摆动的飘？那我们也可以选择一部分的雪花让它跟鹅毛一样飘，左右摇摆很简单，速度一会加一会减就可以了：
class Snow {
constructor (opt = {}) {
// …
// 是否左右摇摆
this.isSwing = false
// 左右摇摆的步长
this.stepSx = 0.03
// …
}
// 随机初始化属性
init (reset) {
// …
this.isSwing = Math.random() > 0.8
// …
}
move () {
if (this.isSwing) {
if (this.sx >= 1 || this.sx <= -1) {
this.stepSx = -this.stepSx
}
this.sx += this.stepSx
}
// …
}
}
复制代码
除了上述这种方法，左右摇摆还有一种方式，就是使用正弦或余弦函数，因为它们的曲线翻转90度就是左右摇摆：
img
我们使用正弦函数，公式为：y=sin(x)，x的值是弧度表示，只要一直增加就可以了，y的值用来修改雪花的水平方向的速度变化步长：
class Snow {
constructor (opt = {}) {
// …
// 是否左右摇摆
this.isSwing = false
// 左右摇摆的正弦函数x变量
this.swingRadian = 0
// 左右摇摆的正弦x步长
this.swingStep = 0.01
// …
}
init (reset) {
// …
this.swingStep = 0.01 * Math.random()
}
move () {
if (this.isSwing) {
this.swingRadian += this.swingStep
this.x += this.sx * Math.sin(this.swingRadian * Math.PI) * 0.2
} else {
this.x += this.sx
}
// …
}
}
复制代码
因为正弦函数y的值是从1变化到-1，摆动幅度太了，所以乘了个小数0.2缩小一点，想要幅度小一点，还有一个方法是不要使用整个正弦曲线，可以从中截取一个适合的区间大小，比如就让x的值在0.9π到1.1π之前变化：
class Snow {
constructor (opt = {}) {
// …
// 是否左右摇摆
this.isSwing = false
// 左右摇摆的正弦函数x变量
this.swingRadian = 1// 需要改成一个中间值
// 左右摇摆的正弦x步长
this.swingStep = 0.01
// …
}
init (reset) {
// …
this.swingStep = 0.01 * Math.random()
this.swingRadian = Math.random() * (1.1 - 0.9) + 0.9// 也让它随机一下
}
move () {
if (this.isSwing) {
if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {
this.swingStep = -this.swingStep
}
this.swingRadian += this.swingStep
this.x += this.sx * Math.sin(this.swingRadian * Math.PI)
} else {
this.x += this.sx
}
// …
}
}
复制代码
5.下的慢一点
既然给水平加了曲线，垂直方向上是不是也可以改成非匀速呢？当然可以，区别是速度得一直是正的，不然就要出现反自然现象了，改变速度曲线同样可以使用正余弦，上面我们使用了0.9π到1.1π之间的正弦曲线，根据上图可以发现对应的余弦曲线都是负的，趋势是先慢后快，所以可以利用这一段来改变垂直方向的速度：
move () {
if (this.isSwing) {
if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {
this.swingStep = -this.swingStep
}
this.swingRadian += this.swingStep
this.x += this.sx * Math.sin(this.swingRadian * Math.PI)
this.y -= this.sy * Math.cos(this.swingRadian * Math.PI)// 因为速度都是负的，所以改成-
} else {
this.x += this.sx
this.y += this.sy
}
// …
}
复制代码
6.在最上面
为了防止为页面上原本层级更高的元素遮挡，给雪花的样式加一个很大的层级：
render () {
this.el = document.createElement(‘div’)
this.el.style.cssText = `
// …
z-index: 9999999999999;
`
document.body.appendChild(this.el)
}
复制代码
7.看不见我
修改了层级，所以雪花会在页面的最上层，那么可能会挡住其他元素的鼠标事件，需要禁止它响应鼠标事件：
render () {
this.el = document.createElement(‘div’)
this.el.style.cssText = `
// …
pointer-events: none;
`
document.body.appendChild(this.el)
}
复制代码
8.更好一点
使用性能更好的transform属性来做动画：
render () {
this.el = document.createElement(‘div’)
this.el.style.cssText = `
left: 0;
top: 0;
transform: translate( t h i s . x p x , {this.x}px, this.xpx, {this.y}px);
`
document.body.appendChild(this.el)
}
复制代码
move () {
// …
// this.el.style.left = this.x + ‘px’
// this.el.style.top = this.y + ‘px’
this.el.style.transform = translate(${this.x}px, ${this.y}px)
}
复制代码
当然，最好的方式是用canvas来画。
最终效果：
下雨&雨夹雪
======
下完雪，接下来顺便下个雨，雨和雪差不多，都是从天上掉下来，但是雨的速度更快，通常也不会左右摇摆什么的，方向也基本是一致的，先来修改一下样式：
setStyle () {
this.el.style.cssText = `
// …
width: 1px;
// …
`
}
复制代码
很简单，只要把宽度写死为1就行了：
接下来把摇摆去掉：
move () {
this.x += this.sx
this.y += this.sy
// …
}
复制代码
效果如下：
可以发现雨是竖着在水平移动，显然是不行的，需要让它倾斜一定的角度，和运动方向保持一致，这个也很简单，算一下斜率，水平速度除以垂直速度：
move () {
// …
this.el.style.transform = translate(${this.x}px, ${this.y}px) ${this.getRotate(this.sy, this.sx)}
最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等
前端视频资料：
L21tYml6X2dpZi96UGgwZXJZamtpYjI3eVFRVUVFd0U3aWN0aWNGc3JWRmRTT0luZlRPSUkwRkpYQkNtQjlVVU1pY2RRQWxLUzJhdWljd2licWc3ekxVZWdxbkZ1RzNXS1RGWTRyQS82NDA?x-oss-process=image/format,png)
可以发现雨是竖着在水平移动，显然是不行的，需要让它倾斜一定的角度，和运动方向保持一致，这个也很简单，算一下斜率，水平速度除以垂直速度：
move () {
// …
this.el.style.transform = translate(${this.x}px, ${this.y}px) ${this.getRotate(this.sy, this.sx)}
最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等
[外链图片转存中…(img-T4KMNhZv-1715686640877)]
前端视频资料：
[外链图片转存中…(img-OWjwJoZC-1715686640878)]
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
