当前位置:首页 > 民俗文化

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特效相关的实用资源。

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

1.《ih5官网 iH5的10000种H5特效完全制作攻略!》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。

2.《ih5官网 iH5的10000种H5特效完全制作攻略!》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/guoji/1247874.html

上一篇

黑眼圈很重怎么办 黑眼圈太重怎么办?少熬夜多睡觉有用吗?

下一篇

中海油渤海一油田发生井喷着火事故致3人失踪 目前仍在全力搜救 到底是什么状况?

尴尬图片 你有眼福了,游泳尴尬图片大放送

  • 尴尬图片 你有眼福了,游泳尴尬图片大放送
  • 尴尬图片 你有眼福了,游泳尴尬图片大放送
  • 尴尬图片 你有眼福了,游泳尴尬图片大放送

关于针灸减肥 针灸减肥需要多长时间 至少半年

  • 关于针灸减肥 针灸减肥需要多长时间 至少半年
  • 关于针灸减肥 针灸减肥需要多长时间 至少半年
  • 关于针灸减肥 针灸减肥需要多长时间 至少半年

休斯敦时间 青团限时预售终于来了, 给休斯顿人的生活多一点甜

  • 休斯敦时间 青团限时预售终于来了, 给休斯顿人的生活多一点甜
  • 休斯敦时间 青团限时预售终于来了, 给休斯顿人的生活多一点甜
  • 休斯敦时间 青团限时预售终于来了, 给休斯顿人的生活多一点甜
北京香山公园游玩需要多长时间

北京香山公园游玩需要多长时间

建议北京香山公园的游览时间为4-5小时。象山公园慢速爬山大概需要2个小时,山顶欣赏风景大概需要1个小时。剩下的时间,也可以坐缆车,时间比较少。象山公园位于北京市海淀区象山贸易街40号。香山公园旅游的旺季是秋天。秋天从十月到十一月,香山黄栌的叶子...

全国铁路今起调图 这些城市间旅行时间大幅压缩!

全国铁路今起调图,这些城市间旅行时间大幅压缩!...

90平米5万元装修效果图 意想不到的神奇效果,90平米的二居室,现代风格只花了5万

  • 90平米5万元装修效果图 意想不到的神奇效果,90平米的二居室,现代风格只花了5万
  • 90平米5万元装修效果图 意想不到的神奇效果,90平米的二居室,现代风格只花了5万
  • 90平米5万元装修效果图 意想不到的神奇效果,90平米的二居室,现代风格只花了5万

中国战略反攻西方 中国制裁的另一重效果显现!澳大利亚惨了

在《制裁》一文中,我们介绍过中国对国外一些实体的制裁,其效果可谓立竿见影。比如英国著名律所“埃塞克斯园大律师事务所”在受到中国制裁后,立即撤销了反华声明,不少律师纷纷离职。如今,中国制裁的另一效果也有所显现,那便是澳大利亚,其国防部长、外交部长纷纷…我们知道,澳大利亚一直是反华急先锋,自去年4月开始,就一直在“新冠溯源”、“索赔中国”这些事情上疯狂表现。再往前一点,比如早在2018年8月就坚决排除...

女孩月经初潮图片 我女儿才10岁就月经初潮了,正常吗?妈妈们需要知道这些

女孩月经初潮图片 我女儿才10岁就月经初潮了,正常吗?妈妈们需要知道这些

近日,来自江苏的吴女士在网上发帖求助,“女儿才10岁就月经初潮了。正常吗?”我带她去医院检查好吗?其实完全不用担心。 根据国家卫生计生委的调查数据,女生初潮平均年龄为12.7岁,其中城市女生为12.4岁,农村女生为13岁。往前推1-2岁或者3-...