@mt-kit/vue-components

@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：

使用示例：

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

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