ih5语言叫html5,iH5最专业的H5制作工具

1.什么是快闪H5？

大概是在iPhone7发布时出了快闪视频的那段时间，突然兴起了快闪类型的H5。常见的形式是信息的快速轮播夹杂一些图片或者动效。

2.快闪H5常用动画效果有哪些？

适用于突出主要的信息的：比如logo，标题之类，以文字为主

色差：黑底白字 + 白底黑字

字号：大大大小 + 大大小大

屏闪：闪白 and 闪黑，适用于突出形容词或者大量同类词语的

弹幕：叽里呱啦一堆随便出现

加速：加速闪动，从1秒闪3个逐渐变成1秒7个或者更多

用于图片素材的：透明 and 半透明、不模糊 and 半模糊

还有一些类似于打字机效果、位移、XY轴的变换。这一类的最好要做出缓冲效果，像位移，如果从头到尾都是一个速度会感觉很怪异，所以位移的过程中要有缓冲的动作。

3.做一个快闪H5需要准备哪些素材？

音乐、文案、图片(可选)

最完美的是先找好音乐，梳理音乐的结构，最好是有一个基本节奏，中间再穿插一些爆发，或者渐进什么的，有急有缓的音乐，这样就相当于框架有了，再往里面填文案或者配图，也会比较简单一些。

或者是先做快闪，然后再来配音乐，这样配音乐比较难搭，而且图文配合上没有那么完美，不过比较方便，看着行就行呗。

4.做快闪H5有几种方案？

其实快闪的可实现性有很多种，常用的就是视频，用iH5做的话就是时间轴，如果不嫌麻烦的话用动效，或者幻灯片都可以。

视频的话，AE啊，或者一些视频软件都可以做，好处就是比较容易同步，效果会更炫酷一些，当然成本也会比较高，而且安卓和ios端对于视频的处理也不一样。另外我常用的就是时间轴了，相对而言操作比较简单，而且后期方便改动，不太完美的就是可能音乐和素材的加载速度不同会影响一些效果.。

5.做一个快闪H5一般需要多久？

一天左右。

下面示范用时间轴做一个简单的快闪H5

进入“我的工作台”，新建手机案例。把舞台按比例缩小到50%。因为快闪是整体效果非常重要的一种案例，所以保持看到整个舞台的状态很重要。

接下来，动手。

1

先建一个“足够长”的时间轴。至于怎样是足够长呢？算一下你需要多少素材，每个素材出现平均时长基本不超过0.5秒(担心太短的话你可以按1秒算)，所以有多少素材你就可以估计整个时间轴有多长。

2

第二步，我们来添加素材。

先在工具栏里选中“中文字体”。然后拖到舞台画出中文字体的范围(画多大，放哪里都行，反正可以在属性里再调)。

在弹出来的输入框里输入文字，顺手的话可以把对象树里的名称也改了，方便辨认。然后设置字体，大小等属性。

接下来可以把调好的这个中文字体复制再粘贴在时间轴下，粘贴多个，然后逐个修改文字和重命名。

小技巧：修改文字时可以让其他文字都隐藏(不勾选)，这样就不会造成视觉上的影响。

3

全都是白底黑字就很无聊了，我们来加入一点黑底白字做对比。这时候就要用到透明按钮做背景。

在工具栏选中透明按钮，到舞台上画出大小和位置。再设置透明按钮的属性如图。

再把透明移到对象树对应的位置，然后把想要黑底白字显示的中文字体剪切再粘贴到透明按钮下，成为透明按钮的子对象。记得要把中文字体的颜色改成白色哦。

4

好啦，素材部分已经基本了，接下来我们来加动画。

在第一个中文字体下添加一个轨迹。

轨迹属性修改，记得将“开始显示”和“结束显示”都选为no。然后在大约0.4s的位置添加第一个关键帧。

再在约0.8s的位置添加第二个关键帧(时间可以根据各人喜好自行决定)。

这时候播放一下你的时间轴，你会发现“小伍”的字样一闪而过。

没错，接下来又是复制粘贴的事了，把你刚做好的轨迹复制到各个素材下吧(如果是透明按钮就只加到透明按钮下就可以了)。

然后把各个素材的关键帧按顺序往后挪，只要保证前一个素材消失后后一个素材才出现就可以了，这时候你的时间轴是这样的。

到这里，前半段的动画效果都完成了。

5

不过只有这么简单动画怎么能满足你们呢？所以，小伍又加了一个简单的弹幕效果。

大概就是这样一张简单的图。我们只需要让上面的文字像弹幕一样动起来。

怎么做呢？先看对象树。

然后全部加轨迹。

可以看出，每句话的轨迹都只有两个关键帧，也就是说，只是从一个状态变到了另一个状态。我们来看其中一句话的属性变化。

所以每句话的效果都是在舞台上从左往右的飞过。只是我们要控制让他们的轨迹长度不一样，这样他们飞过的时间和速度都会有差异，就有“弹幕”的感觉啦。

6

最后，我们来看时间轴的设置。

可以看出，他们是在同一时间开始，只是结束时间不一样。这里的结束时间是小伍随机调的，就不给数据了，你们看着办，调到满意为止吧。

这里有点要注意的是，透明按钮作为父对象，一旦透明按钮的轨迹结束(不显示)，以下子对象的动画会全都不显示，所以无论下面的子对象轨迹时间设置了多长，透明按钮的轨迹长度决定了这段动画的时长。

到这里，主要的两个部分已经完成啦，更多的细节大家可以按自己喜好去补充哈。

大家可以扫码看看案例完成之后的效果。

更多教程，可以关注公众号查看。