Seyu VFX

简介

基于 Vue3 将一些网页特效封装成组件，可以更加灵活的使用他们。

前往 Gitee 仓库

前往文档

使用介绍

• 全局导入

import { createApp } from 'vue'
// 导入组件库
import seyuVfx from "seyu-vfx"

const app = createApp(App)
//注册组件库
app.use(seyuVfx)

app.mount('#app')

• 按需导入

import { FloatDown } from 'seyu-vfx'

• 请在合适的位置导入样式

import "seyu-vfx/src/style.css"

组件文档

FloatDown

可以理解为樱花飘落特效的组件但这里可以自定义一些效果。使用方式也很简单：

<FloatDown>
  <div>这里是内容哦</div>
</FloatDown>

属性

• imgList: Array，自定义飘落图片，默认是樱花图案；
  • 接收一个数组，组件中使用 new Image() 加载数组的每一项，所以可以是图片路径也可以是其它。
• minWidth: Number，图片最小宽度，默认 30，单位像素，不能小于零；
  • 组件中会随机设置图片的宽度，但不会低于该属性；
  • 无需设置最大宽度，图片的最大宽度为最小宽度的1.5倍；
• minHeight: Number，图片最小高度，默认 25，与 minWidth 类似；
• count: Number，生成飘落图片的数量，默认 10，不能小于零；
• xSpeed: Number，横向移动速度，默认 1，不能小于零，值越大移动越快；
• ySpeed: Number，纵向移动速度，默认 1，不能小于零，值越大移动越快；
• direction: 'left' | 'right'，飘落方向，默认 'left'；
• disableRotate: Boolean，禁止旋转，默认 false，飘落的图片默认会自动旋转，设置该属性可以禁用旋转。

插槽

• default 默认插槽，飘落的图片会显示在插槽内容之上，若想让部分内容在飘落图片之上可以将 css 的 z-index 的值设置高于 50，
• above 与默认插槽相比，飘落的图片会在该插槽下方

方法

• start: (reset?: Boolean) => void
  • 开始飘落动画；
  • 参数 reset，是否重置当前页面中飘落的图片
• stop: (clear?: Boolean) => void
  • 停止飘落动画；
  • 参数 clear，是否清除页面中飘落的图片

CompassClock

罗盘时钟组件。 Tip: 组件提供日期格式、间距、字体大小等设置，请根据使用时的放置位置进行大小调整，若空间不足会导致内容重合，反之会留出大量空白。

<CompassClock />

属性

• format: Array，需要显示的日期,数组项类型为字符串，包含以下内容：
  • Year: 显示年份；
  • Month: 显示月份；
  • Day: 显示日；
  • Week: 显示周；
  • Hour: 显示小时；
  • Minute: 显示分钟；
  • Seconds: 显示秒。
  • 以上项除 Week 外均为中文数字格式，若需要使用阿拉伯数字格式请将首字母改为小写即可；
  • Week 显示的格式为 “星期X”，week 显示的格式为：“周X”；
  • 除 Year 外其它日期格式均可存在多个，不过应该不会这么做；
  • 默认将日期的中文数字格式全部显示。
• gap: Number，每一圈日期的间距，默认 10，单位像素；
• fontSize: Number，字体大小，默认 14，单位像素；
• color: String，字体颜色，默认 #000000；
• highlightColor: String，当前时间的高亮颜色，默认 #09c。

方法

• start: () => void
  • 开启定时器
• stop: () => void
  • 关闭定时器

CodeRain

让文字在组件区域内随机位置生成，然后快速落下，如同下雨一般。

<CodeRain />

属性

• bgImg: String，背景图片，值如同 img 标签的 src 值（动态图会变成静态背景）；
• bgColor: String，背景颜色，在背景图片不生效或没有传递背景图片时用来当做背景的颜色，默认 #000000；
• textMsg: String，文字内容，默认 rain；
• mode: 'split' | 'level'，文本显示的模式，默认 split：
  • split: 分割文字，如：rain =》 r \ a \ i \ n；
  • level: 水平绘制文字，将文字内容水平绘制然后一同落下；
• textColor: 'random' | Array，文字颜色，默认 random：
  • random: 随机生成一个颜色值；
  • Array: 选择想要出现的文字颜色将其组成数组传递给组件，在绘制文字时会随机使用其中的一个颜色作为字体颜色；
