手把手教你制作炫酷H5动效

经常有用户在群里说

为什么设计师做的H5动画辣么好看

为什么自己一动手

就变得不连贯！不流畅！不美观！

今天堂妹儿就来教大家几个炫酷的动画的制作

分步、详细、手把手教学！

包教包会！

今天将依次讲一下

如下两个动画的制作

  

1

超酷层叠效果

线条的叠加动效，多层图片的重叠景象，再加上由内而外的聚散收敛，最后将主题和盘托出。这个H5，从亮相的第一刻。就以酷炫的形态吸引了眼球。

 STEP 1 

首先，打开秀堂客户端或者网页（s.wps.cn），新建一个画册。

 STEP 2 

然后，如图所示，我们将准备好的各个素材（线条方块，图片，元素），一步一步开始放置到合适的位置。并按照顺序，进行罗列。

 STEP 3 

重头戏来了！我们要如何设置动画的时间，才能制作出行云流水般的酷炫层叠效果呢？

①要想显示出，由左右向中心的顺畅特效。很简单，只需要两个动态效果：向上淡入和向下淡入。首先，我们将各个线条素材，由左自右分类好，以0.1秒的间隔设置，一上一下的淡入，就能很好地融会贯通。

②想要制作图中的心形扩展的效果，只需要使用秀堂的一个效果：纵向展开。从中心开始，以0.1秒的间隔设置，有里自外，就一气呵成了。

③最后，也就是运用上下左右全方位的动态，来突出主题。具体的操作也都是通过最简单的动画【淡入】来完成的。蓝粉底部，分别向上淡入和向下淡入。中心图片从左淡入，各白色元素随后从右淡入。

2

波浪纹路效果

第二个给大家分享一个制作波浪纹路效果背景的方法，先上效果图。

 STEP 1 

首先，打开秀堂客户端或者网页（s.wps.cn），新建一个画册。

 STEP 2 

然后，如图所示，我们将准备好的各个素材（线条方块，图片，元素），一步一步开始放置到合适的位置。并按照顺序，进行罗列。

 STEP 3 

重头戏来了！我们要如何设置动画的时间，才能制作出波浪纹路般的动态效果呢？

①要想显示出，自上而下的顺畅特效。很简单，只需要一个动态效果：纵向收缩。首先，我们将各个线条素材，自上而下排列好，以0.1秒的间隔设置，就能实现如下的丝滑效果。

②随后的产品罗列的特效也十分容易做到。下部的花卉，采用了【从下淡入】的特效，以0.2的间隔，依次出现。展示图片的素材使用的是【旋转淡入】的特效，文字框使用的是【从上展开】的特效。

看完了这些动画效果的制作

是不是发现酷炫的特效其实也并不难了呢

赶紧登陆秀堂官网或者秀堂客户端

试着制作一款别具一格的H5吧