unity 粒子组件_爆发粒子效果按钮组件

unity 粒子组件

VUE粒子效果按钮 (vue-particle-effect-buttons)

This library is a Vue portal of an awesome Codrops Article by Luis Manuel (original source).

该库是Luis Manuel的一篇很棒的Codrops文章的Vue门户(原始资料)。

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install --save vue-particle-effect-buttons

用法 (Usage)

<template>
    <ParticleBtn
      :visible.sync="btnOps.visible"
      :animating.sync="btnOps.animating"
      :options="btnOps"
      cls="btn-cls"
    >
    hello eveybody!
    </ParticleBtn>
    <h2>animating:{{btnOps.animating}}</h2>
    <h2>visible:{{btnOps.visible}}</h2>
    <button @click="btnOps.visible=!btnOps.visible">toggle</button>
  </div>
</template>

<script>
import ParticleEffectButton from "vue-particle-effect-buttons"

export default {
  data() {
    return {
      btnOps: {
        type: "triangle",
        easing: "easeOutQuart",
        size: 6,
        particlesAmountCoefficient: 4,
        oscillationCoefficient: 2,
        color: function () {
          return Math.random() < 0.5 ? "#000000" : "#ffffff";
        },
        onComplete: () => {
          console.log("complete");
        },
        onBegin: () => {
          console.log("begin");
        },
        visible: true,
        animating: false
      },
    }
  },
  components: {
    ParticleEffectButton
  }
};
</script>

Note that children can be anything, The children should represent the button's contents.

请注意， children可以是任何东西， children应代表按钮的内容。

You change the visible boolean prop to kick-off an animation, typically as a result of a click on the button's contents. If visible changes to false, the button will perform a disintegrating animation. If visible changes to true, it will reverse and reintegrate the original content.

您可以更改visible布尔属性来启动动画，这通常是由于单击按钮内容导致的。 如果visible更改为false ，则该按钮将执行分解动画。 如果visible更改为true ，它将反转并重新整合原始内容。

道具 (Props)

Property	Type	Default	Description
visible	boolean	true	Whether button should be hidden or visible. Changing this prop starts an animation. support .sync modifier
animating	boolean	false	Get the current status of animating or end of the animation. support .sync modifier
cls	string/Object/Arrar	noop	The class to change the default button styles
duration	number	1000	Animation duration in milliseconds.
easing	string	'easeInOutCubic'	Animation easing.
type	string	circle	'circle' or 'rectangle' or 'triangle'
style	string	fill	'fill' or 'stroke'
direction	string	'left'	'left' or 'right' or 'top' or 'bottom'
canvasPadding	number	150	Amount of extra padding to add to the canvas since the animation will overflow the content's bounds
size	number	func	random(4)
speed	number	func	random(4)
particlesAmountCoefficient	number	3	Increases or decreases the relative number of particles
oscillationCoefficient	number	20	Increases or decreases the relative curvature of particles
onBegin	func	noop	Callback to be notified once an animation starts.
onComplete	func	noop	Callback to be notified once an animation completes.

属性	类型	默认	描述
visible	布尔值	真正	按钮是隐藏还是可见。 更改此道具将启动动画。 支持.sync修饰符
animating	布尔值	假	获取动画或动画的当前状态。 支持.sync修饰符
cls	字符串/对象/ Arrar	没有	更改默认按钮样式的类
duration	数	1000	动画持续时间(以毫秒为单位)。
easing	串	'easeInOutCubic'	动画轻松。
type	串	圈	“圆”或“矩形”或“三角形”
style	串	填	“填充”或“中风”
direction	串	'剩下'	“左”或“右”或“上”或“下”
canvasPadding	数	150	要添加到画布上的额外填充量，因为动画将溢出内容的边界
size	数	功能	随机的(4)
speed	数	功能	随机的(4)
particlesAmountCoefficient	数	3	增加或减少粒子的相对数量
oscillationCoefficient	数	20	增加或减少粒子的相对曲率
onBegin	功能	没有	动画开始后将通知回调。
onComplete	功能	没有	动画完成后将通知回调。

I tried to keep the properties exactly the same as in the original codrops version.

我试图使属性与原始codrops版本中的属性完全相同。

插槽 (Slots)

Property	Type	Default	Description
default	slot	the string of 'content'	the content of the button

属性	类型	默认	描述
default	插槽	内容字符串	按钮的内容

翻译自: https://vuejsexamples.com/a-bursting-particles-effects-buttons-component/

unity 粒子组件