概述

我们在微信朋友圈里经常看到很多人分享h5的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把h5作为他们品牌传播,活动预热的很好方式。企业商户对于这种方式也很有好感,从而导致了h5制作行业涌进大批从业者,同时也成为众多程序员赚取外快的途径。

现在说人话。。。

先来讲讲当前h5行业的现状吧!

h5制作网站

低门槛的h5制作平台,不懂代码的人也可以来玩玩,如果你有一定的设计思维和作图能力,也能做出非常好看的h5作品。

国内比较出名的h5制作网站有:

  • 兔展:设计感和创意感最强的平台,但是制作相对复杂,需要设计基础。
  • 易企秀:老牌的h5制作平台,不断迭代,有大量案例,使用别人做好的h5需要付费。生态圈还不错。
  • 初页:手机app,手机端快速制作h5。
  • Epub360意派:设计师友好,自称专业级的。

类似的平台还有很多,一直纳闷如此多同类产品是如何生存的,目前看易企秀通过付费制作的方式经营的还不错,但是淘宝上有很多仿该平台的源码,很便宜。未来的发展和商业模式并不明朗。

以上的几个公司主要关注的是展示营销类的h5,对于h5游戏涉猎不多。对于h5游戏做的比较好的火舞游戏,百度h5游戏中心07073游戏 等。

好啦,什么商业模式,什么产品思维,什么设计理念,我们都不懂,我们就是写代码的,那就来干货吧,这样才能好好干活。

h5制作的相关技术

h5的动画受制于web浏览器的局限,基本有三种动画的实现方式。

  • 基于css的动画实现
  • 基于svg
  • 基于canvas
  • webgl

实践证明,当遇到复杂动画时,动画性能比较大致是这样的:svg < css < canvas < webgl

使用css实现:

css3确实要比过去强大很多,支持2d,3d的位移,缩放,透明度变化,旋转,过渡动画等,主要依赖css里的transform,transition,animation等属性,具体的使用方法参见w3school的教程。

需要注意的是 transition和animation不能同时作用于相同的元素.

当然也有很多的基于css的动画框架,让你快速构建动画。比较常用的有两类,css库和基于css动画的js库。

1.css库:css动画都是全局的,调用比较简单,但是侵入性比较强,固定模式,不太灵活。

  • animated.css 最常用的低调的动画库
  • hover.css 鼠标hover状态的动画库,移动端不可用
  • magic animation 比animate.css 奔放的动画库,动画尺度大
  • spinkit 几种css loading动画,不常用。
  • buttons.css 炫酷的按钮动画库,尤其是3d的按钮,是你想要的。

2.js库

Canvas

annie2x

Annie2x是一款Adobe Flash的插件,支持Flash cc 2015及以上和Adobe Animate 全线版本
,通过Annie2x插件能将FLA文件直接 CTRL+ENTER 一键发布成小程序 小游戏 HTML5等

动画制作软件

3D

https://www.babylonjs.com/