Braks
98a893108c
* docs: Animations * docs: add confetti gun * docs: update basic example on home page * docs(deps): Add stackblitz sdk to deps * chore: update yarn.lock * docs: use vue repl * docs: remove stackblitz sdk * docs: basic repl example * docs: use repl for examples/index.md (basic example) * docs: pass ext to repl * docs: add copy plugin * docs: use import map instead of dynamic imports * docs: use repl for custom node example * docs: hide repl errors * docs: use repl for custom connectionline example * docs: use repl for edges example * docs: exclude repl from ssr * docs: use repl for nested example * docs: use repl for stress example * docs: rename customNode to custom-node * docs: use repl for update-edge example * docs: use repl for update-node example * docs: use repl for validation example * docs: use repl for save-restore example * docs: scale down minimap in repl examples * docs: use repl for dnd example * docs: use repl for empty example * docs: use repl for hidden example * docs: use repl for interaction example * docs: use repl for multi example * docs: add pinia example with stackblitz * docs: update basic example * docs: update examples * docs: remove transition from intro * docs: update features * update: README.md * docs: scope css
70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import confetti from 'canvas-confetti'
|
|
|
|
export const fireworks = (colors?: string[]) => {
|
|
return new Promise((resolve) => {
|
|
const duration = 15 * 1000
|
|
const animationEnd = Date.now() + duration
|
|
const defaults = { startVelocity: 60, spread: 360, ticks: 20, zIndex: 0 }
|
|
|
|
function randomInRange(min: number, max: number) {
|
|
return Math.random() * (max - min) + min
|
|
}
|
|
|
|
const interval: any = setInterval(function () {
|
|
const timeLeft = animationEnd - Date.now()
|
|
|
|
if (timeLeft <= 0) {
|
|
clearInterval(interval)
|
|
return resolve(true)
|
|
}
|
|
|
|
const particleCount = 50 * (timeLeft / duration)
|
|
// since particles fall down, start a bit higher than random
|
|
confetti(
|
|
Object.assign({}, defaults, {
|
|
particleCount,
|
|
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
|
|
colors,
|
|
}),
|
|
)
|
|
confetti(
|
|
Object.assign({}, defaults, {
|
|
particleCount,
|
|
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
|
|
colors,
|
|
}),
|
|
)
|
|
}, 250)
|
|
})
|
|
}
|
|
|
|
export const cheer = (colors: string[]) => {
|
|
return new Promise((resolve) => {
|
|
const end = Date.now() + 2 * 1000
|
|
|
|
function frame() {
|
|
confetti({
|
|
particleCount: 2,
|
|
angle: 60,
|
|
spread: 75,
|
|
origin: { x: 0 },
|
|
colors,
|
|
})
|
|
confetti({
|
|
particleCount: 2,
|
|
angle: 120,
|
|
spread: 75,
|
|
origin: { x: 1 },
|
|
colors,
|
|
})
|
|
|
|
if (Date.now() < end) {
|
|
requestAnimationFrame(frame)
|
|
} else {
|
|
resolve(true)
|
|
}
|
|
}
|
|
frame()
|
|
})
|
|
}
|