Particle Effect for Vue在 Vue 中實(shí)現(xiàn)粒子特效
簡(jiǎn)介
react-particle-effect-button 的 Vue 實(shí)現(xiàn)，零依賴(lài)（除 Vue 外）。
可以在 Vue 中實(shí)現(xiàn)粒子特效。
演示地址
安裝教程
將 particle-effect.vue 復(fù)制到你的項(xiàng)目目錄中，自行修改適配。
下載項(xiàng)目所有文件后，如果想在本地調(diào)試代碼，請(qǐng)執(zhí)行以下命令：
yarn install yarn dev
使用說(shuō)明
<script>
import ParticleEffect from './particle-effect'
export default {
data() {
return {
effectHidden: false,
}
},
methods: {
onBegin() {
console.log('begin event')
},
onComplete() {
console.log('complete event')
},
},
}
</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，子節(jié)點(diǎn)除了可以是一個(gè)簡(jiǎn)單的button外，還可以是更復(fù)雜的VNode。
通過(guò)修改hidden屬性的值，來(lái)啟動(dòng)粒子動(dòng)畫(huà)。比如用戶(hù)點(diǎn)擊了按鈕，程序把hidden綁定的變量設(shè)為true，按鈕便會(huì)在粒子動(dòng)畫(huà)中慢慢消失。
屬性參考
hidden
類(lèi)型：Boolean
默認(rèn)值：false
說(shuō)明：ParticleEffect組件會(huì)監(jiān)控該屬性的變化，從而啟動(dòng)相應(yīng)的特效動(dòng)畫(huà)。
direction
類(lèi)型：String
默認(rèn)值： 'left'
說(shuō)明：可選值包括'left', 'right', 'top', 'bottom'。
particleType
類(lèi)型：String
默認(rèn)值：'circle'
說(shuō)明：可選值包括'circle', 'rectangle', 'triangle'。
particleStyle
類(lèi)型：String
默認(rèn)值：'fill'
說(shuō)明：可選值包括'fill', 'stroke'。
particleColor
類(lèi)型：String
默認(rèn)值：'#000'
duration
類(lèi)型：Number
默認(rèn)值：1000
說(shuō)明：?jiǎn)挝皇呛撩搿?/p>
easing
類(lèi)型：String或Array
默認(rèn)值：'easeInOutCubic'
說(shuō)明：當(dāng)綁定的值類(lèi)型為String時(shí)，使用預(yù)設(shè)動(dòng)畫(huà)值，以ease開(kāi)頭。具體參考源碼。
canvasPadding
類(lèi)型：Number
默認(rèn)值：150
說(shuō)明：?jiǎn)挝皇窍袼亍Ｔ诋?huà)布上預(yù)留額外的空間來(lái)顯示動(dòng)畫(huà)。
size
類(lèi)型：Number或Function
默認(rèn)值：() => Math.floor(Math.random() * 3 + 1)
說(shuō)明：?jiǎn)挝皇窍袼亍?/p>
speed
類(lèi)型：Number或Function
默認(rèn)值：() => rand(4)
說(shuō)明：rand函數(shù)的定義參見(jiàn)源碼。
particlesAmountCoefficient
類(lèi)型：Number
默認(rèn)值：3
oscillationCoefficient
類(lèi)型：Number
默認(rèn)值：20
事件參考
begin
說(shuō)明：動(dòng)畫(huà)開(kāi)始時(shí)觸發(fā)。
complete
說(shuō)明：動(dòng)畫(huà)結(jié)束時(shí)觸發(fā)。