Instrall
使用 npm 安装: npm install cvs
使用 yarn 安装: yarn add cvs
Usage
import { Scene, Path } from 'cvs'
let scene = new Scene({
containerId: 'container'
})
let layer = scene.layer()
const dotSpeed = 1.5
const dotCount = 60
for (let i = 0; i < dotCount; i++) {
let r = Math.random() * 30 + 10
layer.append(
new Path({
d: {
type: 'circle',
r: r
},
x: Math.random() * (layer.width - 2 * r),
y: Math.random() * (layer.height - 2 * r),
xa: (Math.random() * 2 - 1) * dotSpeed,
ya: (Math.random() * 2 - 1) * dotSpeed,
zIndex: Math.random() * dotCount,
fill: `rgba(${Math.random() * 255}, ${Math.random() *
255}, ${Math.random() * 255}, ${Math.random()})`
})
)
}
requestAnimationFrame(function loopUnit() {
requestAnimationFrame(loopUnit)
layer.clear()
layer.children.forEach(ele => {
const x = ele.attr('x') + ele.attr('xa')
const y = ele.attr('y') + ele.attr('ya')
const r = ele.attr('d').r
if (x > layer.width - 2 * r - 1 || x < 0) ele.attr({ xa: v => -v })
if (y > layer.height - 2 * r - 1 || y < 0) ele.attr({ ya: v => -v })
ele.attr({ x, y })
})
layer.draw()
})