ih5官网 iH5的10000种H5特效完全制作攻略！

什么是特效？先不说概念，先说三个活生生的例子。

①当年风靡全球的《阿凡达》，把男女主角变成了外国兽人，是一种特效；

(2)美剧《权利的游戏》中，恐龙与龙女愉快玩耍，喷火，都是特效；

(3)不管你玩不玩格斗类游戏，让人蹦蹦跳跳，灵活移动，甚至违反自然规律的物理模拟都是一种特效。

其实特效这个概念很宽泛。无论电影、电视还是游戏，需要特效的效果都可以称之为特效。H5特效怎么样？简单来说就是在网页中实现各种富有想象力的技术，比如触摸破屏、缩小图片滚动、打冰块、视差滚动等等。这部H5特效创作百科全书梳理了与H5特效相关的各种实用干货，包括制作技巧、场景应用、网站资源等。，长度较长，因此分为两个时期。

下面介绍如何利用iH5的10个特殊功能实现数万种H5特效。

注意:这部分功能支持:(请打开PC端左侧网页)。

1.吴亦凡相框破特效-克隆

吴亦凡最近被黑了，所以用碎屏特效来表达粉丝对这个偶像形象的幻灭的“苍凉”是恰如其分的。如上图，触摸相框的任何位置都会有断屏的动态效果，断屏的位置完全由触摸的位置决定。

这里用到的关键功能是克隆，是“事件”组件的一个叫做“克隆对象”的目标动作，类似于复制粘贴。一般用于复制某个素材，可以设置在哪个对象下粘贴素材，是否粘贴在鼠标当前位置。所以打破吴亦凡相框很容易！相当于每次触摸屏幕时，在被触摸的地方粘贴一张复制的碎屏图片，可以添加音效，增强场景感。[随机克隆制作逻辑]

注意:“层”用于放置克隆对象，“透明按钮”必须放置在顶层。

【类似特效】触摸屏点燃任何烟火，点击水面产生波纹，触摸屏有模拟按压效果，击打仓鼠(负责敲击的锤子)等等。

2.模仿互动视频特效-幻灯片

两天前，宝马和H5一起庆祝了100周年纪念日。特效好看！动态变化的场景，每个场景也有配音和字幕。

但如果你认为这是视频，那你就大错特错了。本质上是在连续播放画面的同时播放一系列的音频和字幕。就像一帧一帧的视频，我们似乎因为视觉停留而认为是连续的动画。

如上图，总共200 k以上的12张图片可以构成1.2秒的图片。宝马H5是程序员开发的，但在H5加载图片和模拟视频是一种创新，给H5特效带来了新的思路——在视频软件中制作特效，导出为序列帧。

用iH5模拟视频图片的播放并不难。过程如下:(1)在画布下添加幻灯片，导入一个/gif)；英文命名的图片序列；(2)设置是否自动播放，时间间隔，图片预装比例。

这是什么意思？我们可以自己捕捉自己喜欢的电影片段，保存为单独的图片序列并进行优化，然后导入H5页面，在安卓苹果上播放。但是由于和音乐、字幕的配合，对网速的要求比较高。

需要注意的是，在画布上播放幻灯片的目的是为了提高流畅度。如果直接使用，也可以通过触摸或点击滑动来手动控制序列帧的播放。

[案例交付]

3.翻页折叠特效-时间轴

把Papi酱的美照折叠起来是一个通用的时间线。它代表了音频、图片等素材在一段时间内的状态变化，经常和音轨一起使用来标记素材的不同状态。

熟悉视频编辑软件的大多数人都知道专业特效软件After Effects(AE)，其核心是音轨和关键帧，而iH5中的音轨起到了音轨和关键帧的作用。时间线开始播放，就相当于逐渐切换不同状态的素材。

那么，向左翻页是什么意思呢？假设你看页面的顶部。一开始，页面沿着书脊慢慢旋转90度。诶，纸的正面变成一条线；然后继续反向旋转90度，反面慢慢从一条线展开成一张纸。多精彩啊！时间轴的作用是控制正反两面沿着书的书脊所在的Y轴旋转，所以要先把第一页和第二页对半切，但是要记得用透明的按钮控制Y轴的位置。

[向左翻页制作逻辑]

注意:透明按钮位于页面的中心，因此沿其中心的Y轴旋转是沿子对象页面中间(右侧或左侧)的脊柱旋转。

【类似效果】打印机打印，图像碎片运动，物体惯性模拟，物体重力效果模拟，物体拉伸反弹模拟，等等。

4、触摸屏3D运动特效——滑动时间轴

上面的效果是用时间线的一个升级版来播放的——滑动时间线，向上滑动页面会播放出咖啡和咖啡豆向上抛的3D运动效果。

为什么我们看上面的咖啡豆会有立体感？其实是因为它有效的应用了人类视差的特性，在3D空之间创造出了一种立体感。在行驶的汽车上往外看，你会发现离你最近的路灯“跑”得很快，而远处的树和建筑走得很慢，这是视差的结果。

