运营需求的一个重要核心功能在于页面内指定内容可配置,比如:头图、不同情况的提示文案等都可以支持根据运营同学的配置随时更改,提供灵活性。 但是这种配置的方式也出现了遇到难题的情况, 图片中包含复杂特效的情况往往会选择直接用视觉同学导出的gif动图, 问题在于页面中涉及的动图量大加载成本大大提高的问题。 为了尝试既维持灵活可配 & 减少加载成本,加下来介绍下骨骼动画的方案。
PIXI 主打支持硬件 GPU 渲染的 WebGL API,依赖他你可在不了解 WebGL 的 API 或者处理浏览器兼容就可以创建丰富交互式图形的跨平台应用的渲染器(当然,更深入的了解和更好的使用也需要你对 WebGL 的基础)。之所以称他为跨平台应用是因为他可以自动识别浏览器是否支持 WebGL 否则降级使用了 canvas2D 进行视图渲染。
// 自动识别当前环境是否支持
renderer = PIXI.autoDetectRenderer(
256, 256,
{ antialias: false, transparent: false, resolution: 1 }
);
// 强制使用canvas
renderer = new PIXI.CanvasRenderer(256, 256);
// 强制使用 WebGL
renderer = new PIXI.WebGLRenderer(256, 256);
// 创建canvas元素
const app = new PIXI.Application();
// 可插入到DOM中
document.body.append(app.view);
// 加载需要的精灵
PIXI.loader
.add('animals', '../images/animals.png')
.load((loader, resource) => {
// 资源加载后处理事件
// 创建图片
const animals = new PIXI.Sprite(resource.animals.texture);
// 设置图片的位置
animals.x = app.renderer.width / 2;
animals.y = app.renderer.height / 2;
// 设置旋转中卫为图案中央
animals.anchor.x = 0.5;
animals.anchor.y = 0.5;
// 添加到舞台
app.stage.addChild(animals);
// 监听帧更新 以下为进行旋转
app.ticker.add(() => {
animals.rotation += 0.01;
})
});
同样环境条件下,对5千张,1万,2万张图片进行循环渲染,进行帧率数据的比较;如图可见,PIXI 作为渲染器的表现是很优秀的。
骨骼动画的配置文件由以上几部分构成
骨骼动画配置文件分析完, 接下来就可以开始引用啦~
直接上代码是不是应该更容易理解
// 创建 canvas 并添加到 DOM
const app = new PIXI.Application(750, 1334);
document.body.appendChild(app.view);
// 加载 JSON 文件,绑定加载完之后的方法
PIXI.loader
.add('loading', './loading.json')
.load(onAssetsLoaded);
function onAssetsLoaded (loader, res) {
// 设置精灵 并且 设置他的位置
const loading = new PIXI.spine.Spine(res.loading.spineData);
loading.x = app.screen.width / 2;
loading.y = app.screen.height;
// 添加到舞台中
app.stage.addChild(loading);
// 开始循环播放 play 的动画
loading.state.setAnimation(0, 'play', true);
}
几乎100%复原动效同学的设计稿并且以尽可能高效的完成,最大限度减少和动效同学确认并调整动效效果的方面,个人认为骨骼动画的前景很乐观;结合我们的配置平台,也相信能快速更灵活的进行更新替换;后续会更深入的了解实现的更多细节和原理部分,尝试更多切入实际问题的实际改良方案,争取做到更好。欢迎大家踊跃提出疑问和建议,更多的尝试和心得会持续进行更新。