一年四季的特效
在浏览很多网站时，我们有时会看到这样的效果：
- 许多花瓣随风飘荡
- 页面中雪花簌簌飘洒，仿佛要将你带到冬天
- 其他有季节特色的元素
尤其是B站首页头图，有非常漂亮的交互效果（回顾）:
出于对技术与自然之美的热爱，咱便想，在一个项目中，集齐一年四季的风景：春花，夏雨，秋叶，冬雪。
第一次
花瓣
此项目始于2023年8月，咱最先接触也最先开始探究的是飘花的效果，有几篇文章介绍这个：
原理很简单，就是创建花瓣对象，然后使用requestAnimationFrame不停地更新花瓣的位置，并且重绘canvas。
下雨
为了省劲，咱在 github 上搜索了不少下雨下雪相关的项目，其中找到了一个比较好的下雨项目：rain。效果比较好，还可以配置，还有水花效果。
落叶
其实把花瓣换成树叶就行了。咱找了 2 种比较好看的树叶，橘黄枫和银杏树叶，然后就让它们自由地飘落吧。
天雪
咱找到的雪花有六角雪花形状的，也有圆点形状的。经过思考，咱选择使用圆点形状的，因为咱感觉下雪重在整个意境，应追求“神似”而非精准描绘其形状。咱找到的一些比较好的效果也都是用的圆点。
draw(ctx) {
ctx.save()
ctx.globalAlpha = this.o
ctx.beginPath()
ctx.arc(this.x, this.y, this.s, 0, Math.PI * 2, false)
ctx.closePath()
ctx.fill()
ctx.restore()
}
另一个效果（未采用）：Felix_SANA 'S BLOG
整合
整合是一项非常麻烦的工作，需要把 4 种效果杂糅在一起，并且要支持同时显示这 4 种效果。首先声明它们 4 种元素再加上水花元素的类及其更新和绘制方法，再在开始函数中创建它们，再开启动画。创建的过程包括获取一些针对性的属性（图像等）并且为其配置位置和移动速度等个体属性。有一个getRandom()函数专门做这些。
花和树叶比较简单，就是一个匀速直线运动的图片，并且匀速旋转。雪花多一个透明度，不用旋转。雨就比较复杂咯，有各种配置，还有重力影响，是加速下落的。而且还会溅起水花。咱也没有进行大改，只得单独为其写了一套代码。
再一个就是配置问题。咱想要实现，包括图案数量、大小、淡入淡出等属性，甚至还想要让访客也能自定义。为此咱专门写了前置函数readyCreate()用来合并配置，判断哪些部分用主人的，哪些部分用访客的。写得很乱，并且也不太好，如果想自定义必须完整传入整个配置对象，不能只写几项属性。
为了让访客方便地自定义配置，咱专门写了一个 Vue 组件，允许访客通过 GUI 界面来修改配置，即时看到新效果，并且保存配置到本地，方便下次再用。其实弄这个也是为了方便咱调试哈哈。
后面咱忘了是什么原因，暂时搁置了。
第二次
第二次开发始于2024年1月，主要是使用 pnpm workspace 功能对其进行组织，然后整理代码，完善功能，修复错误。目标是把它做到可以正常使用的程度，并且发布。
workspace
出于分别发布含 GUI 项目与核心 JS 的需要，我使用了 pnpm 的 workspace(工作空间)。它可以让你在一个代码仓库内管理多个项目（多个 npm 包）。并且，在主项目中，或者项目与项目之间，你可以像使用别人的npm 包一样使用你的子项目。无需真的发布这些包，只需配置 workspace，然后用 import语句导入它们。
pnpm支持Monorepo模式的工作机制叫做workspace(工作空间)。它要求在代码仓的根目录下存有
pnpm-workspace.yaml文件指定哪些目录作为独立的工作空间，这个工作空间可以理解为一个子模块或者npm包。
在根目录创建 pnpm-workspace.yaml 然后写入包位置，再执行pnpm i即可。具体教程网上很多，不再重复。
packages:
- src/vue-natural-falling
- src/
- packages/* # packages 目录下都是组件包最终咱的仓库被分为 3 个项目：
- 主仓库：是一个示例项目，仅用于调试和演示
- vue-natural-falling：一个 Vue 组件，包含开关和自定义界面
- core：核心 JS
改进
首先是，移动端的问题。咱在将组件适配移动端时发现，屏幕上的图案非常密集，非常拥挤，非常难看。只好赶紧优化，如果判断到是移动端，就把图案数量减半。
还有一个是，更新后重置访客配置。很好理解，由于访客修改配置后，会将配置保存在本地，在这之后，如果 JS 版本改动较大，可能会不兼容旧的配置，强行使用旧配置就会导致程序出错。这里咱判断如果 JS 版本更新就弃用本地配置就好了。还多加了一个如果主人配置更新也弃用。
最终整理的程序结构
发布
最后就是发布咯，为此专门学了一番package.json该如何配置，然后操作一番，成功发布~
INFO信息
如需了解更多，请看下篇文章
当时的更新日志：
- 2023.8 启动，整合多个项目，初步可用，后搁置
- 2024.1 重启，重构代码，完善功能，发布核心 js
- 2024.3 发布 vue 组件，优化小屏幕显示
- vue 0.6.4：更新后重置访客配置
- vue 0.7.0：适配移动端
- vue 0.7.1：修复重置访客配置
- js 0.8.0：优化小屏幕显示，整理越来越乱的代码 :（
- js 0.8.1：更好地判断季节（大致根据节气区间）