利用这种运动速度的对比，我们也可以感受到物体的距离；所以在设计上，只要距离较远的咖啡豆，在相同的时间长度下，移动距离较短，靠近距离较长。

[类似效果]

时间轴真的很有用。在轨迹上不同时间改变各种材质的属性，如位置、透明度、大小、旋转角度(X、Y轴)等。，可以通过特性的变化使材料产生不可预测的动态感觉。但是在更多的情况下，我们会使用滑动时间轴，设置滑动敏感度，跳转定点等等，从而实现更丰富的交互。

5.画面伸缩切割特效

过几天，据说历时12年完成的《大鱼海棠》就要上映了。顺便给它做个可伸缩的图。图片卷轴为什么会伸缩？它依靠一个特殊的面具让它一点一点的恢复和隐藏，结合卷轴的移动，表现出画被卷起的效果。

关键功能是切割，这是一个叫“切不切”的实物属性。使用“切”的前提是在材质下有材质作为子对象。当父对象将剪切设置为“是”时，超出父对象大小范围的子对象内容将被剪切。

如果父对象是透明按钮？这时透明按钮就变成了一个不可见的方形蒙板，控制着大鱼海棠图片卷轴的显示部分，然后用时间轴来控制透明按钮的长宽变化，这样图片卷轴中能看到的内容也会发生变化。

【类似效果】撕纸效果，各种网页的视差滚动等等。

6.神奇的照片合成器-画布

通过上面照片缩放的特殊效果，我们可以看到Apple LOGO实际上是一个不规则的蒙版(不能剪切)，与背景图像放大缩小的比例不同步。

主要使用一种神秘的工具“画布”。它的自定义遮罩功能强大，还可以将合成的内容输出成图片。当然，缩放实际上是用两条时间轴分别控制LOGO和背景。

“画布”面具的使用非常简单。画布下的原始图片有一个属性叫做蒙版:

(1)将蒙版设为其他图形(圆形、圆角矩形)，原图边缘完全由其他图形决定；

(2)当蒙版设置为其他图片时，原始图片的边缘和像素的透明度完全由其他图片的边缘和颜色决定。

比如这里的原图是iPhone SE的宣传图，其他的图都是透明背景的全白Apple LOGO，所以原图的形状像苹果，但是颜色没有变。

【类似效果】红/黄/绿/蓝/…/滤色器，圆/三角形/菱形/…相框，等等

画布最有趣的部分还没到。看看反其道而行之会怎么样！如果把原图设置成规则的纯色，那么会对其他图片进行配色(因为明暗是由其他颜色决定的)。所以如你所见，上面这一系列的图片看起来很复杂，但是只改变了Apple LOGO或者画布的颜色。

7、随机擦拭特效-绘图

抹掉托森的脸，露出泰勒斯威夫特的脸，就是随机抹掉触发事件的过程。

为什么用这两个人做例子？他们是谁？没关系。关键是要达到这种效果，这需要绘图工具——只差画布一个字，但目的却大相径庭。画图可以上传背景图片，可以用来画画或者用橡皮擦擦掉。也很好用。这里选择的是橡皮擦，线宽50(也就是笔刷大小)，擦除区域设为50%时，Toson的绘制消失。【类似特效】雾霾擦拭，免费签名，给游戏上色，等等。比如上面这张没有美感的图片，用了不到30秒的时间，用的是iH5的网页模板。有兴趣可以去玩玩。

[案例交付]

8、冰撞击效应-物理世界

在网页上，冰块和杯子是两张图片。冰块掉到杯子里怎么反弹？可能当我们习惯了手机游戏中各种适应物理规律的场景后，很容易忽略，要让这些2D场景适应3D世界并不容易。

首先，在我们的世界里，没有穿墙、拣东西空、旅行微步，因为物体受到重力、弹性等各种因素的影响。物理引擎可以模拟图片的物理属性，使图片具有真实世界中物体的重量、碰撞、反弹等特性，通常用于制作游戏。名字可能有点晦涩，但是用它来构建一个接近真实世界的世界，甚至是一个违背现实和物理规律的世界，是很好玩的。

[制作教程]

[重力感应游戏示例]

9、各种动态效果的组合

最后还有一个建议，有时候不同的动态效果稍加组合，巧妙触发，可能会有特效——甚至iH5都可以看作是设计gif的编辑器。

和Photoshop的滤镜库一样，iH5也有很多现成的动态效果，可以直接添加到素材下面，可以选择效果的出现时间、持续时间、消失时间等参数。有些看似复杂的特效，比如打印机打字，需要控制每个字的出现时间和移动状态，因为有动态效果，但实际上是操作上最简单高效的。[特效示例]从左/右/上/下淡入/淡出、向内/向外滚动、以光速进入等等。

回顾H5特效的特殊功能，包括:克隆、幻灯片放映、时间轴、滑动时间轴、剪切、画布、绘图、物理引擎和动态效果。第十种特效是什么？

其实可以和前九个功能有关，只要用了这个特效，其他特效的力量就会翻倍。下一期将聚焦于这一神奇的特效，并呈现一系列与H5特效相关的实用资源。

你能猜到是什么样的“特效”吗？