一个轻量、简易、高效能的vue3组件，用一行标签显示骨骼动画。 A lightweight, simple, high-performance plugin using in VUE3. Use with only one line of html label.

安装 Quick start

• 使用npm 安装; Install with npm: npm i skeletal-animation-vue3

引入 Import

• 在main.js中全局引入; Fully import in main.js.

import { createApp } from 'vue'
import App from './App.vue'
import SkeletalAnimation from 'skeletal-animation-vue3'

createApp(App).use(SkeletalAnimation).mount('#app')

或 Or

• 在当前页面或组件中引入; Import in current page or component.

<script setup>
    import {SkeletalAnimation} from 'skeletal-animation-vue3'
</script>

使用 Usage

<skeletal-animation animation_src="https://share.foxwq.com/ajax/animations/feidao_black/feidao_black.json"/>

参数 API

| 属性 | 说明 | 类型 | 默认值 |备注| | ---- | ---- | ---- | ---- | --- | | background_color | 背景颜色 | String | "rgba(255,255,255,0)"|尽量使用rgb | background_alpha | 背景透明度 | Number | 0| 0~1 | background_width | 画布宽度 | Number | 400| px | background_height | 画布高度 | Number | 400| px | loop | 是否循环 | Boolean | false| | animation_name | 动画名称 | String | "animation"|json文件中的"animations"

示例 Examples

skeletal-animation-examples

注意 Attention

• 仅允许引入线上骨骼动画文件，本地文件会引发跨域问题; The .json file must be an online file, or you may face CORS issues.
• 仅需引入.json文件，但.atlas、.png文件需与.json文件置于线上同一目录下; Only .json file is in need. Moreover, the .png & .atlas file must be placed under the same directory with .json file in server.