https://github.com/emosheeep/snowflakes
100行代码，自制雪花飞舞玻璃窗，效果逼真，主要使用canvas实现。
https://github.com/emosheeep/snowflakes
canvas es6 javascript
Last synced: 5 months ago
JSON representation
100行代码，自制雪花飞舞玻璃窗，效果逼真，主要使用canvas实现。
- Host: GitHub
- URL: https://github.com/emosheeep/snowflakes
- Owner: emosheeep
- Created: 2020-01-06T12:09:50.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-17T05:32:20.000Z (over 5 years ago)
- Last Synced: 2025-04-01T23:07:37.789Z (7 months ago)
- Topics: canvas, es6, javascript
- Language: JavaScript
- Homepage: http://projects.biubiubius.com/Snowflakes/index.html
- Size: 4.15 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Snowflakes
自制雪花飞舞玻璃窗，效果逼真
主要使用```canvas```绘图，通过```window.requestAnimationFrame```实现刷新
（类似于```setTimeout```和```setInterval```）
[点击预览](http://projects.biubiubius.com/Snowflakes/index.html)
# 代码组织
使用ES6-class组织代码。
Snowflake类负责描述并更新雪花图案的属性。属性包括，位置坐标，水平速度和垂直速度，半径大小，透明度，旋转角度，角速度。
Snow类负责创建和调配雪花，将其绘制在画布上。创建动画帧，同时调用```window.requestAnimationFrame```刷新画布，绘制新的帧
做动画还是需要很多物理知识呀，共勉。
# 引入snow.js自定义飞舞效果
JS----snow.js可以引入到项目中，通过一点简单的配置即可快速实现雪花飞舞的效果。
该分支引入方式略有不同，采用ES6的方式：
### 快速使用
``` bash
// 传入id，默认配置下，雪花为大小、透明度不一的白色圆点
new Snow('#snow')
```
### 内置默认配置
``` bash
// 配置相应项即可，不配置则应用默认配置
new Snow('#snow', {
image: [], // 可选的图片(网络或本地)
vx: [-3, 3], // 水平速度
vy: [2, 5], // 垂直速度
va: [45, 180], // 角速度范围，传入图片才会生效
vf: 0, // 翻转速度，推荐：慢0.05/正常0.1/快0.2
radius: [5, 15], // 半径范围，传入图片需调整此项
color: ['white'], // 可选颜色，传入图片时会忽略该项
alpha: [0.1, 0.9] // 透明度范围
num: window.innerWidth / 2, // 雪花数量，一般无需改动
})
```
# GIF示例
```
new Snow('#snow', {
image: ['./snow.png'],
radius: [10, 80]
})
```
