骨骼动画的使用
骨骼动画
首先我们想要了解骨骼动画的写法，就得去了解Tiyjs。骨骼动画是基于tinyjs平台二次开发的插件运用。
官网地址：
插件种类：
在官网插件平台上，我们似乎可以找到三个有关骨骼动画的插件平台。spine，creature，dragonbones。使用插件不同，虽需要的资源结构不同，我们创建骨骼动画时，导入的格式也会随之变化。
举例（dragonbones插件）
首先用我们来看看用dragonbones创建的骨骼动画效果：
https://videocdn.alibaba-inc.com/a9b5b21ee64d2b47/Qe9k4XSEr4zqvIg7131/WuKsKM3OGSJ3ifm716o_351203870069___hd.mp4?t=212cb39316497569488494037e3000&b=video&p=cloudvideo_http_800000013_1
这是一个简单的小龙人行走的骨骼动画。如何实现呢？
1.首先我们要导入外部的插件js。
<script src="https://a.alipayobjects.com/g/tiny/tiny/1.0.1/tiny.js"></script> <script src="https://a.alipayobjects.com/g/tiny-plugins/tinyjs-plugin-dragonbones/0.0.1/index.js"></script>
第一个是tinyjs，第二个是dragonbones插件。
2.我们再看看dragonbones模式下的骨骼动画所需要引入的资源格式：
分别是，两个json文件和一个png。第一个json是我们按dragonbones模式制作导出的有关运动轨迹信息。第二个json是制作导出的有关图片各个部位的位置信息。第三个png则是我们的素材（一般都是被拆散零件的规整正方形图）。如：
3.准备好如上两步，我们就可开始进行操控动画了。
<script>
//导入资源部分
Tiny.Loader
.add("dragonBonesData", "./resource/Dragon/Dragon_ske.json")
.add("textureDataA", "./resource/Dragon/Dragon_tex.json")
.add("textureA", "./resource/Dragon/Dragon_tex.png")
.load(initAm);
//初始化我们的动画引擎
function initAm() {
var config = {
showFPS: true, // 显示帧频
dpi: 1, // 分辨率
renderOptions: {
backgroundColor: 0x2a3145 // 画布背景色
}
};
// 初始化App
var app = new Tiny.Application(config);
// 新建场景
var container = new Tiny.Container();
// 启动场景
app.run(container);
initDragonBones(app, container);
}
//初始化我们的动画
function initDragonBones(app, container) {
//设置别名
var dragonBones = Tiny.DragonBones;
//载入本地的数据
var resources = Tiny.Loader.resources;
// 取出来骨骼数据
var dragonBonesData = resources["dragonBonesData"].data;
// 从资源中取出来骨骼纹理数据
var textureData = resources["textureDataA"].data;
// 从资源中取出来骨骼纹理图片
var texture = resources["textureA"].texture;
// 添加骨骼数据
dragonBones.addDragonBonesData(dragonBonesData);
// 添加纹理
dragonBones.addTextureAtlasData(textureData, texture);
// 创建一个骨骼精灵
var armatureDisplay = dragonBones.buildArmatureDisplay('Dragon');
// 设置精灵在场景中的位置
armatureDisplay.x = app.renderer.width * 0.5;
armatureDisplay.y = app.renderer.height * 0.5 + 50;
armatureDisplay.scale.set(0.3, 0.3);
// 播放骨骼动画 DragonBones Pro 默认生成四个动作 fall、jump、stand、walk
var animationState = armatureDisplay.play('walk');
// 把骨骼对象添加到场景中
container.addChild(armatureDisplay);
}
</script>
然后我们再把这个demo跑起来，就可以看到想要的效果啦。
在页面中我们选中当前骨骼动画元素，发现其基层原来还是一个canvas元素。原来如此哇～
运用我们的creature插件创建骨骼动画类似，这里就不再举例了。下面主要看看我们spine。
spine插件的运用
预览功能：
1.点击播放器。
2.点击选择预览资源。
3.选择对应格式的资源文件
4.预览
预览功能可以提前看到我们视觉提供给我们的骨骼动画的效果～
注入依赖
关于我们的tinyjs，目前还是采用在document的html中头部引入的方式。
spine 可采用 npm i tinyjs-plugin-spine --save 的方式下载。
注意spine 在我们模块中的引入方式得是
接下来就是创建一个骨骼动画：
import * as spine from "tinyjs-plugin-spine"; //获取比例参数 const pixelRatio = window.screen.width / 750; export function man() { const canvasDpi = 2; //分辨率 const referWidth = 375; //基准参考宽度 const configJSON = { json: "https://g.alicdn.com/alisports-fe/assets/0.1.5/loseWeight/zhangtai3/zhangtai3.json", //资源json }; // 定义初始化配置参数 const config = { fps: 30, //帧频 referWidth, //基准参考宽度 width: 425 * pixelRatio, // 必传 宽度 height: 700 * pixelRatio, // 必传 高度 fixSize: true, // 必传 renderOptions: { transparent: true, //被背景色透明 }, showFPS: false, // 显示帧频 dpi: canvasDpi, // 分辨率 }; const tinyApp = new Tiny.Application(config); //创建一个 const loader = new Tiny.loaders.Loader(); const container = new Tiny.Container(); const { json } = configJSON; loader .add("spineRes", json) //加载资源 .load(function (loader, res) { let spineInstance = new spine.Spine(res.spineRes.spineData); //添加骨骼 container.addChild(spineInstance); // 内容填充 let localRect = spineInstance.getLocalBounds(); //获取存储边界计算结果的可选矩形 spineInstance.setPosition( //设置相对渲染区域的定位 localRect.width / 2 + 30, localRect.height + 50 * pixelRatio ); //定位 spineInstance.state.setAnimation(0, "animation", true); // 索引 类型 循环 }); tinyApp.run(container); }
最后我们在dom结构渲染之前，加载一下man这个函数就行。
useEffect(()=>{ man(); //加载骨骼动画 },[])
最终效果：
骨骼动画存在的问题
1.视觉上，目前在淘宝容器的环境下，骨骼动画会出现比较明显的‘褶皱’纹路。
2.加载时切换JSON资源时，一定机率出现动画空白屏的问题。
