写在前面

不得不说,随着移动端浪潮的掀起,越来越多的App已经被拍死在沙滩上,现在市场上的App已经趋于饱和,�同类别的竞品层出不穷,那么在资源、市场、等客观条件都雷同的情况下,如何才能让你的app脱颖而出,就显得格外重要,好了,废话说完了。。开始我们今天的骨骼动画之路。

让我们先来看一下效果图:

4f677f3c0121?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

4f677f3c0121?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

是不有有一种眼前一亮的感觉?

我们不妨发挥一下想象,看看这样的动画效果是否可以应用到用户引导、开屏动画、或者loading页面中来增添一下逼格?好了,又一波废话说完了。项目源码已经放在了github上(导入成功后请运行SpineDemo工程即可)

1.什么是骨骼动画?

骨骼动画(Skeleton animation又称骨架动画,是一种计算机动画技术,它将三维模型分为两部分:用于控制动作的骨,以及用于绘制模型的蒙皮(Skin),架。跟传统逐格动画相异,骨骼动画利用建立好的骨架套用到一张或多张图片,使之动作,比起一般一张一张绘出动作省了很多时间与精力,且能更生动的动作。可以参见官方Demo来对比一下骨骼动画和帧动画的不同

2.骨骼、插槽、附件之间的关系

4f677f3c0121?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

举个栗子,一个人的脑袋就是一根骨骼,在这根骨骼上我们可以安放“眼部插槽"、“脑顶插槽”,然后我们可以在眼部插槽中配置”眼睛.png“、”眼镜.png“、”太阳镜.png“,在脑顶插槽中配置”帽子.png“、“头盔.png”。

下一篇里我会介绍一下Spine在Android中的使用方式,一步一步实现自己的骨骼动画(未完待续)

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