天天看点

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

将素材放入laya/assets目录中.本人新建一个animation文件夹专门放动画素材.如下图所示:

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

Ⅰ, GraphicAnimation动画

①右击Scenes -> 新建 -> 动画 , 打开新建对话框

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

②设置动画类型为GraphicAnimation,名称为boy,如下图所示:

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

③点击确认会在Scenes中生成boy.ani文件,我将其放入移入了animation文件夹中.启动时间轴的"动画编辑模式",这样就可以编辑动画了.如下图所示:

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

④修改动画的动效名称为:demo,如下图所示:

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

⑤将boy资源文件夹拖动到时间轴上,可制作一个逐帧动画,在第一帧重新定义一下x,y值,以确保动画的中心点在boy的脚下,如下图所示:

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

⑥导出动画资源(以图集形式) :如下图所示:

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

在bin/res/atlas/animation下生成了动画文件(这个laya文件夹有一种对应的关系):

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

①核心:

结果:

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

②扩展

1'加入Label标签:

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

2'代码

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)

~~~动画显示::::

LayaAir之动画(动画基础)一 : 准备素材二 : 开始制作动画三:显示动画(TS代码)
上一篇: 封装
下一篇: 声明式编程

继续阅读