骨骼动画在Html5使用攻略

1.概念

骨骼动画有诸多优点在游戏,动画制作,动漫都有非常多的运用。

跟帧动画比较来说,帧动画的每一帧都是角色特定姿势的一个快照,动画的流畅性和平滑效果都取决于帧数的多少。而骨骼动画则是把角色的各部分身体部件图片绑定到一根根互相作用连接的“骨头”上,通过控制这些骨骼的位置、旋转方向和放大缩小而生成的动画。

骨骼动画,我们常说的骨骼动画一般分为两个部分:1.骨架(Skeleton)2.蒙皮(Skin)

其中:

1):骨架涉及的数据包括两个

一是骨架的拓扑结构(连接、父子关系)

二是骨架的各种pose,也就是每个动作对应的整个骨架的位置信息。

2):蒙皮则表达的是依附在骨骼上的顶点的信息,骨骼绑定的过程就是确定每个顶点受哪几根骨骼的影响,每根骨骼影响的权重有多大,譬如肘部的皮肤可能同时受大臂和小臂两根骨头的影响,而远离手肘的部分可能就只受小臂骨头影响。一般在3D骨骼动画里,每个顶点最多支持4-8根骨骼同时影响它就已经可以很精确地表达整个蒙皮的效果了。

2.优点:

骨骼动画比传统的逐帧动画要求更高的处理器性能,但同时它也具有更多的优势:

动画更加生动逼真

图片资源占最小的存储空旷,

骨骼动画的图片容量可以减少90%(配置文件H5的压缩方案后面详解)

动画切换自动补间

过渡动画自动生成,让动作更加灵动

骨骼可控:可以通过代码控制骨骼

轻松实现角色装备更换,甚至可对某骨骼做特殊控制或事件监听

骨骼事件帧

动画执行到某个动作或某个帧,触发自定义事件行为

动作数据继承

多角色可共用一套动画数据

可结合物理引擎和碰撞检测

3.骨骼动画在Web端的运用

Web端在Html5有canvas标签支持后,引入骨骼动画可以极大的提供html的动画表现力和文件大小大幅缩小:

如何在Html5合理的使用骨骼动画

首先我们来看看目前设计web端的H5有以下几个有名的引擎库:

1:DragonBones




转载请注明:http://www.aierlanlan.com/tzrz/338.html

  • 上一篇文章:
  •   
  • 下一篇文章: