骨骼动画
首先我们想要了解骨骼动画的写法,就得去了解Tiyjs。骨骼动画是基于tinyjs平台二次开发的插件运用。
官网地址:
插件种类:
在官网插件平台上,我们似乎可以找到三个有关骨骼动画的插件平台。spine,creature,dragonbones。使用插件不同,虽需要的资源结构不同,我们创建骨骼动画时,导入的格式也会随之变化。
举例(dragonbones插件)
首先用我们来看看用dragonbones创建的骨骼动画效果:
这是一个简单的小龙人行走的骨骼动画。如何实现呢?
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(); //加载骨骼动画
},[])
最终效果:
https://videocdn.alibaba-inc.com/a9b5b21ee64d2b47/Qe9k4XSEr4zqvIg7131/GeveWviJAajkmYbh00n_351694090005___hd.mp4?t=213fc9aa16497575828914423e9cb1&b=video&p=cloudvideo_http_800000013_1
骨骼动画存在的问题
1.视觉上,目前在淘宝容器的环境下,骨骼动画会出现比较明显的‘褶皱’纹路。
2.加载时切换JSON资源时,一定机率出现动画空白屏的问题。