vue-particle-effect (demo)

yarn install
yarn dev

<script>
import ParticleEffect from './particle-effect'

export default {
  data() {
  	return {
  		effectHidden: false,
  	}
  },
  methods: {
  	onBegin() {
  		console.log('начало события')
  	},
  	onComplete() {
  		console.log('завершение события')
  	},
  },
}
</script>

<template>
  <ParticleEffect
  	:hidden="effectHidden"
  	direction="left"
  	particle-type="circle"
  	particle-style="fill"
  	particle-color="#000"
  	:duration="1000"
  	easing="easeInOutCubic"
  	:canvas-padding="150"
  	:size="4"
  	:speed="2"
  	:particles-amount-coefficient="3"
  	:oscillation-coefficient="20"
  	@begin="onBegin"
  	@complete="onComplete"
  >
  	BUTTON CONTENT GOES HERE
  </ParticleEffect>
</template>
```Компонент `ParticleEffect` использует слот `[slot]`. Дочерние элементы могут быть как простым `button`, так и более сложным `VNode`.
Запуск анимации частиц осуществляется путём изменения значения свойства `hidden`. Например, при нажатии кнопки программа устанавливает значение привязанной переменной `hidden` равным `true`, что приводит к постепенному исчезновению кнопки внутри анимации частиц.
 #### Справочник по свойствам
-  **hidden**
Тип: `Boolean`
По умолчанию: `false`
Описание: компонент `ParticleEffect` отслеживает изменения этого свойства и запускает соответствующую анимацию.
-  **direction**
Тип: `String`
По умолчанию: `'left'`
Описание: допустимые значения включают `'left', 'right', 'top', 'bottom'`.
-  **particleType**
Тип: `String`
По умолчанию: `'circle'`
Описание: допустимые значения включают `'circle', 'rectangle', 'triangle'`.
-  **particleStyle**
Тип: `String`
По умолчанию: `'fill'`
Описание: допустимые значения включают `'fill', 'stroke'`.
-  **particleColor**
Тип: `String`
По умолчанию: `'#000'`- **duration**
Тип: `Number`
По умолчанию: `1000`
Описание: единицы измерения — миллисекунды.

- **easing**
Тип: `String` или `Array`
По умолчанию: `'easeInOutCubic'`
Описание: когда тип привязанного значения равен `String`, используется заранее определенная функция сглаживания, начинающаяся со слова `ease`. Подробнее см. [источник](https://gitee.com/pxp/vue-particle-effect/blob/%E2%80%A6main/src/particle-effect.vue#L114) и [таблица значений](https://easings.net). В настоящее время поддерживаются только некоторые общие функции сглаживания; можно создать свою функцию, передав массив из четырех значений.

- **canvasPadding**
Тип: `Number`
По умолчанию: `150`
Описание: единицы измерения — пиксели. Дополнительное пространство, которое выделяется в холсте для отображения анимации.

- **size**
Тип: `Number` или `Function`
По умолчанию: `() => Math.floor(Math.random() * 3 + 1)`
Описание: единицы измерения — пиксели.

- **speed**
Тип: `Number` или `Function`
По умолчанию: `() => rand(4)`
Описание: определение функции `rand` см. в [источнике](https://gitee.com/pxp/vue-particle-effect/blob/%E2%80%A6main/src/particle-effect.vue#L172).

- **particlesAmountCoefficient**
Тип: `Number`
По умолчанию: `3`

- **oscillationCoefficient**
Тип: `Number`
По умолчанию: `20`

#### Справочник событий
- **begin**
Описание: вызывается при начале анимации.

- **complete**
Описание: вызывается при завершении анимации.