如何制作H5动画

H5页面中,动画的使用已经非常广泛,可以说,百分之90的H5页面拥有动画效果。
H5页面动画的制作,可以通过编码,插入flash等方式来实现。
但是对于非技术类人员,如何在H5中制作动画呢?我们在微吾H5在线工作中来学习如何制作H5动画。

操作方法

(01)打开工具使用谷歌浏览器打开微吾官网,进入我的主页,点击“创建项目”按钮。进入工具操作界面。

如何制作H5动画

(02)添加一个图片点击顶部菜单栏“图片”按钮,右侧出现图片选择栏目,点击“公共素材库”,选择任意图片插入到页面中。

如何制作H5动画 第2张

(03)选择图片右侧出现图片编辑模块,其中包含功能:图片替换、图片裁剪。包含图片基本信息设置:尺寸大小、边框颜色、透明比例、圆角半径、旋转角度等。

如何制作H5动画 第3张

(04)添加动画点击“动画”按钮,进入动画设置,点击“添加动画按钮”。为元素添加动画,设置动画类别和参数。动画时长:发生动画花费的时间。动画延迟:表示延迟动画的发生。比如,页面进入2s后再执行动画。

如何制作H5动画 第4张

(05)查看动画效果方式1:鼠标上移到动画效果选项,该选项会显示动画效果,以方便我们选择。方式2:为图片添加完效果之后,会默认执行该动画。方式3:点击“播放动画”按钮。可多次查看该元素添加的动画。

如何制作H5动画 第5张