手把手教你如何设置H5页面动画效果

     “H5”,这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的动画设计,希望与大家进行交流探讨。

  首先我们选择H5页面制作平台,以“应用之星”平台为例。

  第一步:进入网站,注册登录,点击“应用制作”,进入制作页面。

  

  第二步:选择“高级模式”,点“+”创建应用,或者直接选择模板使用。

  

  第三步:进入H5界面制作,根据你的需求选择控件使用。其中文本控件、图片控件、按钮控件、视频控件、图形控件、图组控件、表单控件、地图控件、拨号控件和投票控件都能设置动画。

  以“地图控件”为例来讲如何设置动画。

  其中时间是指动画持续播放的时间,比如你设置2秒,则播放2秒;

  延迟是指动画延迟播放的时间,比如你设置了延迟播放2秒,那么打开这个页面时,动画在2秒后才开始播放。注意一下先设置动画时间,再设置动画方式。

  

  另外图形控件和图片控件,设置动画时,若设置次数,则该动画播放的次数;若勾选循环方式,则动画效果无限循环,次数和循环只能选择一个使用,不能同时使用。

  

  第四步:当你一切制作好后,点击“发布”,进入预览页面,WEB二维码即生成的H5页面。在预览页面可以看看设置的动画效果,如果效果不好,点击“返回”修改;如果效果好的话,直接用微信二维码扫描分享至朋友圈。

  是不是很简单?有需要的朋友可以试试!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章