dodo-dot是一个快速创建粒子动画的工具,可以非常简单的创建炫酷好玩的粒子动画效果。
demo: https://hanruto.github.io/dodo-dot/examples/3.html
Installation
$ yarn add dodo-dot
Get Start
STEP1
在创建点和动画之前需要先制定一个canvas元素,这个panel是后边创建dot和animation所必须的
const panel = dodot
STEP 2
通过下边的API创建一组点
const dotsInfo =x: 10 y: 10 z: 0 color: '#666' shape: 'arc'x: 30 y: 10 z: 0 color: '#333' shape: 'arc'x: 50 y: 10 z: 0 color: '#999' shape: 'arc'const dots =
下边的这些方式创建dot会非常方便
// 随机创建1000个dotconst randomDots =// 创建排列成文字形状的dotconst textDots =// 创建排列成图片形状的dotconst imageDots =
STEP 3
通过下边的方式可以创建一个动画
const animtion =
创建连续的动画可以通过
const animtion =
STEP 4
动画执行和控制
animationanimationanimation
补充说明
粒子过渡 tweenType
粒子的过渡变化使用 Tween.js,可以自行搜索了解。 过度的动画类型有
- Quad
- Cubic
- Quart
- Quint
- Sine
- Expo
- Circ
- Elastic
- Back
- Bounce
粒子补充 supplementType
粒子补充指的是当 formDots 和 toDots 的数量不同的时候,需要补充粒子才能进行过渡,主要有三种形式
- 发散(divergence),从尽量大的区域生成点,一般指的3倍的屏幕尺寸的大小范围
- 收敛(convergence),从尽量小的区域生成点,一般指的图像所在的区域范围
- 拷贝(clone),从源点数组中随机抽取点进行拷贝