H5工具大全:Adobe Animate CC、iH5、Wix、Weebly、Epub360、兔展、易企秀、Maka、Prezi

///H5工具大全:Adobe Animate CC、iH5、Wix、Weebly、Epub360、兔展、易企秀、Maka、Prezi

H5工具大全:Adobe Animate CC、iH5、Wix、Weebly、Epub360、兔展、易企秀、Maka、Prezi

1、离线动画软件:Adobe Animate CC、Google Web Designer、Hype
特点:以动画制作为长,离线操作,需服务器部署
典型代表:Adobe Animate CC
动画制作: 5.0分
交互制作: 2.5分
高效易用: 2.0分
作为设计工具类的鼻祖级,Adobe的产品在体验和功能上还是非常棒的,唯一不足的是,导出来的HTML5 canvas文件还需要配合前端代码实现和部署,如果需要添加交互的动作也需要一定的代码基础,对不懂编程的设计师难度较大。Google的那个主要用于做HTML5动态banner,Hype是苹果员工创业做的,跟An类似。
不过An的动画制作是最精细的,原理上比较接近物理世界,以下介绍一下时间轴动画的制作和界面:
如图所示为An的动画制作页面,主要就是舞台和时间轴面板,基本的机构就是舞台>层1 层2 层3…,时间轴>层1轨迹层2轨迹层3轨迹,可以说时间轴就是整个动画最顶级的对象,所有层的动作都由时间轴控制。其中每个层的轨迹又包含四个属性:X轴位置,Y轴位置,X方向缩放,Y方向缩放。通过设置每个属性随时间轴变化的曲线,就能组合出复杂动画。
举个例子,让小球往右运动,减速至零再返回,X轴位置随时间轴变化的曲线是这样的一个抛物线,抛物线的两端是关键帧:
当然,如果是匀速向右运动,那就是一条斜线了,以此类推,配合其他属性的曲线,可以做出多种变速运动/变形动画。
2、在线可视化H5制作工具:iH5、Wix、Weebly
特点:以交互为长,可视化界面,在线编辑和发布
典型代表:iH5
动画制作: 4.0分
交互制作: 5.0分
高效易用: 3.5分
iH5综合水平比较高,产品设计的初衷就是用可视化操作替代传统的编程,在易用性和动画/交互制作上的平衡较好,属于能达到编代码效果的小白工具。Adobe虽然可以做很复杂的动画,但是对一般用户而言即使做出来也不知道怎么部署和应用,可能更适合作为H5前端开发的辅助性工具。
Wix和Weebly以PC端HTML5建站为主,类似WordPress的模板编辑模式,功能自由度低,勉强归在这一类别。
iH5属于所见即所得的做法,可视化界面操作,做出来的东西直接在线发布就可以使用,对不懂编程的设计师或普通用户而言实用性较高。
动画制作上,iH5在单个动画的结构也是时间轴>轨迹1 轨迹2 轨迹3… 的形式,跟Adobe不同的地方是:
1、iH5可以添加多个时间轴,并且不同的时间轴可以相互控制,比如让时间轴1播放到N秒时,触发时间轴2播放动画。
2、iH5不是每个位置/变形属性都设置随时间轴变化的曲线,它采取的是更傻瓜化的做法,通过设置起始关键帧的不同属性值,自动补充动画,类似于Flash的补间动画。
举个例子,让飞镖向右运动并旋转逐渐消失,需要在小球的轨迹下添加两个关键帧并设置小球的属性值:
关键帧1(时间轴=0秒)小球属性:X=0,Y=0,透明度=100%,旋转=360度
关键帧2(时间轴=3秒)小球属性:X=500,Y=0,透明度=0%,旋转=360度
这样时间轴播放的时候,飞镖就会同时变化X和透明度的值,实现向右运动并旋转消失的效果。
iH5是以交互为长,除了做H5动画以外,更有价值的是交互的制作。比如现在比较流行视差网站,交互式动画,响应式微官网,小游戏,弹幕这些,都是属于交互式H5的范畴。
3、展示类H5编辑工具:Epub360、兔展、易企秀、Maka、Prezi
特点:以信息展示为主,在线编辑
典型代表:Epub360
动画制作: 3.0分
交互制作: 2.0分
高效易用: 3.5分
Epub360相对于其他几个有更强的交互功能,不过本质上是PPT的逻辑,操作上也比其他三个工具要难些。兔展、maka、易企秀目前以满足C端或者商家的简单展示需求为主,所以产品形态比较简单。Prezi则专注于在线PPT演示。
之所以归到一类,主要是从产品逻辑上考虑,形象一点说明:易企秀到Epub360,是 1到2 的关系,而易企秀到iH5,是 1到A 的关系,第二种变化已经不属于同一体系和功能。
PPT动画其实是以动画为单元的,把元素的常见动画抽象打包,然后每个动画可以设置延迟,先后顺序,以此来实现组合式动画。基本的结构是 动效1>动效2>动效5>动效4>动效3。
举个例子,还是飞镖向右运动然后逐渐消失。需要给小球添加针对每种属性的动效,然后设置延迟和顺序:
添加向右运动的动效:持续时间=3秒,延迟=0,出现方式=上一个之后开始
添加渐隐的动效:持续时间=3秒,延迟=0,出现方式=和上一个一起开始
添加旋转的动效:持续时间=3秒,延迟=0,旋转角度=360度,出现方式=和上一个一起开始
Epub这种动画处理方式,属于顺序执行的,对于简单的动画操作会更容易上手,但如果动画相对复杂,并且涉及很多交互,则容易显出弊端,因为模块化的动效组件是没办法控制中间状态的。
比如渐隐这种动效,你只能从不透明到透明,而无法从不透明变到半透明;另外,如果动效的队列很长,各种延迟和持续时间很难计算,一旦有交互要跳转到某个页面或动画,PPT式的动画逻辑复杂度会非常高。
整体而言,这几类工具的对比如下:
如果对内容质量要求不高,以信息展示为主,并且希望快速产出,选用兔展、易企秀之类的工具更合适。
如果对内容质量要求高,涉及到动画、交互的制作,则选用iH5、Adobe之类的工具更合适。编程的话,自由度更高,但人力投入、时间成本也高。

发布者 | 2019-03-11T21:55:59+00:00 三月 11th, 2019|

关于作者

发表评论