A customizable canvas library for flying coin animations (Rain, Burst, Volcano). Features independent scenes, full API control (start/stop/clear), infinite loops, custom coin images, and adjustable physics.
npm install flying-coinsМодульная JS-библиотека для анимации падающих монет.
Позволяет создавать изолированные сцены и управлять эффектами (дождь, взрыв, вулкан) независимо друг от друга.
``bash`
npm install flying-coins
javascript
import { CoinScene, CoinRain, CoinVolcano } from 'flying-coins';// Инициализация в контейнере
const container = document.getElementById('my-container');
const scene = new CoinScene(container, {
coinSrc: 'path/to/coin.png', // Опционально: путь к изображению монеты
bgTransparent: true // Опционально: прозрачный фон (по умолчанию true)
});
`$3
Дождь из монет (CoinRain):
`javascript
const rain = new CoinRain({
loops: 0, // 0 = Бесконечно
interval: 0.17, // Интервал появления монет (сек)
immediate: true // Начать спавн сразу
});
scene.add(rain);// Остановить позже
setTimeout(() => rain.stop(), 5000);
`Вулкан / Фонтан (CoinVolcano):
`javascript
const volcano = new CoinVolcano({
x: 0.5, // Позиция X (0.0 - 1.0)
y: 1.0, // Позиция Y (0.0 - 1.0, 1.0 = низ)
count: 20, // Количество монет в одном выбросе
loops: 5, // Количество выбросов
interval: 0.2, // Интервал между выбросами
strength: 1, // Сила выброса (высота)
spread: 1, // Разброс по ширине
});
scene.add(volcano);
`Взрыв (CoinBurst):
`javascript
const burst = new CoinBurst({
count: 18, // Количество монет
strength: 1, // Сила взрыва
loops: 1 // Обычно 1 раз
});
scene.add(burst);
`$3
`javascript
scene.remove(rain); // Удалить конкретный эффект
scene.clear(); // Удалить все эффекты и монеты, очистить экран
scene.destroy(); // Полностью уничтожить сцену и освободить ресурсы
`$3
Изменить изображение монеты:
`javascript
// Можно использовать любой URL изображения (png/jpg/svg)
scene.setCoinImage('https://example.com/my-custom-coin.png');
`---
API Reference
$3
Главный контроллер сцены.
- constructor(container, options)
- container: DOM элемент для канваса.
- options.coinSrc: URL изображения монеты (string).
- options.bgTransparent: Прозрачный фон (boolean, default: true).
- Methods:
- add(effect): Добавить и запустить эффект.
- remove(effect): Остановить и удалить эффект.
- clear(): Очистить все монеты и эффекты.
- setCoinImage(url): Сменить текстуру монеты на лету.
- destroy(): Удалить канвас и остановить анимацию.$3
Эффект падающего дождя.
- constructor(options)
- options.loops: Кол-во циклов (0 = бесконечно).
- options.interval: Интервал спавна (сек).
- options.immediate: Спавнить ли первую порцию сразу (boolean).$3
Эффект выброса монет снизу (или из точки).
- constructor(options)
- options.x, options.y: Координаты центра выброса (0.0-1.0).
- options.count: Кол-во монет за цикл.
- options.loops: Кол-во выбросов (0 = бесконечно).
- options.interval: Время между выбросами.
- options.strength: Множитель вертикальной скорости.
- options.spread: Множитель горизонтального разброса.
- options.size: Множитель размера монет.
- options.thickness: Множитель толщины монет.$3
Единовременный взрыв монет.
- constructor(options)
- options.count: Кол-во монет.
- options.strength: Сила разлета.
- options.loops`: Кол-во повторов (0 = бесконечно).