用于约瑟传说的精灵动画的custom element。 关于该组件的实际演示: 预览网页
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/seer2-pet-animator/dist/pet-render.umd.js"></script>
</head>
<body>
<pet-render url="http://seer2.61.com/res/pet/fight/100.swf"></pet-render>
</body>
<script type="module">
document.querySelector('pet-render').addEventListener('animationComplete', (event) => {
console.log('播放完毕:', event.detail);
});
document.querySelector('pet-render').addEventListener('hit', (event) => {
console.log('受击:', event.detail);
});
</script>
</html>您也可以把他作为npm包进行引入。
pnpm add seer2-pet-animator<script setup>
import 'seer2-pet-animator'
</script>
<template>
<!-- 基本用法 -->
<pet-render url="http://seer2.61.com/res/pet/fight/100.swf"></pet-render>
<!-- 强制使用HTTPS -->
<pet-render
url="http://seer2.61.com/res/pet/fight/100.swf"
:force-https="true">
</pet-render>
</template><pet-render>
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
url |
String | "" | SWF动画文件的URL地址 (必需) |
reverse |
Boolean | false | 是否反转动画播放方向 |
forceHttps |
Boolean | false | 是否强制将HTTP URL转换为HTTPS URL |
scale |
String | "noscale" | 缩放模式，可选值同Flash的StageScaleMode（如 "noScale", "showAll" 等） |
开始播放当前状态的动画
暂停当前动画播放
设置精灵的动画状态
参数:
state: 使用预定义的ActionState枚举值
获取当前动画状态
获取该SWF支持的可用状态列表
动画播放完成时触发
事件对象属性:
{
state: ActionState, // 当前状态
duration: number // 动画持续时间（秒）
}当动画播放到受击关键帧时触发
事件对象属性:
{
state: ActionState // 当前状态
}enum ActionState {
IDLE = "待机",
ATK_PHY = "物理攻击",
ATK_BUF = "属性攻击",
ATK_SPE = "特殊攻击",
UNDER_ATK = "被打",
UNDER_ULTRA = "被暴击",
WIN = "胜利",
DEAD = "失败",
MISS = "闪避",
ATK_POW = "必杀",
ABOUT_TO_DIE = "濒死",
PRESENT = "个性出场",
INTERCOURSE = "合体攻击",
CHANGE_STATUS = "变身效果",
BLANK = "空"
}//vite.config.ts
export default defineConfig({
optimizeDeps: {
// vite的依赖预构建功能无法正常引入我们使用的petContainer.swf，因此需要在这里排除
exclude: ['seer2-pet-animator'],
},
plugins: [
vue({
template: {
compilerOptions: {
// 将pet-render视为自定义元素，以防止其被vue的编译插件所解析
// see: https://cn.vuejs.org/guide/extras/web-components.html#example-vite-config
isCustomElement: tag => tag.includes('-'),
},
},
}),
],
})- Node.js 22+
- pnpm 10+
pnpm installpnpm run devpnpm run build