@mt-kit/vue-components

自定义 Vue 组件库，提供序列帧动画、数字滚动动画等常用组件。

安装

npm i @mt-kit/vue-components

组件

AnimationFrame

基于 Canvas 的图片序列帧播放器，支持循环播放、暂停恢复、资源切换和滚轮缩放。

<script lang="ts" setup>
import {
  AnimationFrame,
  getAnimationFrameUrls
} from "@mt-kit/vue-components";
import "@mt-kit/vue-components/style.css";

const frames = getAnimationFrameUrls({
  framePath: "/assets/owl",
  framePrefix: "owl_",
  totalFrames: 74
});
</script>

<template>
  <AnimationFrame
    aria-label="眨眼的猫头鹰"
    :duration="2400"
    :frames="frames"
    :loop-interval="600"
    :zoom="{
      draggable: true,
      min: -1,
      max: 1
    }"
  />
</template>

组件实例提供 pause、resume、restart、zoomIn 和 zoomOut 方法，并抛出 end、zoom-change 事件。

CountTo

数字滚动动画组件，支持从起始值到结束值的平滑滚动效果。

Props：

| 属性名 | 说明 | 类型 | 是否必传 | 默认值 | |--------|------|------|----------|--------| | autoplay | 是否自动播放动画 | boolean | 否 | true | | decimal | 小数点符号 | string | 否 | . | | decimals | 小数位数 | number | 否 | 0 | | delay | 延迟执行动画开始的时间（毫秒） | number | 否 | 0 | | duration | 数字滚动动画时长（毫秒） | number | 否 | 1000 | | endVal | 结束数字 | number | 否 | 100 | | startVal | 开始数字 | number | 否 | 0 | | prefix | 前缀文本 | string | 否 | - | | separator | 千位分隔符 | string | 否 | , | | style | 滚动数字的样式对象 | object | 否 | - | | suffix | 后缀文本 | string | 否 | - |

使用示例：

<script lang="ts" setup>
import { CountTo } from "@mt-kit/vue-components";
</script>

<template>
  <CountTo
    :start-val="1"
    :end-val="10"
    :decimals="3"
  />
</template>