egret Wing动画入门

前言: 这个教程是使用egret Wing动画,把图片合成一个在弹吉他的熊,熊背后的花会转个不停。

1. 新建个egret项目,然后把素材导入resource/assets,就会自动生成JSO文件;

2. 如图。其实新建一个Animation.exml文件就可以了,但是你这个动画肯定要有play方法吧,那也还是要新建ts文件,不如一起建了,以后再把ts文件移到src目录下,Animation.exml文件继续留在那里;

3. 点开exml文件,把需要用的素材都拖到舞台上,注意是拖“资源”里的图片而不是项目里的,那些是拖不动的,点击左下角的就可以看见你的资源了。拖的时候不必计较位置啥的,因为这些图片的位置影响不了动画

4.

选择动画,点击左下角的+号新建动画组

 然后选择图片,给上ID,再点击“组”隔壁的那栏“动画”,选择+号,就有了动画的第一个目标对象。

5. 让花转起来:首先有个锚点的概念,锚点默认在图片的左上角,要把锚点改到图片的中间,花才能围绕中心旋转。在“设计”面板选择花,然后按住CTRL键,把锚点拖到中间。然后切换到动画面板右键添加关键帧,设置旋转的角度。接着又设置一个关键帧,角度设为300°,在两个关键帧当中添加补间动画,就能看到花转起来了。

6. 让熊眨眼睛

其实就是先把眼皮的透明设置为0,那就看不见了,然后等需要展示的时候再设置它的透明度为1,下一帧又设置透明度为0,给人一种眨眼的感觉

7. 引用动画

在第四步的时候不是新建了动画组吗?动画组的ID这时候就起作用了,因为动画组有play的方法,直接调用就可以了。

提示:1. 普通视频是一秒24帧,高清的视频是48帧,所以帧数越多,给人的感觉越连贯自然。

帧的密度大概为这样,给人的感觉就是比较正常的动画

2. 遇到有重复的动画可以选择在“源码”那进行复制粘贴,改一下target就可以了,target的值为图片的ID。

参考: http://developer.egret.com/cn/article/index/id/1075

猜你喜欢

转载自www.cnblogs.com/caoshufang/p/12074230.html