• fontSize: String，字体大小，默认 16px；
• speed: Number，下落速度，speed 值越大，下落速度越慢，且 speed 必须大于 0，默认 1 （speed 值的大小对动画流畅有一定影响）。

插槽

• default 默认插槽，在组件范围内需要显示的内容，包裹插槽的元素使用绝对定位，宽高 100%

方法

• start: () => void
  • 开始动画
• stop: () => void
  • 停止动画

RotateCards

3D 旋转卡片

<RotateCards :data="[1,2,3,4,5,6,7,8,9]">
  <template #default="{ item }">
    <div>
      {{item}}
    </div>
  </template>
</RotateCards>

属性

• data: Array，必须，数据源；
• direction: 'left' | 'right'，旋转方向，默认 'left'；
• duration: Number，旋转一周所需时间，单位毫秒，默认 10000；
• radius: String | Number，卡片项到中心的距离，默认 '40%'；
• tilt: Number，所有卡片所围绕形成的面的倾斜角度，单位 deg，默认 -10；
• itemClass: String，给包裹插槽的元素添加类名，也可以选择直接使用组件原有的类名设置样式，但请不要设置关于定位的样式。

插槽

• default 默认插槽，根据 data 数组长度循环渲染插槽内容，可接收参数 item 代表数组中的当前项

方法

• rest: () => void
  • 重置动画
• start: () => void
  • 开始动画
• stop: () => void
  • 停止动画

FireWorks

烟花

<FireWorks />

属性

• bgImg: String，背景图片，值如同 img 标签的 src 值（动态图会变成静态背景）；
• bgColor: String，背景颜色，在背景图片不生效或没有传递背景图片时用来当做背景的颜色，默认 #000000；
• riseRadius: Number，上升烟花半径，必须大于 0，默认值 2；
• riseColor: 'random' | Array，上升烟花颜色，默认 random：
  • random: 随机生成一个颜色值；
  • Array: 选择想要出现的文字颜色将其组成数组传递给组件，在绘制文字时会随机使用其中的一个颜色作为字体颜色；
• riseSpeed: Number，上升烟花速度，必须大于 0，默认值 2；
• riseCount: Number，上升烟花数量，必须大于 0，默认值 5；
• diffuseRadius: Number，扩散弹片半径，必须大于 0，默认值 2；
• diffuseColor: 'random' | Array，扩散弹片颜色，默认 random：
  • random: 随机生成一个颜色值；
  • Array: 选择想要出现的文字颜色将其组成数组传递给组件，在绘制文字时会随机使用其中的一个颜色作为字体颜色；
• autoFire: Boolean，自动发射，默认 true；
• shape: Array，烟花爆炸形状，在数组中随机选择一种形状，默认在全部形状中选择：
  • irregularity: 不规则形状；
  • circle: 圆形；

插槽

• default 默认插槽，在组件范围内需要显示的内容，包裹插槽的元素使用绝对定位，宽高 100%

方法

• fire: (ammo) => void
  • 发射烟花
• createShards: (shard[]) => void
  • 创建爆炸弹片组
• getShape: (option: {x: number, y: number}, shapes?: Array) => shard[]
  • 获取内置形状对应的弹片数组

// 类型
/* tip: ammo 中的 y 在绘制时是画布高度减去当前 y，callback 接收的 y 也是画布高度减去 y 之后的值，
* 所以将 callback 接收的位置直接用在 shard 就可以在结束位置绘制爆炸动画
* */
type ammo = {
  x: number, // 起始坐标 
  y: number, // 起始坐标
  end: number, // 结束位置距离起始坐标距离 
  radius: number, // 半径 
  color: string, // 颜色 
  speed: number, // 速度 
  callback: ({x: number, y: number}) => void // 到达结束位置回调
}
type shard = {
  x: number, // 初始位置
  y: number, // 初始位置
  color: string, // 颜色
  radius?: number, // 半径，默认 1
  cross?: number, // 横向偏移，默认随机 -1 ~ 1
  vertical?: number, // 纵向偏移，默认随机 -1 ~ 1
  topple?: number, // 下坠加速度，默认 0.01
  alpha?: number, // 透明度，默认 1
  decay?: number, // 透明度减少速度，默认 0.01
  customDraw?: ({x,y,color}, canvasContext) => void // 自定义绘制方法,canvasContext 为画布对象
}

本次更新内容

• 修复 FireWorks 组件自动发射功能在缓存路由失活时会异常调用

结语

该组件库的作者只是一个初出茅庐的小前端，若在公共项目使用本库请三思。