17723342546
H5技术分享|H5动画制作规范及技巧

在目前的互联网时代,网络信息的表现形式主要由信息、图片和视频组成,关于视频制作,今天小编就给大家分享一下H5动画的制作规范及技巧,感兴趣的伙伴可以参考借鉴一下。

一、关于动画:

1、帧频60

2、所有需要动的元素必须转为元件。

3、只需播放一次的动画(如出场动画),需把动画做在最外层的元件图层。

H5动画设计

4、循环播放的动画(如云一直在飘),需把动画放在元件里,再做元件动画。即

H5动画设计

5、引导动画需转成逐帧动画。

6、不同的元件之间不能做补间动画。

7、循环播放的元件(如雪花一直飘),两关键帧中间需有空白关键帧

H5动画设计

8、初始关键帧为透明元件,需将此透明元件复制到第一帧。最后需创建关键帧。

H5动画设计

9、持续旋转的动画(如风车),需将元件先做0-180°的旋转,再直接复制元件,将复制元件里面的位图旋转-180°,再将此复制元件做0-180°的旋转。(注:元件与复制元件为两个不同的元件)

二、关于命名

1、请使用英文字母、数字和下划线“_”的组合进行命名,并且只能使用英文字母开头。

2、不能有中文(复制这样的字样也不能有)直接复制元件后记得改命名。

3、图片请使用小写字母后缀且必须有后缀,请勿使用中文以及除下划线之外的其它字符(包括空格)。

4、同一个项目,任意不相同的图片或元件,命名不能重复。

5、同一图层上有2个及以上相同的元件时,需修改实例名称

H5动画设计

三、关于遮罩

1、遮罩必须建成元件,一个遮罩层有且只能有一个元件,且元件命名必须包含“_forMask”

2、遮罩必须为白色,转换成位图,遮罩元件可做动画。如果遮罩用形状,则不能做动画。

3、转为位图的遮罩可做透明度。

四、关于注册点

元件需要做旋转、斜切、拉伸等动画时,元件里面的注册点需与元件中心点重合。(不能做斜切)

一般解决办法:

1、如出现补间,H5动画设计,可更改补间属性为【影片剪辑】

2、AI直接导入Flash,需先将需要做的图层全部转为位图(GIF和视频除外),否则会出现组等不规范操作,如已经出现,需找到最里层素材将其转换成位图,再移至元件图层。

3、关于动画先后出场顺序,一般情况为:背景—主题元素—主文字—副文字—主按钮—副按钮。

4、出场帧数建议:10-30帧(帧频60)

5、循环帧数建议:云层横向飘过600-800帧

(注:以上3、4、5可根据需要适当调整。)

以上就是小编制作H5动画的经验技巧总结,相对来说,H5动画运用的技术比游戏制作简单一些,但其制作细节也有很多门道,如果你想制作一个动画H5,可以咨询我们蓝橙互动,能够为你提供专业的动画H5设计服务。