蘑菇

“今天来讲一种动画类型——骨骼动画,主要用来实现带交互的角色动画,它可以制作简单交互动画,也可以制作像《刀塔传奇》这样复杂的游戏。虽然我们不会接触到游戏UI,但带交互的需求还是会遇到,这不,这个大坑就掉我脚下了,领导要求把吉祥物设计成交互动画,于是我上网找资料学习,最后完美完成工作任务啦。今天就把我学习过程中的经验和总结分享给大家。”

“文章分三期(篇幅长图片多),这是第一期,先引入骨骼动画。第二期通过DragonBones Pro软件操作讲骨骼动画的知识结构。第三期讲卡通吉祥物的动画制作案例。写文章的目的是万一大家哪天接到这样的需求时,看过这篇文章能不慌就行。”

 

文章大纲

01  基本动画描述

02  骨骼动画描述

 

01 基本动画描述

工作中我们接触到的动画都是2D动画,是在一个平面上运动的,比如我们熟悉的加载动画,插画动画,吉祥物动画,还有比较复杂的动画片系列:海贼王,火影忍者等都是2D动画。

作者:阿龙

 

这里仅站在UI设计的角度,把2D动画简单分为两种:展示性动画、交互动画。

 

展示性动画

展示性动画顾名思义是为了场景展示而制作的,动画连贯且固定,用户只能是旁观者,可以关闭动画和触发其它操作,但不会干扰这一动画的运动。它可以是逐帧动画(不需要K帧,通过切换图片完成,常用PS制作),也可以是补间动画(需要在时间轴上K帧,常用AE或者flash制作),这种动画没有交互,开发只需要调用播放即可。

 

交互动画

指在动画播放时支持事件响应和交互功能的一种动画,即用户是可以和动画产生互动的,用户可以参与到其中并改变动画运动,并需要代码来完成交互的控制,可用flash制作完成后生成代码。

扫码体验

 

02 骨骼动画描述

2D交互动画里面有一种重要的形式:骨骼动画。它是由互相连接的“骨头”组成的骨架结构,通过改变骨头的朝向和位置来为角色生成动画。

我们知道,对于帧动画来说,角色的每一个姿势都是一帧,也就是一张图片,角色要完成一个动作需要把每一帧串起来,动画的流畅性和平滑效果都取决于帧数的多少,所以图片越多效果越好,这非常耗费资源。而骨骼动画是把角色的各部位图片绑定到一根根相互连接的“骨头”上,通过控制这些骨头的位置、旋转和缩放来生成动画。所以,骨骼动画的优点是可以针对单个骨头控制,动画制作更简单,交互控制更准确,图片资源更少,因为设计不需要给每一帧画图,只需画出角色的每一个关节就ok。

利用骨骼动画可以制作简单的交互动画和复杂的游戏。

骨骼动画的骨架结构

目前行业里骨骼动画的制作软件有Spine 和 DragonBones Pro,两者有什么特点呢?

 

Spine

它是一款收费的商业软件,功能完善,流畅度也很好,比DragonBones Pro更强大,多种输出格式,官方支持多平台,是游戏开发的专业软件。但因为价格小贵,且功能强大,所以经济成本+学习成本相对较高,适合做商业游戏的团队使用。

 

DragonBones Pro

它也是用于制作2D骨骼动画的编辑器,火爆手游《刀塔传奇》正是使用了DragonBones Pro编辑器得以实现如此丰富生动的效果。DragonBones Pro是一款免费软件,而且是中文版的,还有官方教学视频,上手快,很适合偶尔有简单需求的2D小游戏项目,比如H5游戏。

DragonBones Pro制作的动画精准,真实自然,使用较少的关键帧就可以表现复杂生动的动画效果,动画有缓动补间,占用位图和内存资源少,并且还提供制作H5动画的工作流程。

有的同学可能会有疑问,为什么不用AE做?虽然AE的动画功能也不错,特别是后期特效功能是动画软件不能比拟的,但是在碰到人物转身、转面、和物体互动、大幅度动作的时候,用AE实现很复杂,而DragonBones Pro利用骨骼绑定可以简单实现。

 

说了半天,DragonBones Pro就是我们讲的重点啦! 明天讲 骨骼动画制作<二> 

原创不易~

 

原文地址:番茄设计匠(公众号)

作者:番茄

 

转载请注明:学UI网 » 交互动画之—骨骼动画制作(一)

登录收藏
 
你可能喜欢的:
如何为产品快速构建合理的UI动效如何为产品快速构建合理的UI动效
灵感专题 — 2019年优秀UI动画设计作品欣赏#5月灵感专题 — 2019年优秀UI动画设计作品欣赏#5月
加载动效项目全解析加载动效项目全解析
追波交互动效及界面合集(三)追波交互动效及界面合集(三)
追波交互动效合集(二)追波交互动效合集(二)
追波交互动效合集(一)追波交互动效合集(一)
关于动效赋能产品体验的思考关于动效赋能产品体验的思考
GIF动效合集【1.0】GIF动效合集【1.0】
如何运用Lottie库让动效落地(附Bodymovin插件)如何运用Lottie库让动效落地(附Bodymovin插件)
PUPU奇幻之旅 - 品牌视频设定PUPU奇幻之旅 – 品牌视频设定