1.0.2 • Published 9 months ago
skeletal-animation-vue3 v1.0.2
一个轻量、简易、高效能的vue3组件，用一行标签显示骨骼动画。 A lightweight, simple, high-performance plugin using in VUE3. Use with only one line of html label.
安装 Quick start
引入 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
注意 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.