澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

还怕没灵感,H伍玩的方法知多少

H5 玩法知多少

2017/09/01 · HTML5 · 1 评论 · H5

原文出处: 大熊   

html5的发布让移动端web增添了很多新的能力,这些能力给我们带来了很多新的玩法,不知你知道了多少呢?下面我将结合案例罗列一些自H5发布以来出现的新玩法,给大家温故而知新。本文也适合大家在策划H5活动的时候作为参考,说不定在这儿就找到灵感了。

构思H5的玩法该从何入手呢?网上的H5五花八门,其玩法大多都可以归纳到基于传感器、基于触摸屏操作、基于画面呈现、基于内容这四类来考虑。它们既有基于其中一类来构思玩法,又有将多个类别组合起来创造更复杂丰富的玩法。与H5新能力相关的是前三种类型,本文也会从这三种类型进行展开,分别介绍一下各类型下有什么玩法,而基于内容的玩法主要是图文混排展示内容,答题类游戏等与内容强相关的玩法,实际上他们也会多多少少与另外三类搭上点关系的。

接下来你将会看到这些玩法:

基于传感器:

类别 玩法或适用场景
陀螺仪、重力感应 体感游戏、摇一摇、全景图/AR转换角度、转动手机制造视差效果
地理位置 提供周边生活服务、与运动结合、上班打卡功能、外勤人员的工作监控、类似QQ的AR红包和pokemon go玩法、展示附近的优惠和广告
人脸识别 体感游戏、将用户样貌与节日/游戏/电影等主题元素相结合进行宣传的场景、用户样貌与明星脸相似度测试、猜用户年龄、猜情绪、模拟化妆
webRTC 视频会议、视频聊天、在线教育、在线问诊等视频/音频通讯的场景

基于触摸屏操作:

类别 玩法或适用场景
全景交互 虚拟全景展示、身临其境的实景展示或活动现场展示、商品360度展示
多屏互动 朋友间合作/竞技游戏、你画我猜、一问一答、情侣互动、多个屏幕拼起来看视频、投屏应用、线下现场观众互动
单屏滚动 公司主页、产品介绍、报告总结、邀请函等展示类场景
手势操作 商品图片放大查看场景、图片拖拽/旋转等编辑场景、手势解锁、拼图游戏

基于画面呈现:

类别 玩法或适用场景
视频/动画展示 产品、节日、游戏、电影等宣传场景;内容比较丰富的场景
图片裁剪和形变 类似变形金刚、七巧板形式的图片转换效果展示场景

 

如果以场景为维度来展开推荐玩法,则可参考下图所示:

图片 1图片 2

接着我会逐一介绍一下这些玩法,读者也可以直接跳到感兴趣的部分去阅读。除上表外还有一些目前还不太能用的H5能力,如手机震动、光线传感器、距离传感器等,由于边幅原因,暂不作展开介绍,读者可以自行查找相关资料。部分案例如没有贴上二维码,是因为该案例已下线了。

图片 3

Html5从2014年底的初露锋芒到2015年的全面火爆,再到2016的沉淀,2017年,H5依然是品牌Social传播的首选。因为是一种新技术,很多策划的朋友往往不知道怎么策划,或者或不知道天马行空的想法能不能实现,所以在策划的时候,每有一个想法都在咨询下技术人员,没有技术人员的,就需要供应商提供技术咨询服务了,但是这样的策划周期就有点痛苦了。还是那句话,“夫源远自流长,根深者叶茂”。一个好的策划人员(运营人员、设计师,这个视不同公司,岗位不同),若要做一个优秀的创意方案,必须得了解自html5发布以来的新玩法。本文也适合做大家在策划H5活动的必备参考文档,想灵感的时候翻来看看。

腾讯移动游戏官网设计欣赏与技术总结

来自 游戏葡萄 2014-05-05 深度

最近用SceneKit做了全景看房的功能,现总结下如何实现的。先看下最终的效果:

基于传感器

这类玩法依靠手机上的传感器实现,这些传感器有陀螺仪、gps、摄像头、麦克风、震动传感器、光线传感器、距离传感器等。大家在设计玩法的时候,要结合业务本身选用相关的合适的传感器,不要随意搭配或随意叠加多个传感器,避免画蛇添足。例如做周边生活类的需求,就应该选用gps传感器获取地理位置,做全景图的需求就选用陀螺仪来提供便捷的交互。

 

html5的发布让移动端web增添了很多新的能力,这些能力给我们带来了很多新的玩法,不知你知道了多少呢?下面我将结合案例罗列一些自H5发布以来出现的新玩法,给大家温故而知新。本文也适合大家在策划H5活动的时候作为参考,说不定在这儿就找到灵感了。

小九对2000个H5案例深入剖析之后,归纳总结,其玩法无外乎4类:基于传感器、基于触摸屏操作、基于画面呈现、基于内容。4类之中可再分小类,实际使用中可以只用一种,也可以多个类别穿插起来使用,这个看天赋了,招式有了,实战中又可以有诸多变化的。前三种类型是基础,本文也会从这三种类型进行展开,分别介绍一下各类型下有什么玩法,而基于内容的玩法主要是图文混排展示内容,答题类游戏等与内容强相关的玩法,实际上他们也会多多少少与另外三类搭上点关系的。

[ 游戏葡萄原创专稿,未经允许请勿转载 ]

图片 4

腾讯TGideas以TGA移动游戏官网、UP 邀请函、天天酷跑里约进击版官网为例,总结了手游官网开发的经验。

目录

一、硬件背景

二、项目欣赏

1、TGA移动游戏官网

2、UP 邀请函

3、天天酷跑里约进击版

三、技术创意点

1、CSS3动画

2、Sprite动画

3、重力感应 视差

4、字体图标

5、自适应SVG图形

6、Loading进度条

7、单屏滑动

8、游戏

9、地理定位

10、音频使用

11、手机重度新官网

一、硬件背景

易观智库的一个报告指出,2013年中国移动互联网网民规模达6.52亿,其中70.1%的用户使用安卓手机,26.1%的用户使用苹果手机。高收入网民中,有一半以上都是用IOS系统,这个比重在低收入群体中只占17.71%。中低收入网民多使用安卓系统的手机,占比分别为66.67%和76.09%。

图片 5

图片 6

先提出中国移动互联网网民结构是为了让大家在开始项目构思的时候,就要清楚面对的群体是什么,在项目的进展中遇到问题时,结合时间和效果,能够有所抉择。这个问题很重要,就像我们在PC网页提出并且已经被广泛接受的“优雅降级”原则:在Google Chrome、Firefox、Safari、QQ浏览器极速模式等浏览器下,利用新技术(HTML5、CSS3、Javascript等)给用户创造更多新鲜的体验。但是IE6、IE7、老系统下的QQ浏览器兼容模式等浏览器,就只能查看到普通的没特效的网页。

这个问题在移动端的展现只有过之而无不及。如果说IE6是PC浏览器的蛀虫,那安卓低端机就是手机浏览器的蛀虫。安卓手机配置和系统可谓千千万种,CPU跟网页展示效果卡不卡息息相关,安卓系统版本跟网页基础呈现也息息相关(例如安卓2.0不兼容CSS3的圆角属性border-radius等)。(CPU中文意思是处理器,手机反应快慢,卡不卡,都跟CPU息息相关。现在市面上低端机定义是CPU频率800M以下,800M至1.5G属于中端机,高端机就是双核1G以上的手机。)

在理解这个问题的前提下,进行手机移动网页构思及重构的时候,就会有针对性的进行取舍,使得项目得到最大化的效率。

下面将会以我们近期制作的比较出色的手机专题网页作为案例,来告诉亲爱的大家,我们前端能做什么,希望可以对今后的创意参考有所帮助。

二、项目欣赏

1、TGA移动游戏官网

图片 7

TGA城市拉力赛

图片 8

2、UP 邀请函

图片 9

3、天天酷跑里约进击版

图片 10

三、技术创意点

一般在制作强交互、多动画效果的网页前,建议产品、设计、前端一起开会探讨实现细节。同时要求设计师有很良好的手机网页设计习惯和一定思路的展现效果,以及要求产品有很大的包容心、懂得取舍。

1、技术点:CSS3动画

适用范围:相互联系又相互独立的元素

设备要求:中高端手机

会发现UP 邀请函里用的最多的就是动画效果了,其实都是用CSS3写成的。CSS3动画可以理解为一个元素的a状态,让它以逐帧展示的方式变成b状态。基本的变形有scale、translate、rotate、skew等,再加上color、opacity等,利用transition和animation加上延时效果,动画就出来了。听着晕吧?看看下面的例子。

①独立元素间的互动

图片 11

这块动画并不是前期就想好的。在制作过程中,发现每页的元素进入动画都差不多,这样用户容易感觉无聊而没有兴趣往下翻页。为了增加末页的触达率,需要每翻一页都给用户带来一个信息:下面的内容会不一样的哦,请继续往下翻。

“我是玩家”这一屏的小元素都跟游戏有关系,英雄联盟的Q版盖伦,游戏玩家必备手柄,让他们互动起来。手柄按常规方式进场(旋转 缩放 透明度),盖伦也按照常规方式进场,但是让盖伦的位移轨迹跟手柄有少许重叠,就造成两者相撞的效果。手柄被撞需要有反馈,就被弹开了一下。

②单元素自我呈现

图片 12

看到这一屏设计稿的时候,真的不知道从何下手,常规动画效果上面的页面都使用了,这屏的元素还不多,如何不无聊?初期的想法是让小三角从圆里蹦出来(缩放 位移 透明度),跟首屏呼应。可是只有一个小元素蹦出来,略显单薄。换了个方向思考,小三角可以自我呈现啊。利用它的形状和方向,模仿风筝或者飞机的动效,给予一个非直线运动轨迹,最终呈现效果就出来了(缩放 位移 旋转 透明度)。

③ 3D变换

图片 13

这个在最开始讨论的时候产品就说了需要有门被打开的动效。实现方法很多,最常规的是利用图片帧的方式,多张不同状态的门的图片进行切换,造成门在逐渐打开的效果。优点是能制作各种动效,缺点是增加图片的数量,对页面加载速度造成压力(更多可以查看下面的sprite动画介绍)。好在这扇门是一个纯色矩形色块,可以利用CSS3的3D变换,做成门往里面打开的效果。如下图右一的rotateY,把旋转的中心线定为门的左侧即可。

图片 14

CSS3的变换属性不算多,但是把不一样的参数结合起来,就成了不一样的展现效果。如果大家在开始项目前都有这么些概念和认识,也许不需要前端参与前期讨论都可以很顺的把流程走下来,提升效率。

2、技术点:Sprite动画

适用范围:单独形象有多帧动画

设备要求:无

Sprite动画的想法来自传统的动画行业,多张图在一定时间内切换,形成视觉上的动态效果。Sprite动画特别适合多细节的逐帧动画展示,但是对图片的要求很高,需要先生成每帧的图片,如下图。这张图片压缩之后都还有119K大小,成本是很高的。

图片 15

本来酷跑里约版几乎每页的小角色都有sprite动画的,文件加起来有1.5M。在PC网页里,几M都是可理解的,但在手机,几百K都已经是致命的了。所以在上线第二天,紧急处理网页,只留下审判女王的动画,访问延时从16秒直线下降到6秒。所以如果想在项目里应用sprite动画,需要仔细斟酌。

图片 16

3、技术点:重力感应视差

适用范围:相互独立的元素

设备要求:中高端手机

PC端的网页视差展现靠鼠标动作,手机端的网页视差展现可以依靠设备特性——重力感应。当手机的水平方向改变时,网页内给予重力感应的元素就会跟着改变位置,并且依据赋值的深度的不一样,位移速度也不一样,这样就能造成视差的效果。在用户发现网页跟自己有互动时,好感度会立增。

除了在展示性网页使用重力感应做成视差效果之外,还可以利用它来制作小游戏,增强互动。例如最出名的重力感应球游戏。

图片 17

4、技术点:字体图标

适用范围:纯色矢量图

设备要求:中高端手机

字体有一个非常好的特性,可以容易设置颜色大小或者变形,而CSS3的@font-face就是为了结合字体和图标而生的。以邀请函为例,把页面上所有纯色矢量图转化为字体文件之后,节省97.37%的带宽,这对手机网页加载是非常大的一个帮助。但是对生成字体的图标的要求是,只能包含一个颜色,且为矢量图。所以在呈现风格和文件大小之间的取舍,根据项目而定。

图片 18

5、技术点:自适应SVG图形

适用范围:基础图形

设备要求:中高端手机

邀请函那条贯穿8个页面的折线是使用SVG画出来的,优点是可以根据屏幕进行自适应匹配,且大小能比切成png24的图片节省98%的带宽。缺点是自适应的图形之间比较难定位。例如iPhone4s竖屏的情况下折线的角度为60°,横屏的情况下折线的角度为25°,贯穿的位置可见不一致。但是线条上面还放着其他元素,或者还有其他文字依据它来定位,这样就出现问题了。所以我们的处理是选择一定的屏幕大小进行细微优化,但是从概念上就放弃“线条必须从元素正中间贯穿过去”的想法,这只是一种硬解决办法。

手机上SVG可以制作出很多图形、线条的组合体,但是也需要产品阶段就清晰哪些能做,哪些能舍弃,然后找出一个最适合的解决办法。就像邀请函,选择做折线,就放弃一定设备的元素定位问题。如果选择元素定位第一,则需要更换贯穿线条的设计。(其实我不是很建议用贯穿线条的想法,难实现。)

图片 19

图片 20

6、技术点:Loading进度条

适用范围:比较大的页面

设备要求:无

据 Compuware 的调查,用户在使用手机时,如果遇到加载超过5秒的手机网站,74%的用户会选择离开。即便用户对手机应用相对有耐心,也只有50%的用户会容忍加载超过5秒。之前内部的一项网速测试算出访问我们专题的手机平均网速只有70K/s,如果容忍时间是5秒的话,我们的网页加起来需要控制在350K以内,但有时候内容多了图片大了加载时间想控制都没办法。有一个可以称呼为时间小偷的办法,就是给网页增加loading进度条。loading需要有动画来分散用户注意力,简单的动画可以为网页争取多5秒的时间,复杂的动画则可以争取更多时间。在loading的时候就先把前几屏的图片加载上,跳转到网页后就可以直接呈现出来了。这种方式比让用户在空白首页干等体验更好。美国研究生项目资讯网站上有五分之一的人承认曾经对“怠慢”自己的人发火,loading就是告诉我们的用户,我们在为他们着想,希望给他们更好的体验。

图片 21

7、技术点:单屏滑动显示

适用范围:内容或者色块有明显区分的

设备要求:无

PC网页一般是直接垂直平铺内容的,取决于鼠标和键盘的操作方式。不推荐内容横向平铺,不方便查看,也不符合用户使用习惯,除非有对鼠标、键盘操作进行相应的设置修改,制作成本比较高。手机网页的出现却打破了这种僵局,竖向滑动横向滑动,对手机用户来说都是非常习惯的操作了。但是必须引入单屏滑动的概念,一滑一屏。竖向的可测试UP邀请函,横向的可测试TGA官网。单屏滑动要求每屏内容不可过多,有合理的布局安排,如果内容多且要求连贯性,则不适合。像邀请函这样内容不多,每块的颜色也有明显区分的设计,用单屏滑动更能凸显品质。

8、技术点:游戏

适用范围:结合产品特性给用户带来强交互体验

设备要求:中高端手机

手机网页因为设备特性可以创造出很多特别的小游戏,如刮刮乐、吹蜡烛、跟手3D图像(sprite动画 手势)、接金币(CSS3动画 Javascript 手势)等。这些小游戏不仅可以增强产品和用户间的互动,还可以展示大公司的技术研究,带来好的市场口碑,可谓一箭多雕。但也有缺点:开发时间长,对设备要求也比较高。例如TGA官网前的接金币小游戏,搭框架需要10天左右的时间。

对于游戏这一块,也是我们TGideas网站重构三组在努力探索的方向,相信以后可以给大家带来更好更快的小游戏,请关注后期的手机网页小游戏探索。

9、技术点:地理定位

适用范围:需要结合地理位置不同展现的网页

设备要求:无

功能跟地理位置息息相关的应用例如大众点评、地图、滴滴打车等,都会先获取用户的位置再进行匹配性内容展示,网页里有时候也可以利用这个功能。例如TGA的城市拉力赛里就应用了地理定位,帮用户快速定位到所在城市,而不需要进行手动选择,立即给自己的城市加油。

图片 22

10、技术点:音频使用

适用范围:有特殊体验要求的

设备要求:中高端手机

声音可以给用户带来更多新鲜体验。PC网页对于声音的应用比较局限是因为台式机需要有耳机或者音响的辅助,手机网页则很容易用声音来吸引用户注意。但是音频压缩大小和质量还有待研究。TGA城市拉力赛里应用了音频作为用户的惊喜体验,期待得到的反馈。

图片 23

11、手机强互动形式新官网(上述多个技术点的综合应用)

适用范围:每屏内容适中,增加少许动效提升品质

设备要求:无

官网并不是只能规矩罗列平铺直叙的。模块和模块之间可以使用单屏滑动来衔接,模块内容比较多的情况可以横向滑动延伸。初次进入官网,首屏内的元素利用CSS3动画制作酷炫效果,官网不再单调!

上面介绍的都只是手机互动网页的冰山一角,更多的还需要产品 设计 前端一起去探索和研究,掌握了基础的知识点之后,相互组合迸发出的新事物,就是我们用心创造快乐的结果了。

图片 24gif1.gif

陀螺仪、重力感应

这类交互在体感游戏中比较常见,如控制射箭的方向、挥剑、打乒乓球等,而在H5中则可用于摇一摇、控制赛车左右前进、检查手机是否平躺/竖直、全景图/AR转换角度等,也可以用于制造视差效果(如王者荣耀的登录界面),使画面富有层次感。

案例:

降温摇可乐:

该H5在模拟摇可乐的情景,玩家需要不停地摇动手机,尽快使可乐喷出来。个人认为可以换另一种玩法,让朋友互相传递手机摇,谁摇爆了可乐就算输。

图片 25图片 26

来玩点耐心吧:

这是腾讯互动娱乐2017年度发布会的预热H5,提倡用户做事要多点耐心,因而玩法是耐心地竖立手机,看着一幅漂亮繁复的画慢慢地画完。

图片 27图片 28

图片 29图片 30

图片 31

图片 32

一“陆”狂飙,极速挑战:

该H5与速度与激情8联动,先播放一段在朋友圈上飚车的视频,然后开始赛车游戏,通过左右倾侧手机来控制赛车左右前进、躲避障碍,最后根据行使的距离进行排名和抽奖。

图片 33

图片 34

天猫:地球上的另一个你

该H5同时播放代表理想与现实的两个视频,利用重力感应来切换看到的画面,向上转动手机模拟抬头看到理想的画面,向下转动手机模拟低头看到现实的画面,也可以转到一半的位置同时看两个视频同时播放,比较有新意,也较好表达出理想和现实之间的对比。

图片 35

图片 36

 

构思H5的玩法该从何入手呢?网上的H5五花八门,其玩法大多都可以归纳到基于传感器、基于触摸屏操作、基于画面呈现、基于内容这四类来考虑。它们既有基于其中一类来构思玩法,又有将多个类别组合起来创造更复杂丰富的玩法。与H5新能力相关的是前三种类型,本文也会从这三种类型进行展开,分别介绍一下各类型下有什么玩法,而基于内容的玩法主要是图文混排展示内容,答题类游戏等与内容强相关的玩法,实际上他们也会多多少少与另外三类搭上点关系的。

先给大家看看整体的纲要:

  • 360度
  • 手势滑动,缩放
  • 陀螺仪
  • 分屏
  • 热点hotpot
  • 头控/eyepick

地理位置

这类H5结合用户所处的位置,可以提供比较方便的周边生活服务,如查找附近的摩拜单车、获取附近的餐饮信息和前往路线;也可以与运动结合,如记录用户的跑步轨迹。如果用于办公,则可以做上班打卡功能、外勤人员的工作监控等。如果用于游戏,则可以创造出类似pokemon go的玩法,在用户的位置附近散落奖品,让用户走到目的地收集奖励。

案例:

杜蕾斯全民抓喜鹊:

该游戏H5类似pokemon go,在地图上散落各种喜鹊,用户需走到散落点附近,将喜鹊划入篮圈内,然后点击捕获,捕获够一定数量就可以兑换奖品。

图片 37

 

接下来你将会看到这些玩法:

基于传感器:

手势滑动,缩放,陀螺仪功能都是调节球面图片显示的位置;热点和头控功能本质是一样的,都是在原有模型上增加3维的视图。它们用途不一样,头控功能(全景图片一般就是eyepick功能)一般是戴VR眼镜后,通过模型的位置触发控制事件。展示全景图的原理很简单:将图片渲染至球体模型内表面上,手机处于球体中心,当旋转手机的时候,球体向相反的方向旋转,这样我们就可以看到球体上的画面了。

人脸识别

顾名思义,就是用人脸和H5进行互动,玩法有根据人脸猜测年龄、猜情绪,测试与明星脸的匹配度,将人脸和游戏电影人物相结合,将人脸变成小时候的样子,根据人脸的动作做出反馈(如张嘴时从嘴里飞出企鹅、眨眼睛拍照)等,通常跟AR和图片合成技术搭配使用。这类方式比较适合用于游戏电影宣传、个性化用户样貌、图片类产品推广的场景。合成的图片可以在边角加上活动二维码,使得其他用户看到这张图片时也可以参与活动。

相关技术主要是人脸识别和人脸动作捕捉的技术,腾讯有提供优图识别技术,微软也有提供人脸识别技术。

案例:

腾讯:我的魔兽我主演

这个H5将人脸和魔兽电影相结合。用户上传自己的照片,选择喜欢的模板和添加一些刀疤之类的装饰后,就可以生成一张用自己脸制作出来的的魔兽海报了。

图片 38

图片 39

我的小学生证件照:

用户上传照片生成小学生证件照,并可以通过”换基因“换一下生成的样子。

图片 40

图片 41

QQ钱包三周年活动之扫脸获红包:

用户在活动页张大嘴巴说”FUN开付“后,会有企鹅从嘴里探出来跳舞,然后发红包给用户。

图片 42

图片 43

还怕没灵感,H伍玩的方法知多少。 

基于传感器:

基于触摸屏操作:

图片 44

webRTC

webRTC是H5的一个新特性,它可以在web上访问摄像头和麦克风,进行视频和音频的实时通讯,用途有视频会议、视频聊天、在线教育、在线问诊等,以前只能客户端才能实现的视频类应用也可以应用到web上了。兼容性方面,移动端浏览器的支持程度很差,安卓5.x以上的chrome才支持,而ios直至safari11发布才终于得到了支持,但这个发展表明web端也逐渐具备这个能力了,我们可以预先想想这方面的策划,说不定不久的将来就能用上了。

案例:

Chatroulette:

这是一个随机视频聊天网页,你可以随机和地球上的陌生人视频聊天,一般遇到的都是外国人,我也是从这个网页第一次真实地感受到真的有外国人的存在。可惜现在不能访问了。

图片 45

 

类别 玩法或适用场景
陀螺仪、重力感应 体感游戏、摇一摇、全景图/AR转换角度、转动手机制造视差效果
地理位置 提供周边生活服务、与运动结合、上班打卡功能、外勤人员的工作监控、类似QQ的AR红包和pokemon go玩法、展示附近的优惠和广告
人脸识别 体感游戏、将用户样貌与节日/游戏/电影等主题元素相结合进行宣传的场景、用户样貌与明星脸相似度测试、猜用户年龄、猜情绪、模拟化妆
webRTC 视频会议、视频聊天、在线教育、在线问诊等视频/音频通讯的场景

基于画面呈现:

这需要使用openGL这个框架,openGL渲染球体图片步骤大致如下:

基于触摸屏操作:

除了利用传感器创造特别的玩法外,在触摸屏上的操作也有多种玩法,如单屏滚动、手势操作、全景交互及多屏互动。在触摸屏上的操作要符合用户的正常习惯,例如滑动屏幕可以翻页、移动场景,双指拉开表示放大操作。如果预料到用户可能不清楚如何操作,则需要提供操作示范。此外,可操作区域也要弄大些,方便用户操作,例如当前画面只是操作一只猫爪上下移动,那么除了可以在猫爪上滑动外,在其他空白区域上下滑动也应该可以让猫爪上下移动。

 

还怕没灵感,H伍玩的方法知多少。基于触摸屏操作:

  1. 生成顶点数据,也就是球面上点坐标数据。顶点越多生成的球体越平滑,但也有极限,当顶点大于一定值的时候再多的顶点也看不出差别来反而会影响性能。

单屏滚动

这是一种很常见的交互形式。如幻灯片一样,网页上的每一页内容都是占满全屏的。当用户滑动屏幕翻下一页后,当前整个屏幕的内容都会翻走,然后再展示下一页全屏的内容。翻屏时可以加上一些转换的动画,如渐入渐出,使得翻页效果生动不单调,也可以加上重力感应,让手机在转动时产生视差效果。单屏滚动的应用场景比较广泛,很多主页、产品介绍、报告总结、邀请函都应用了这种形式。

案例:

腾讯互娱发布会邀请函:

邀请函采取单屏滚动的形式展示,同时利用重力感应,转动手机时会看到页面上的装饰图片也会跟着移动,制造视差,增添了乐趣。

图片 46

图片 47

图片 48

王者荣耀S7赛季总结:

该游戏总结报告也使用了单屏滚动的方式,展示了用户在该赛季各方面的成绩,如获得星数、本命英雄、给力搭档等。翻页时酷炫的动画效果使得这份报告更加生动有趣。该报告亦使用了重力感应,摆动手机时页内元素也会跟着摆动。

图片 49

图片 50

图片 51

 

类别 玩法或适用场景
全景交互 虚拟全景展示、身临其境的实景展示或活动现场展示、商品360度展示
多屏互动 朋友间合作/竞技游戏、你画我猜、一问一答、情侣互动、多个屏幕拼起来看视频、投屏应用、线下现场观众互动
单屏滚动 公司主页、产品介绍、报告总结、邀请函等展示类场景
手势操作 商品图片放大查看场景、图片拖拽/旋转等编辑场景、手势解锁、拼图游戏
陀螺仪、重力感应 体感游戏、摇一摇、全景图/AR转换角度、转动手机制造视差效果

如果以场景为维度来展开推荐玩法,则可参考下图所示:

图片 52顶点数据

手势操作

我们和屏幕交互,除了有点击、滑动外,还有很多手势操作,如拖拽、双指拉开放大、双指画圈旋转物体,画图形表示某个动作等。手势操作可用于放大查看图片、对图片进行拖拽/放大/旋转等编辑、手势解锁、也可以用于游戏上,如拼图游戏时拖拽、旋转拼图碎片。

在实现上,H5有一个手势操作库hammer.js,可以实现常用的手势操作。

图片 53

 

基于画面呈现:

读者也可以直接跳到感兴趣的部分去阅读。此外如手机震动、光线传感器(探测环境光照强度,决定是否开启键盘灯及屏幕背光)、距离传感器(拥有距离感应器的手机在小九们拨打电话以后将听筒放在脸上的时候屏幕就黑了)等,这些功能不常用,暂不作展开介绍,读者可以自行查找相关资料。

  1. 生成纹理数据,也就是图片的颜色缓存数据。
  2. 着色器将颜色数据渲染至顶点上。

基于画面呈现:

这类玩法一般就是展现一段比较酷炫有趣的画面内容,如视频、动画、特效,给用户带来视觉上的感官享受,用户也可以通过与画面内容互动,看自己想看的内容。

 

类别 玩法或适用场景
视频/动画展示 产品、节日、游戏、电影等宣传场景;内容比较丰富的场景
图片裁剪和形变 类似变形金刚、七巧板形式的图片转换效果展示场景

基于传感器

  • MD360Player4iOS:支持全景图片/视频,有分屏/陀螺仪/手势移动功能,但没有热点及头控功能;

  • Panorama:只支持全景图片,比较轻量。也只有分屏/陀螺仪/手势功能;

  • PanoramaGL:只支持全景图片,具有陀螺仪/手势/热点功能,但这个库比较久远仍是MRC,没人维护;

  • 得图SDK:支持全景图片/视频,也只有分屏/陀螺仪/手势移动功能

视频/动画展示

这类H5会播放一段时间较长但有趣生动的视频或动画来吸引用户关注其宣传内容。由于视频内容比较生动酷炫有趣味,以及常常有明星参与演出,用户一般不会太抗拒这样的广告,反而会喜欢点赞,甚至主动向朋友分享。有很多刷屏H5都是这个类型的,例如薛之谦XQQ动漫、韩寒X使命召唤等。这个玩法适合用于产品、节日、游戏、电影等宣传场景及叙述内容比较多的场景。

这个玩法的主要制作方式有:

1、视频。这种方式需要前期拍摄、后期使用专门的视频软件(如AE)制作,能制作出很炫的效果,但成本较高,用户通常只能被动地观看完整段视频。

2、使用canvas制作,这种方式可以制作出像以前的flash一样的动画,效果没视频酷炫,但这类动画既可以看,又可以在播放途中自然地添加交互,相关组件有createjs、egret等。

3、使用H5 css3制作,这种方式也能像方式2一样制作出动画,但制作难度和复杂度都比方式2大,而且也有可能带来性能问题。

案例:

薛之谦XQQ动漫:

这支H5找来薛之谦拍视频,讲关于腾讯动漫作品的段子。视频内容十分有趣,成为了当时的现象级刷屏H5。

图片 54

图片 55

生命之下,想象之上——2015年腾讯互动娱乐发布会品牌H5:

这支H5使用createjs制作,以卡通动画的方式展示了男孩探寻想象力的旅程。动画分段播放,用户可以体会完每段动画的思想后,再点击继续播放下一段动画。

图片 56

图片 57

这是成年人不敢打开的童年:

这个H5动画属于一镜到底式的动画,用户一边滑动屏幕,动画一边顺序播放,而往相反方向滑动则会让动画倒序播放,滑动的速度会影响动画播放的速度,感觉就像是一边抽卷筒厕纸一边看到厕纸上画的逐格漫画一样。

图片 58

费玉清唱诛仙主题曲:

这个视频h5最大的特色是观看过程中长按按钮时会换了另一种魔性的画风,让用户不再只是被动地观看视频,而是通过操作发掘到更多有趣的内容,增强了用户的参与感和吸引力。

图片 59

图片 60

 

如果以场景为维度来展开推荐玩法,则可参考下图所示:

手机上的传感器有陀螺仪、GPS、摄像头、麦克风、震动传感器、光线传感器、距离传感器等。现在智能手机普及率很高,可以放心设计玩法,但要注意结合业务本身选用相关的合适的传感器,不要随意搭配或随意叠加多个传感器,避免画蛇添足。例如做位置相关的,就选用GPS,做VR的需求就选用陀螺仪。

现在主流的和全景图片有关的三方库,基本上都没有热点及头控功能;之前有试过在MD360Player4iOS基础上增加这两个功能,但因为自己openGL零基础后来还是暂时放弃了。后来发现系统SceneKit框架也可以实现以上所有功能,使用起来也非常简单。接下来我们来了解下SceneKit,看如何实现全景播放功能。

全景交互

全景交互指将用户置于一个360度环绕的图片/视频环境下进行沉浸式的体验,用户可以通过转动手机或滑动屏幕来看这个环境里不同角度的内容并进行交互。如果将内容分成左右两个屏,带上VR眼镜,则可以进行VR体验。此玩法比较适合的场景有虚拟全景展示、身临其境的实景展示或活动现场展示。与此类似的还有商品的360度展示,用户拖动商品即可看到不同角度下商品的样子。

相关技术主要是3d旋转操作、陀螺仪方面的技术,全景图插件有造物节使用的css3d-engine ,全景视频组件有 Valiant360,还有一些收费组件如krpano。

案例:

小爷吴亦凡,凡心所向:

之前很火的吴亦凡打篮球全景视频H5,通过旋转手机看他风骚地带球,镜头对着他代表正在防守他,结束后游戏会算出玩家的防守有效率。

图片 61

图片 62

vivo-我们i音乐:

类似造物节的案例,用户在一个360度的虚拟空间里拖动画面和旋转手机看各角度下的样子,并可点击里面的物品进行互动。

图片 63

深圳欢乐谷实景地图:

在这个地图里,游客可以从高处欣赏欢乐谷的风景,切换各区域寻找游玩设施的位置,还可以发表评论留下足迹。该地图除了可以滑动、转动手机来浏览地图,还支持VR模式,将区域切换按钮移动到屏幕中间的锚点上一会儿便可切换游玩区域。

图片 64

图片 65

 

图片 66

陀螺仪和重力感应在体感H5中用的比较多,比如打篮球、打网球,举哑铃、控制风车转动、检查手机是否平躺/竖直、全景图/AR转换角度,举哑铃就是一个简单直接有效的健康类H5活动创意。很多人分不清陀螺仪和重力感应区别是什么,小九简单的说明下,陀螺仪是可以追踪手机在XYZ三维空间的运动,而重力感应呢,你本来把手机拿在手里是竖着的,你将它转90度,横过来,它的页面就跟随你的重心自动反应过来。假如你想用手机控制星战中的激光剑的挥动,那就一定要用到陀螺仪。

(全景视频播放器需使用SpriteKit,这里主要先介绍图片播放器,之后再讲视频播放器)SceneKit是什么?

多屏互动

多屏互动指在多个屏幕上体验活动,各自的操作会同时反应到其他屏幕上,一般以双屏互动为主。玩法有多人合作完成任务/互相竞技、你画我猜、一问一答、情侣互动小游戏、线下与现场观众互动、多个屏幕拼起来看视频等,也可以把手机屏幕当成控制器,用大屏幕来显示,例子有手机遥控器、谷歌的多人竞跑游戏。制作此类活动时,要注意兼顾好只有单人玩时的情况,此时可以将体验流程简单化,或者加上电脑一起参与。

相关技术主要是通过websocket或轮询接口进行同步通信和更新画面的内容。

案例:

CF手游&品客组队大战僵尸:

这个游戏是用手榴弹炸僵尸,既可单人玩,也可双人玩,双人玩的时候一人负责装薯片弹药,一人负责扔手榴弹。

图片 67

图片 68

奔驰抢车拔河:

2人拼手速点击屏幕,将奔驰拉到自己那边为赢。

图片 69

图片 70

爱9就在一起:

一个关于爱情的视频,需要使用2台手机才能看到完整的内容,视频会在2台手机上同步播放。和心爱的TA一起把手机拼起来看吧。我觉得这个h5在只有一个手机观看的时候,应该提供一个滑动屏幕或转动手机时可以看到另一半视频的功能。

图片 71

图片 72

微信线下多人飞机游戏:

微信无现金日的活动现场提供了一个可以让多人同时玩的飞机游戏。游客用手机操作飞机射击,当达到了一定分数就可换取礼物。在大屏幕上会显示多人一起玩的游戏画面。这种方式增强了主办方与游客、游客之间的互动,也减少了游客的排队时间。飞机游戏的设计,也让人想起了第一款微信游戏就是飞机游戏,有一种回归初心的感觉。

图片 73

谷歌多人在线运动小游戏:

总共有三个竞赛小游戏,分别是跑步、骑单车和游泳,最多能同时让四个人加入游戏。玩家在手机上按照操作指示去玩,电脑上则同时显示游戏画面。当只有单人玩的时候,会有电脑参与游戏。

图片 74

图片 75

 

接着我会逐一介绍一下这些玩法,读者也可以直接跳到感兴趣的部分去阅读。除上表外还有一些目前还不太能用的H5能力,如手机震动、光线传感器、距离传感器等,由于边幅原因,暂不作展开介绍,读者可以自行查找相关资料。部分案例如没有贴上二维码,是因为该案例已下线了。

案例:

SceneKit is a high-level 3D graphics framework that helps you create 3D animated scenes and effects in your apps. It incorporates a physics engine, a particle generator, and easy ways to script the actions of 3D objects so you can describe your scene in terms of its content — geometry, materials, lights, and cameras — then animate it by describing changes to those objects.SceneKit是一个高级的3D图形框架,它帮助您在应用程序中创建3D动画场景和效果。它包含了一个物理引擎,一个粒子发生器,以及简单的方法来编写3D对象的动作脚本,这样你就可以用它的内容来描述你的场景——几何,材料,灯光和摄像机——然后通过描述这些对象的变化来动画它。

图片裁剪和形变

css的clip-path和svg的clipPath方法可以使图形或图片裁剪成三角形、五边形等自定义的形状。利用这个能力,我们可以使图片如碎片似的组合起来或散开,或者将多边形像拼七巧板一样动态地组合成各种形状,或者将一个图标以动画的形式自然地转换到另一个图标。这个玩法适合用于图片的酷炫展示、切换及如变形金刚一样有变形需求的项目中。目前性能一般的手机运行这效果时并不太流畅。

案例:

pieces:

这个网站用多边形动态地拼出各种很生动的动物,切换动物时多边形的变换过程也十分自然。访问地址:http://species-in-pieces.com

图片 76

图片 77

pasition:

这是腾讯AlloyTeam发布的给图标制作酷炫过渡动画的插件,可以让图标以动画的形式自然地转换成另一个图标。访问地址:https://alloyteam.github.io/pasition/

图片 78

图片 79

SVG Morpheus:

这个插件也是实现了如pasition的效果,但风格不相似的图标在转换时不够自然,会出现扭麻花似的强硬转换效果。访问地址:http://alexk111.github.io/SVG-Morpheus/

图片 80

图片 81

 

基于传感器

这类玩法依靠手机上的传感器实现,这些传感器有陀螺仪、gps、摄像头、麦克风、震动传感器、光线传感器、距离传感器等。大家在设计玩法的时候,要结合业务本身选用相关的合适的传感器,不要随意搭配或随意叠加多个传感器,避免画蛇添足。例如做周边生活类的需求,就应该选用gps传感器获取地理位置,做全景图的需求就选用陀螺仪来提供便捷的交互。

(1)动我试试?

SceneKit是处理3D图形的,在介绍怎么使用SceneKit 时。我们先来看下与3D有关的知识:坐标系与旋转表达式。

如何创意如泉涌?

每个人都想在策划活动时能快速想出合适的方案,但方案不是说憋就能憋出来的。正所谓厚积薄发,要有好的想法,平时就要见多识广,多看看别人的案例,积累一定量的创意。在此推荐一下H5案例分享这个网站,它收录了很多比较优秀的H5,很多新出的较好的H5都会及时收录和点评,有空时可以多逛逛。此外,可以多尝试那些充满创意的游戏,例如任天堂的游戏。他的游戏IP经历了十多年依然经久不衰,就是因为他一直以来都在创造很多充满游戏性和创意的游戏。以最近推出的《1-2-switch》为例,其内置的28个体感游戏都十分有趣,有些游戏创意还是能应用到H5上的。大家可以从下面的视频里了解一下这些游戏的玩法。

至于积累H5特效创意,大家可以访问一下fff这个网站,里面有一些酷炫有趣的特效可以参考,下次如果需要做H5的时候,产品就可以一脸傲娇的指着屏幕跟开发说:你看,就是要这个效果。而开发也可以偷偷在这参考和学习各种特效的制作方法,当你做出超出产品预期的酷炫的H5时,产品肯定会喜出望外,对你好感度大增,甚至暗许芳心。。。访问地址:http://fff.cmiscm.com/

图片 82

 

陀螺仪、重力感应

这类交互在体感游戏中比较常见,如控制射箭的方向、挥剑、打乒乓球等,而在H5中则可用于摇一摇、控制赛车左右前进、检查手机是否平躺/竖直、全景图/AR转换角度等,也可以用于制造视差效果(如王者荣耀的登录界面),使画面富有层次感。
案例:
降温摇可乐:
该H5在模拟摇可乐的情景,玩家需要不停地摇动手机,尽快使可乐喷出来。个人认为可以换另一种玩法,让朋友互相传递手机摇,谁摇爆了可乐就算输。

图片 83

来玩点耐心吧:
这是腾讯互动娱乐2017年度发布会的预热H5,提倡用户做事要多点耐心,因而玩法是耐心地竖立手机,看着一幅漂亮繁复的画慢慢地画完。

图片 84

图片 85

图片 86

一“陆”狂飙,极速挑战:
该H5与速度与激情8联动,先播放一段在朋友圈上飚车的视频,然后开始赛车游戏,通过左右倾侧手机来控制赛车左右前进、躲避障碍,最后根据行使的距离进行排名和抽奖。

图片 87

图片 88

天猫:地球上的另一个你
该H5同时播放代表理想与现实的两个视频,利用重力感应来切换看到的画面,向上转动手机模拟抬头看到理想的画面,向下转动手机模拟低头看到现实的画面,也可以转到一半的位置同时看两个视频同时播放,比较有新意,也较好表达出理想和现实之间的对比。

图片 89

图片 90

用户通过使劲摇动手机唤醒呆坐的TA,随即惊爆出的带感动态画面,使原本呆坐的TA,神采飞扬,奔跑又冲浪,随后跳入别克威朗车内

  • SceneKit的3D坐标系为右手坐标系:这个坐标系没有单位,而是根据屏幕的宽度和高度进行相对运算,屏幕上边为1 下边为-1 左边为 -1 右边为 1 。请牢记这个坐标系,接下来有关图形处理都绕不开它。

总结

H5的出现让移动web具备了更多的能力,使我们有更多的空间去创作和策划。本文列举了一些H5带来的新能力及其带来的玩法,指出H5的玩法构思可以基于传感器、基于触摸屏操作、基于画面呈现、基于内容来考虑,接着对这些类别下列举的玩法从应用场景、案例方面进行介绍,意在给读者多一些玩法上的灵感。大家在构思策划活动时也可以翻看一下这篇文章,说不定在里面就找到合适的参考方案了。

最后,谢谢认真阅读到这里的各位。小伙伴们如果也有一些有趣的H5玩法,欢迎留言介绍一下。若有什么意见和想法也欢迎不吝赐教,谢谢,friend哩噶嘛~

2 赞 10 收藏 1 评论

图片 91

地理位置

这类H5结合用户所处的位置,可以提供比较方便的周边生活服务,如查找附近的摩拜单车、获取附近的餐饮信息和前往路线;也可以与运动结合,如记录用户的跑步轨迹。如果用于办公,则可以做上班打卡功能、外勤人员的工作监控等。如果用于游戏,则可以创造出类似pokemon go的玩法,在用户的位置附近散落奖品,让用户走到目的地收集奖励。
案例:
杜蕾斯全民抓喜鹊:
该游戏H5类似pokemon go,在地图上散落各种喜鹊,用户需走到散落点附近,将喜鹊划入篮圈内,然后点击捕获,捕获够一定数量就可以兑换奖品。

图片 92

体验地址:别克:动我试试

图片 93坐标系

人脸识别

顾名思义,就是用人脸和H5进行互动,玩法有根据人脸猜测年龄、猜情绪,测试与明星脸的匹配度,将人脸和游戏电影人物相结合,将人脸变成小时候的样子,根据人脸的动作做出反馈(如张嘴时从嘴里飞出企鹅、眨眼睛拍照)等,通常跟AR和图片合成技术搭配使用。这类方式比较适合用于游戏电影宣传、个性化用户样貌、图片类产品推广的场景。合成的图片可以在边角加上活动二维码,使得其他用户看到这张图片时也可以参与活动。
相关技术主要是人脸识别和人脸动作捕捉的技术,腾讯有提供优图识别技术,微软也有提供人脸识别技术。
案例:
腾讯:我的魔兽我主演
这个H5将人脸和魔兽电影相结合。用户上传自己的照片,选择喜欢的模板和添加一些刀疤之类的装饰后,就可以生成一张用自己脸制作出来的的魔兽海报了。

图片 94

图片 95

我的小学生证件照:
用户上传照片生成小学生证件照,并可以通过”换基因“换一下生成的样子。

图片 96

图片 97

QQ钱包三周年活动之扫脸获红包:
用户在活动页张大嘴巴说”FUN开付“后,会有企鹅从嘴里探出来跳舞,然后发红包给用户。

图片 98

图片 99

(2)来玩点耐心吧

  • 旋转表达式旋转表达式主要有四种:
    1. 轴角 2. 欧拉角 3. 四元素 4. 旋转矩阵这篇博客大概介绍了这四种表达式。旋转表达式主要处理模型在空间位置的旋转,全景图片播放时需要用到。

webRTC

webRTC是H5的一个新特性,它可以在web上访问摄像头和麦克风,进行视频和音频的实时通讯,用途有视频会议、视频聊天、在线教育、在线问诊等,以前只能客户端才能实现的视频类应用也可以应用到web上了。兼容性方面,移动端浏览器的支持程度很差,安卓5.x以上的chrome才支持,而ios直至safari11发布才终于得到了支持,但这个发展表明web端也逐渐具备这个能力了,我们可以预先想想这方面的策划,说不定不久的将来就能用上了。
案例:
Chatroulette:
这是一个随机视频聊天网页,你可以随机和地球上的陌生人视频聊天,一般遇到的都是外国人,我也是从这个网页第一次真实地感受到真的有外国人的存在。可惜现在不能访问了。

图片 100

一个考验用户耐心的小游戏。用户保持握住手机不变的姿势并且计时。一旦姿势变动,则游戏结束

SceneKit比较强大,类比较多,接下来只主要介绍与实现全景有关的几个类:

基于触摸屏操作:

除了利用传感器创造特别的玩法外,在触摸屏上的操作也有多种玩法,如单屏滚动、手势操作、全景交互及多屏互动。在触摸屏上的操作要符合用户的正常习惯,例如滑动屏幕可以翻页、移动场景,双指拉开表示放大操作。如果预料到用户可能不清楚如何操作,则需要提供操作示范。此外,可操作区域也要弄大些,方便用户操作,例如当前画面只是操作一只猫爪上下移动,那么除了可以在猫爪上滑动外,在其他空白区域上下滑动也应该可以让猫爪上下移动。

体验地址:来玩点耐心吧

  • SCNViewSCNView主要负责显示3D模型对象的视图,能够添加到UIView类型的视图上。
  • SCNScene场景:由几何模型,灯光,照相机及其他属性组成的环境。场景能添加各种节点,他包含了一个rootNode属性,可以添加各种node。
  • SCNNOde节点:一个抽象的概念,是个看不见摸不到的东西,没有几何形状,但是有位置,以及自身坐标系。在场景中添加节点后,就可以在这个节点上放我们的元素了,比如几何模型,灯光,摄像机等。节点上可以添加子节点的,每个节点都有自身坐标系。它的属性包含:camera geometry position rotation eulerAngles pivot orientation等,其中rotation eulerAngles pivot orientation就是各种旋转表达式,可以处理模型在空间的角度。
  • SCNGeometry几何模型:全景图片就是渲染在模型上的然后显示在屏幕上。系统自带的模型有很多种:SCNPlane SCNBox SCNSphere SCNCylinder SCNText。我们也可以通过SCNShape自定义各种奇形怪状的模型。
  • SCNCamera相机:这个类似我们现实中的相机,它也有焦距、视角等。图形渲染到模型后,要添加相机我们才能看见。
    1. 视角:xFov yFov,视角越大,屏幕上显示的体积越小;
    2. 焦距:focusDistance,焦距越大,视角越小;

单屏滚动

这是一种很常见的交互形式。如幻灯片一样,网页上的每一页内容都是占满全屏的。当用户滑动屏幕翻下一页后,当前整个屏幕的内容都会翻走,然后再展示下一页全屏的内容。翻屏时可以加上一些转换的动画,如渐入渐出,使得翻页效果生动不单调,也可以加上重力感应,让手机在转动时产生视差效果。单屏滚动的应用场景比较广泛,很多主页、产品介绍、报告总结、邀请函都应用了这种形式。
案例:
腾讯互娱发布会邀请函:
邀请函采取单屏滚动的形式展示,同时利用重力感应,转动手机时会看到页面上的装饰图片也会跟着移动,制造视差,增添了乐趣。

图片 101

图片 102

图片 103

王者荣耀S7赛季总结:
该游戏总结报告也使用了单屏滚动的方式,展示了用户在该赛季各方面的成绩,如获得星数、本命英雄、给力搭档等。翻页时酷炫的动画效果使得这份报告更加生动有趣。该报告亦使用了重力感应,摆动手机时页内元素也会跟着摆动。

图片 104

图片 105

图片 106

(3)一“陆”狂飙,极速挑战

图片 107camera

手势操作

我们和屏幕交互,除了有点击、滑动外,还有很多手势操作,如拖拽、双指拉开放大、双指画圈旋转物体,画图形表示某个动作等。手势操作可用于放大查看图片、对图片进行拖拽/放大/旋转等编辑、手势解锁、也可以用于游戏上,如拼图游戏时拖拽、旋转拼图碎片。
在实现上,H5有一个手势操作库hammer.js,可以实现常用的手势操作。

图片 108

内容分两个部分展现,前半部分借助视频的形式展开,点击首页的“ENGINE START“进入视频部分,将速度与激情电影情节和陆金所引入朋友圈、今日头条等场景中,视频部分的结尾给出了游戏挑战和游戏规则,紧接着进入游戏环节,通过左右遥控手机躲避行驶过程中的障碍物,最后进行排名和抽奖。

  • SCNAction动画:可以为节点添加各种动画,包括:移动,旋转,缩放,自定义…

基于画面呈现:

这类玩法一般就是展现一段比较酷炫有趣的画面内容,如视频、动画、特效,给用户带来视觉上的感官享受,用户也可以通过与画面内容互动,看自己想看的内容。

体验地址:一“陆”狂飙,极速挑战

怎么设置才能将图片渲染至模型上呢?这里需要先理解SCNGeometry的相关几个属性:

视频/动画展示

这类H5会播放一段时间较长但有趣生动的视频或动画来吸引用户关注其宣传内容。由于视频内容比较生动酷炫有趣味,以及常常有明星参与演出,用户一般不会太抗拒这样的广告,反而会喜欢点赞,甚至主动向朋友分享。有很多刷屏H5都是这个类型的,例如薛之谦XQQ动漫、韩寒X使命召唤等。这个玩法适合用于产品、节日、游戏、电影等宣传场景及叙述内容比较多的场景。
这个玩法的主要制作方式有:
1、视频。这种方式需要前期拍摄、后期使用专门的视频软件(如AE)制作,能制作出很炫的效果,但成本较高,用户通常只能被动地观看完整段视频。
2、使用canvas制作,这种方式可以制作出像以前的flash一样的动画,效果没视频酷炫,但这类动画既可以看,又可以在播放途中自然地添加交互,相关组件有createjs、egret等。
3、使用H5 css3制作,这种方式也能像方式2一样制作出动画,但制作难度和复杂度都比方式2大,而且也有可能带来性能问题。
案例:
薛之谦XQQ动漫:
这支H5找来薛之谦拍视频,讲关于腾讯动漫作品的段子。视频内容十分有趣,成为了当时的现象级刷屏H5。

图片 109

图片 110

生命之下,想象之上——2015年腾讯互动娱乐发布会品牌H5:
这支H5使用createjs制作,以卡通动画的方式展示了男孩探寻想象力的旅程。动画分段播放,用户可以体会完每段动画的思想后,再点击继续播放下一段动画。

图片 111

图片 112

这是成年人不敢打开的童年:
这个H5动画属于一镜到底式的动画,用户一边滑动屏幕,动画一边顺序播放,而往相反方向滑动则会让动画倒序播放,滑动的速度会影响动画播放的速度,感觉就像是一边抽卷筒厕纸一边看到厕纸上画的逐格漫画一样。

图片 113

费玉清唱诛仙主题曲:
这个视频h5最大的特色是观看过程中长按按钮时会换了另一种魔性的画风,让用户不再只是被动地观看视频,而是通过操作发掘到更多有趣的内容,增强了用户的参与感和吸引力。

图片 114

图片 115

(4)中秋的正确打开方式

  • materials(SCNMaterial类):材质,要渲染的图片就是添加到材质上。一个模型可以添加多个材质,默认有一个材质,可以通过firstMaterial属性获取。
  • cullMode(SCNMaterial属性):渲染时剔除的表面,SCNCullModeBack内表面,SCNCullModeFront外表面。
  • diffuse(SCNMaterial属性):

    The diffuse property specifies the amount of light diffusely reflected from the surface. The diffuse light is reflected equally in all directions and is therefore independent of the point of view.漫反射属性指定从表面漫反射的光量。漫射光在各个方向上反射均匀,因此与视点无关。

  • contents(diffuse.contents):渲染的内容,可以是颜色,图片,图层,路径,纹理等。全景图片渲染设置:geometry.firstMaterial.diffuse.contents = image;就可以了。

全景交互

全景交互指将用户置于一个360度环绕的图片/视频环境下进行沉浸式的体验,用户可以通过转动手机或滑动屏幕来看这个环境里不同角度的内容并进行交互。如果将内容分成左右两个屏,带上VR眼镜,则可以进行VR体验。此玩法比较适合的场景有虚拟全景展示、身临其境的实景展示或活动现场展示。与此类似的还有商品的360度展示,用户拖动商品即可看到不同角度下商品的样子。
相关技术主要是3d旋转操作、陀螺仪方面的技术,全景图插件有造物节使用的css3d-engine ,全景视频组件有Valiant360,还有一些收费组件如krpano。
案例:
小爷吴亦凡,凡心所向:
之前很火的吴亦凡打篮球全景视频H5,通过旋转手机看他风骚地带球,镜头对着他代表正在防守他,结束后游戏会算出玩家的防守有效率。

图片 116

图片 117

vivo-我们i音乐:
类似造物节的案例,用户在一个360度的虚拟空间里拖动画面和旋转手机看各角度下的样子,并可点击里面的物品进行互动。

图片 118

深圳欢乐谷实景地图:
在这个地图里,游客可以从高处欣赏欢乐谷的风景,切换各区域寻找游玩设施的位置,还可以发表评论留下足迹。该地图除了可以滑动、转动手机来浏览地图,还支持VR模式,将区域切换按钮移动到屏幕中间的锚点上一会儿便可切换游玩区域。

图片 119

图片 120

案例以中秋的正确打开方式为主题,通过“聚”“独”两种状态,体现中秋的不同状态,也是生活中的不同状态,达到共鸣。对比的时候,翻转手机180度,切换状态,非常有特色。

理解了一些基本知识后,开始编写代码:

多屏互动

多屏互动指在多个屏幕上体验活动,各自的操作会同时反应到其他屏幕上,一般以双屏互动为主。玩法有多人合作完成任务/互相竞技、你画我猜、一问一答、情侣互动小游戏、线下与现场观众互动、多个屏幕拼起来看视频等,也可以把手机屏幕当成控制器,用大屏幕来显示,例子有手机遥控器、谷歌的多人竞跑游戏。制作此类活动时,要注意兼顾好只有单人玩时的情况,此时可以将体验流程简单化,或者加上电脑一起参与。
相关技术主要是通过websocket或轮询接口进行同步通信和更新画面的内容。
案例:
CF手游&品客组队大战僵尸:
这个游戏是用手榴弹炸僵尸,既可单人玩,也可双人玩,双人玩的时候一人负责装薯片弹药,一人负责扔手榴弹。

图片 121

图片 122

奔驰抢车拔河:
2人拼手速点击屏幕,将奔驰拉到自己那边为赢。

图片 123

图片 124

爱9就在一起:
一个关于爱情的视频,需要使用2台手机才能看到完整的内容,视频会在2台手机上同步播放。和心爱的TA一起把手机拼起来看吧。我觉得这个h5在只有一个手机观看的时候,应该提供一个滑动屏幕或转动手机时可以看到另一半视频的功能。

图片 125

图片 126

微信线下多人飞机游戏:
微信无现金日的活动现场提供了一个可以让多人同时玩的飞机游戏。游客用手机操作飞机射击,当达到了一定分数就可换取礼物。在大屏幕上会显示多人一起玩的游戏画面。这种方式增强了主办方与游客、游客之间的互动,也减少了游客的排队时间。飞机游戏的设计,也让人想起了第一款微信游戏就是飞机游戏,有一种回归初心的感觉。

图片 127

谷歌多人在线运动小游戏:
总共有三个竞赛小游戏,分别是跑步、骑单车和游泳,最多能同时让四个人加入游戏。玩家在手机上按照操作指示去玩,电脑上则同时显示游戏画面。当只有单人玩的时候,会有电脑参与游戏。

图片 128

图片 129

体验地址:中秋的正确打开方式

显示图片
 // 初始化scene _scnView = [[SCNView alloc] init]; _scnView.scene = [SCNScene scene]; [self.view addSubview:_scnView]; // 绘制球体 SCNSphere *sphere = [SCNSphere sphereWithRadius:_config.shpereRadius]; // 前面提过坐标系是根据屏幕相对运算的,具体值可以根据显示效果调节,这里球体radius设置为10, sphere.firstMaterial.cullMode = SCNCullModeFront; // 剔除球体外表面 sphere.firstMaterial.doubleSided = NO; // 只渲染一个表面 // 相机是处于球体内部的, _sphereNode = [SCNNode node]; // 节点 _sphereNode.geometry = sphere; _sphereNode.position = SCNVector3Make; // 位置 // 渲染图片 sphere.firstMaterial.diffuse.contents = _config.contents; [_scnView.scene.rootNode addChildNode:_sphereNode]; // 添加至场景根节点

到这里,一个内表面显示图片的球体创建并添加成功,但是现在view上面并不显示,还需要添加相机节点:

 // 相机 _camera = [SCNCamera camera]; _camera.automaticallyAdjustsZRange = YES; // 自动添加可视距离 _camera.xFov = _config.cameraFocalX; // 相机视角 _camera.yFov = _config.cameraFocalY; _camera.focalBlurRadius = 0; // 模糊 _cameraNode = [SCNNode node]; _cameraNode.camera = _camera; [_scnView.scene.rootNode addChildNode:_cameraNode];

然后运行代码,手机屏幕上就能看到图片了。

图片 130demo

如果仔细对比原始的平铺图片会发现,现在显示的图片是反过来的,是镜像的;这是因为图片是贴在球体上,而我们的相机是从球体中心往外观察的,类似于现实世界中我们在房间里看贴在窗户玻璃外的窗花一样我们如何让它正常显示呢?前面分析过图片渲染的原理,关键的一点就是纹理,那么翻转纹理坐标就能解决这个问题了:

 sphere.firstMaterial.diffuse.contentsTransform = SCNMatrix4MakeScale; sphere.firstMaterial.diffuse.contentsTransform = SCNMatrix4Translate(sphere.firstMaterial.diffuse.contentsTransform, 1, 0, 0);

这里使用了矩阵操作,先把坐标沿y轴翻转实现镜像,翻转后坐标偏移了所以接着需要平移回来。还有一种方式,翻转后不平移,而是指定超出纹理坐标范围的纹理映射行为SCNWrapMode:mode有以下四种

图片 131wrap

指定repeat即可

 sphere.firstMaterial.diffuse.contentsTransform = SCNMatrix4MakeScale; sphere.firstMaterial.diffuse.wrapS = SCNWrapModeRepeat; sphere.firstMaterial.diffuse.wrapT = SCNWrapModeRepeat;

但这时仅仅显示了全景图的一部分,并不支持360度查看及陀螺仪查看等功能。我们可以添加手势及陀螺仪来控制全景图的360度滑动:

图片裁剪和形变

css的clip-path和svg的clipPath方法可以使图形或图片裁剪成三角形、五边形等自定义的形状。利用这个能力,我们可以使图片如碎片似的组合起来或散开,或者将多边形像拼七巧板一样动态地组合成各种形状,或者将一个图标以动画的形式自然地转换到另一个图标。这个玩法适合用于图片的酷炫展示、切换及如变形金刚一样有变形需求的项目中。目前性能一般的手机运行这效果时并不太流畅。
案例:
pieces:
这个网站用多边形动态地拼出各种很生动的动物,切换动物时多边形的变换过程也十分自然。访问地址:http://species-in-pieces.com

图片 132

图片 133

pasition:
这是腾讯AlloyTeam发布的给图标制作酷炫过渡动画的插件,可以让图标以动画的形式自然地转换成另一个图标。访问地址:https://alloyteam.github.io/pasition/

图片 134

图片 135

SVG Morpheus:
这个插件也是实现了如pasition的效果,但风格不相似的图标在转换时不够自然,会出现扭麻花似的强硬转换效果。访问地址:http://alexk111.github.io/SVG-Morpheus/

图片 136

图片 137

地理位置

手势滑动,缩放功能

在scnView父视图上添加两个手势:pinchGesture,panGesture。根据手势操作,调节相机的参数实现相应功能:

- addGesture { self.pinchGesture = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinchGesture:)]; self.panGesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panGesture:)]; [self addGestureRecognizer:_pinchGesture]; [self addGestureRecognizer:_panGesture]; _pinchGesture.enabled = _config.pinchEnabled; _panGesture.enabled = _config.panEnabled;}- pinchGesture:(UIPinchGestureRecognizer *)gesture { if (gesture.state != UIGestureRecognizerStateEnded && gesture.state != UIGestureRecognizerStateFailed) { if (gesture.scale != NAN && gesture.scale != 0.0) { float scale = gesture.scale - 1; if (scale < 0) { scale *= (_config.scaleMax - _config.scaleMin); } _currentScale = scale   _prevScale; _currentScale = [self validateScale:_currentScale]; // 控制缩放的最小最大比例 CGFloat valScale = [self validateScale:_currentScale]; double xFov = _config.cameraFocalX * (1 - (valScale - 1)); double yFov = _config.cameraFocalY * (1 - (valScale - 1)); // 调节相机视角,前面分析了视角越大看到的体积越小,所以这里要反过来。即手势放大时,视角要调小这样看到的图像才是放大的效果; _camera.xFov = xFov; _camera.yFov = yFov; } } else if(gesture.state == UIGestureRecognizerStateEnded){ _prevScale = _currentScale; }}- panGesture:(UIPanGestureRecognizer *)gesture { // 控制图片滑动原理:手势滑动,效果是手机屏幕上的图片要跟着滑动, // 因为我们的图片是渲染至球体上的,所以可以控制球体转动来实现滑动效果。 // 一般的,我们都是控制相机。因为相机处于球体内部,相机需要往相反的方向转动。 if (gesture.state == UIGestureRecognizerStateBegan){ CGPoint currentPoint = [gesture locationInView:gesture.view]; self.lastPointX = currentPoint.x; self.lastPointY = currentPoint.y; }else{ CGPoint currentPoint = [gesture locationInView:gesture.view]; float distX = currentPoint.x - self.lastPointX; float distY = currentPoint.y - self.lastPointY; self.lastPointX = currentPoint.x; self.lastPointY = currentPoint.y; // 手势滑动角度的微调 distX *= - 0.005 * 0.5; distY *= - 0.005 * 0.5; SCNMatrix4 modelMatrix = SCNMatrix4Identity; if (fabs > fabs { self.fingerRotationY  = distX; }else { self.fingerRotationX  = distY; } // 因为是右手坐标系,所以相机水平转动时是绕Y轴转动,垂直方向转动时需绕X轴转动。Z轴保持不变。这里旋转表达式用的是旋转矩阵 modelMatrix = SCNMatrix4Rotate(modelMatrix, self.fingerRotationY, 0, 1, 0); modelMatrix = SCNMatrix4Rotate(modelMatrix, self.fingerRotationX,1, 0, 0); _cameraNode.pivot = modelMatrix; }}- validateScale:scale{ if (scale < _config.scaleMin) { scale = _config.scaleMin; }else if (scale > _config.scaleMax) { scale = _config.scaleMax; } return scale;}

如何创意如泉涌?

每个人都想在策划活动时能快速想出合适的方案,但方案不是说憋就能憋出来的。正所谓厚积薄发,要有好的想法,平时就要见多识广,多看看别人的案例,积累一定量的创意。在此推荐一下H5案例分享这个网站,它收录了很多比较优秀的H5,很多新出的较好的H5都会及时收录和点评,有空时可以多逛逛。此外,可以多尝试那些充满创意的游戏,例如任天堂的游戏。他的游戏IP经历了十多年依然经久不衰,就是因为他一直以来都在创造很多充满游戏性和创意的游戏。以最近推出的《1-2-switch》为例,其内置的28个体感游戏都十分有趣,有些游戏创意还是能应用到H5上的。大家可以从下面的视频里了解一下这些游戏的玩法。

至于积累H5特效创意,大家可以访问一下fff这个网站,里面有一些酷炫有趣的特效可以参考,下次如果需要做H5的时候,产品就可以一脸傲娇的指着屏幕跟开发说:你看,就是要这个效果。而开发也可以偷偷在这参考和学习各种特效的制作方法,当你做出超出产品预期的酷炫的H5时,产品肯定会喜出望外,对你好感度大增,甚至暗许芳心。。。访问地址:http://fff.cmiscm.com/

图片 138

结合位置提供LBS服务,百度地图之前做过一个在地图上找附近的麦当劳的活动;也可以与运动结合,如记录用户的跑步轨迹,但是H5不是APP,如果关闭了就不能检测了,如果真的检测运动轨迹的话,建议还是到点打卡的方式会更合适。游戏可参考pokemon go的玩法,在用户的位置附近散落奖品,让用户走到目的地收集奖励。

陀螺仪功能

陀螺仪功能是让图片跟着手机的方位转动,原理和手势滑动一样:

- addMotionFunction { _motionManager = [[CMMotionManager alloc]init]; _motionManager.deviceMotionUpdateInterval = 1.0 / 30.0; _motionManager.gyroUpdateInterval = 1.0f / 30; _motionManager.showsDeviceMovementDisplay = YES; if (_motionManager.isDeviceMotionAvailable) { [_motionManager startDeviceMotionUpdatesToQueue:[NSOperationQueue mainQueue] withHandler:^(CMDeviceMotion * _Nullable motion, NSError * _Nullable error) { if (!self.config.motionEnabled) { return; } CMAttitude *attitude = motion.attitude; if (attitude == nil) { return; } // self.cameraNode.eulerAngles = SCNVector3Make(attitude.pitch - M_PI / 2 , attitude.roll, attitude.yaw); // 这里旋转表达式用的是四元素(陀螺仪返回的attitude.quaternion就是四元素) self.cameraNode.orientation = [self orientationFromCMQuaternion:attitude.quaternion]; }]; }}- (SCNQuaternion)orientationFromCMQuaternion:(CMQuaternion)quaternion { GLKQuaternion gq1 = GLKQuaternionMakeWithAngleAndAxis(GLKMathDegreesToRadians, 1, 0, 0); // 这里x轴要同时旋转90度,这是因为手机陀螺仪的坐标系不一致:手机正放于桌面上的坐标为;而scnView坐标系是手机正立的时候为; GLKQuaternion gq2 = GLKQuaternionMake(quaternion.x, quaternion.y, quaternion.z, quaternion.w); GLKQuaternion qp = GLKQuaternionMultiply; return SCNVector4Make(qp.x, qp.y, qp.z, qp.w);}

总结

H5的出现让移动web具备了更多的能力,使我们有更多的空间去创作和策划。本文列举了一些H5带来的新能力及其带来的玩法,指出H5的玩法构思可以基于传感器、基于触摸屏操作、基于画面呈现、基于内容来考虑,接着对这些类别下列举的玩法从应用场景、案例方面进行介绍,意在给读者多一些玩法上的灵感。大家在构思策划活动时也可以翻看一下这篇文章,说不定在里面就找到合适的参考方案了。
最后,谢谢认真阅读到这里的各位。小伙伴们如果也有一些有趣的H5玩法,欢迎留言介绍一下。若有什么意见和想法也欢迎不吝赐教,谢谢,friend哩噶嘛~

案例:杜蕾斯全民抓喜鹊

添加遮罩

大部分全景图片都是由全景相机拍摄出来的,全景相机是360度的,在拍摄时相机底部的支架也会拍摄进去:

图片 139支架

为了美观,不影响整体效果 ,我们需要用一张图片盖住。怎么在球面图形上面加张图片呢?其实我们只要在创建一个渲染图片的平面模型,找准位置添加到场景rootNode上就可以了:

 _overlayNode = [SCNNode node]; _overlayNode.geometry= [SCNPlane planeWithWidth:1 height:1]; _overlayNode.geometry.firstMaterial.diffuse.contents = overlayIcon; // 图片 _overlayNode.position = SCNVector3Make(0, - 4, 0); // 支架位于相机正下方,也就是坐标系Y轴负方向 _overlayNode.rotation = SCNVector4Make(1, 0, 0, - M_PI / 2); // 旋转 否则看不到 // 这里旋转90度 还是坐标的原因:默认情况下添加的SCNPlane模型是平铺在XY平面,而我们添加的遮罩X,Z都是0,所以需要旋转至XZ平面才能看到遮罩 _overlayNode.geometry.firstMaterial.cullMode = SCNCullModeBack; [_scnView.scene.rootNode addChildNode:_overlayNode];

图片 140遮罩

点击GO!!!!!进入游戏,游戏与地图结合在地图可以随时看见自己的位置,如果发现了小喜鹊,只要走向它,用篮圈将其圈住,点击捕捉即可。可以再随时看到附近的游戏在线人数和可爱的小喜鹊,集齐一定数量的喜鹊还可以兑换奖品哦!!

头控功能

其原理和上面的添加遮罩是一样的,都是在场景中添加节点。不过这些节点需要触发事件,实现相关的控制功能。这里的控制功能基本都是控制切换上一张图片,下一张图片,实现头戴设备后也能实现查看图集的需求。

 // 添加头控节点 _potNode = [SCNNode node]; // 选择pick节点 _potNode.geometry= [SCNPlane planeWithWidth:0.3 height:0.3]; _potNode.geometry.firstMaterial.diffuse.contents = potIcon; _potNode.position = SCNVector3Make(0, 0, - 9); _potNode.geometry.firstMaterial.cullMode = SCNCullModeBack; [_cameraNode addChildNode:_potNode]; // 加在_camera上,camera转动时保持不变 _preNode = [SCNNode node]; // 上一张图片function节点 _preNode.geometry= [SCNPlane planeWithWidth:0.3 height:0.3]; _preNode.geometry.firstMaterial.diffuse.contents = preIcon; _preNode.position = SCNVector3Make(- 1.5, 0.5, - 9); _preNode.geometry.firstMaterial.cullMode = SCNCullModeBack; [_sphereNode addChildNode:_preNode]; _nextNode = [SCNNode node]; // 下一张图片function节点 _nextNode.geometry= [SCNPlane planeWithWidth:0.3 height:0.3]; _nextNode.geometry.firstMaterial.diffuse.contents = nextIcon; _nextNode.position = SCNVector3Make(1.5, 0.5, - 9); _nextNode.geometry.firstMaterial.cullMode = SCNCullModeBack; [_sphereNode addChildNode:_nextNode];

节点添加完后,并正常显示了,接下来就要加上触发事件,触发的时机就是当function节点和pick节点重合的时候。只判断重合还不够,因为在浏览图片时,相机转动时偶发情况下function节点和pick节点碰巧重合。因此在重合的基础上,还需加上延时动画,当重合的时间达到动画的时间后才触发事件。

// 添加头控动画- addEyepickerAnimation { _animationNode = [SCNNode node]; _animationNode.geometry = [SCNPlane planeWithWidth:0.3 height:0.3]; _animationNode.hidden = YES; [_potNode addChildNode:_animationNode]; __weak typeof weakSelf = self; _animationAction = [SCNAction customActionWithDuration:3.f actionBlock:^(SCNNode * _Nonnull node, CGFloat elapsedTime) { int time =  (elapsedTime * (images.count - 1) / 3.0); node.geometry.firstMaterial.diffuse.contents = images[time]; if (time == images.count - 1 && (weakSelf.isPreAnimating || weakSelf.isNextAnimating)) { // 动画结束 FWPanoramaHotpotType type = [weakSelf.animationKey isEqualToString:@"pre"] ? FWPanoramaHotpotTypePrev : FWPanoramaHotpotTypeNext; if (type == FWPanoramaHotpotTypePrev) { weakSelf.preAnimationEnd = YES; [weakSelf removePreAnimation]; }else { weakSelf.nextAnimationEnd = YES; [weakSelf removeNextAnimation]; } if ([weakSelf.delegate respondsToSelector:@selector(renderView:didPickHotpot:)]) { [weakSelf.delegate renderView:weakSelf didPickHotpot:type]; } } }];}// scnView的代理方法,图片渲染都会走这里- renderer:(id <SCNSceneRenderer>)renderer updateAtTime:(NSTimeInterval)time { SCNVector3 prePosition = [_preNode convertPosition:_preNode.position toNode:_cameraNode]; // 计算相对坐标 SCNVector3 nextPosition = [_nextNode convertPosition:_nextNode.position toNode:_cameraNode];// NSLog(@"camera x;%f,y:%f,z:%f",prePosition.x,prePosition.y,prePosition.z); BOOL preOverlap = prePosition.x > - 0.3 / 2 && prePosition.x < 0.3 / 2 && prePosition.y > - 0.3 / 2 && prePosition.y < 0.3 / 2; if (!_preAnimationEnd && preOverlap) { // 两个node基本重合 if (!_isPreAnimating) { [self runPreAnimation]; } }else if (!_isNextAnimating && !preOverlap) { _preAnimationEnd = NO; [self removePreAnimation]; } BOOL nextOverlap = nextPosition.x > - 0.3 / 2 && nextPosition.x < 0.3 / 2 && nextPosition.y > - 0.3 / 2 && nextPosition.y < 0.3 / 2; if (!_nextAnimationEnd && nextOverlap) { // 两个node基本重合 if (!_isNextAnimating) { [self runNextAnimation]; } }else if (!_isPreAnimating && !nextOverlap) { _nextAnimationEnd = NO; [self removeNextAnimation]; }}

体验地址:杜蕾斯全民抓喜鹊

节点点击事件

上面两个eyepick节点的事件,是由头控触发的;那如果我们要做到通过手动点击节点来触发事件,该怎么做呢?

  1. 首先,我们需要拿到手点击屏幕的坐标;
  2. 然后通过这个坐标,计算该点对应的节点;
  3. 如果有对应的节点,再判断是否是我们需要的目标节点;
- touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { // 获取到手势的对象 UITouch *touch = [touches allObjects].firstObject; // 手势在SCNView中的位置 CGPoint touchPoint = [touch locationInView:self.scnView]; // 该方法会返回一个SCNHitTestResult数组,这个数组中每个元素的node都包含了指定的点 NSArray *hitResults = [self.scnView hitTest:touchPoint options:nil]; if (hitResults.count > 0) { SCNHitTestResult *hit = [hitResults firstObject]; SCNNode *node = hit.node; if (node == _preNode) { NSLog(@"hit prenode"); }else if (node == _nextNode) { NSLog(@"hit nextnode"); } }}

(以上代码由楼下junior_a提供)

人脸识别

分屏功能

实现分屏,就是将1个scnView分成两个,这两个scnView的显示和操作都是一样的。要实现这种效果,可以添加两个subview并将scnView的contents赋值给两个subview。

@property (nonatomic, strong) SCNView *leftView;@property (nonatomic, strong) SCNView *rightView; [_leftView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.top.mas_equalTo; make.height.mas_equalTo(self.bounds.size.height / 2); }]; [_rightView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.bottom.mas_equalTo; make.height.mas_equalTo(self.bounds.size.height / 2); }];_leftView.layer.contents = self.scnView.layer.contents;_rightView.layer.contents = self.scnView.layer.contents;[self.view addSubview:_leftView];[self.view addSubview:_rightView];

用人脸和H5进行互动,玩法有根据人脸猜测年龄、猜情绪,测试与明星脸的匹配度,将人脸和游戏电影人物相结合(电影宣传用),将人脸变成小时候的样子(生成高考证),将人脸变成年老的样子(这个创意适合做美容美妆行业),根据人脸的动作做出反馈(比如嘴巴喷火、眼睛放闪电)等,通常跟AR和图片合成技术搭配使用。相关技术主要是人脸识别和人脸动作捕捉的技术,腾讯有提供优图识别技术,微软也有提供人脸识别技术。

视频播放器

视频播放器,原理和图片播放器是一样的:改动上面的一小段代码,就能实现和图片同样功能的视频播放器;改动的地方就是将渲染在球体模型上的图片,换成skView包装的视频播放器AVPlayer:

- createSphere { SCNSphere *sphere = [SCNSphere sphereWithRadius:_config.shpereRadius]; sphere.firstMaterial.cullMode = SCNCullModeFront; // 剔除球体外表面 sphere.firstMaterial.doubleSided = NO; // 只渲染一个表面 _sphereNode = [SCNNode node]; // 节点 _sphereNode.geometry = sphere; _sphereNode.position = SCNVector3Make; // 渲染图片// sphere.firstMaterial.diffuse.contents = _config.contents;// [_scnView.scene.rootNode addChildNode:_sphereNode]; // 渲染视频 NSString *path = [[NSBundle mainBundle] pathForResource:@"360" ofType:@"mp4"]; NSURL *url = [NSURL fileURLWithPath:path]; AVPlayerItem *item = [AVPlayerItem playerItemWithURL:url]; _player = [AVPlayer playerWithPlayerItem:item]; [_player play]; // 需要使用SpriteKit _videoNode = [[SKVideoNode alloc] initWithAVPlayer:_player]; // 播放器节点 _videoNode.size = CGSizeMake(self.frame.size.width, self.frame.size.height); // 这里的size的单位和上面讲的SceneKit不一样,这里就是实际的像素点单位 这里设置和当前view一样 _videoNode.position = CGPointMake(_videoNode.size.width / 2, _videoNode.size.height / 2); _skScene = [SKScene sceneWithSize:_videoNode.size]; _skScene.scaleMode = SKSceneScaleModeAspectFit; [_skScene addChild:_videoNode]; sphere.firstMaterial.diffuse.contents = _skScene; [_scnView.scene.rootNode addChildNode:_sphereNode];}

另外,和普通的视频播放器一样,我们可以通过_player对象控制视频的播放(播放/暂停/快进等)

案例:

至此,全景播放器的所有功能都实现了。所有代码也就400行,是不是很简单呢

觉得有用的点个赞哈

(1)腾讯:我的魔兽我主演

H5主题是主演你自己的魔兽,在两幅海报中选择自己喜欢的海报风格,上传自己露出五官的照片,在成型的海报上加上伤疤、眼睛等装饰物,点击完成,即完成海报制作,可以生成海报并可以分享朋友圈。

体验地址:腾讯:我的魔兽我主演

(2)我的小学生证件照

点击上传自己的自拍照片就可以生成属于自己的小学证件照,而且可以点击屏幕右侧的“换基因”生成不同造型的证件照。亮点:黄色背景和蓝色底片虽然产生了及其强烈的撞色,但是并没有给人突兀的感觉,人脸识别合成的照片还原非常真实。

体验地址:我的小学生证件照

(3)Snapchat佳得乐饮料迎头浇灌AR滤镜

佳得乐在Snapchat上推出了一款基于AR技术的滤镜,能让球迷感受在赢球时刻被佳得乐饮料迎头浇灌的兴奋感。与广告商进行合作方面,在《史努比花生大电影》的广告投放中,史努比本身就很受喜爱,用户很乐意与之“合照”,嘴中也可以吐出类似彩虹特效的糖果,UGC的传播效果非常好。

详细AR的参考文章请见【盘点】洞悉爆款AR的秘密(内附2017年上半年精品AR营销案例合集)

webRTC

WebRTC,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术,可见Google布局之深远。WebRTC提供视频处理和音频处理技术,Web开发者也无需关注多媒体的数字信号处理过程,只需编写简单的Javascript程序即可实现。由于受到硬件条件的限制,目前的任何想法都实现不了,更传播不了,但大家可以持续关注,不久的将来就能用上了。

基于触摸屏操作

除了利用传感器创造特别的玩法外,在触摸屏上的操作也有多种玩法,如单屏滚动、手势操作、全景交互及多屏互动。在触摸屏上的操作要符合用户的正常习惯,例如滑动屏幕可以翻页、移动场景,双指拉开表示放大操作。默认提供操作示范,切记!切记!此外,可操作区域也要弄大些,方便用户操作,不要想象玩家是专业级玩家,这在策划和测试的时候要注意。

单屏滚动

这是一种很常见的交互形式。翻屏时可以加上一些转换的动画,如渐入渐出,使得翻页效果生动不单调,也可以加上重力感应,让手机在转动时产生视差效果。单屏滚动的应用场景比较广泛,很多主页、产品介绍、报告总结、邀请函都应用了这种形式。

案例:

(1)in一周年庆邀请函

用色彩讲述故事,一次滑动之后全屏自动切换,美轮美奂,并有真声留言,最后送出邀请函,邀你参加一周年庆典。

体验地址:in一周年庆邀请函

(2)我的S7王者之路

这是一只图文展示类型的H5,页面加载完成以后不断的向上滑动屏幕,就可以查看Initial的王者S7赛季的赛季称号、获得的星数、战场荣耀、本命英雄、给力搭档、赛季神坑、开黑CP,以及自己的作战小伙伴,和具体的数据分析,在案例的尾部点击“查看我的王者之路”按钮,可以查看自己的王者之路。同时,这个H5案例使用了重力感应,体验的同时摇晃手机,画面也会跟着有所晃动。

体验地址:我的S7王者之路

手势操作

我们和屏幕交互,除了有点击、滑动外,还有很多手势操作,如拖拽、放大、所辖、旋转、画图。切水果和愤怒的小鸟都是非常不错的手势操作典型案例。

案例:脑洞大过天,月饼究竟能做啥?

月饼究竟能做啥,打开看到白熊和冰皮月饼,通过点选和拖拽的方式将冰皮月饼放到白熊头上做耳朵(你的第一反应真的是耳朵吗?嘻嘻)进入下一环节,将月饼放入礼盒即可送心意,并有脑洞指数,最后附有相应的月饼购买链接。

体验地址:哈根达斯:脑洞大过天,月饼究竟能做啥?

基于画面呈现

这类玩法一般就是展现一段比较酷炫有趣的画面内容,如视频、动画、特效,给用户带来视觉上的感官享受,用户也可以通过与画面内容互动,看自己想看的内容。

视频/动画展示

这类H5会播放一段时间较长但有趣生动的视频或动画来吸引用户关注其宣传内容。视频/动画生动酷炫有趣味,以及常常有明星参与演出,用户一般不会太抗拒这样的广告,反而会喜欢点赞,甚至主动向朋友分享。这个玩法适合用于产品、节日、游戏、电影等宣传场景及叙述内容比较多的场景。

这个玩法的主要制作方式有:

1、视频。主要用AE实现,能制作出很炫的效果,但成本较高,业内都是按秒计算。

2、使用canvas制作,这种方式可以制作出像以前的flash一样的动画,效果没视频酷炫,但这类动画既可以看,又可以在播放途中自然地添加交互,用原生代码来写,难度非常大,推荐使用createjs、egret、layabox和cocos引擎工具等。

3、使用H5 css3制作,这种方式也能像方式2一样制作出动画,但制作难度和复杂度都比方式2大,而且但是受限于手机硬件问题,暂不推荐这种方式。

案例:

(1)薛之谦史上最疯狂的广告

首页是模拟的薛之谦微博界面,开始滑动不几下至后画面一黑,薛之谦出现在画面里开始讲导演让他代言腾讯动漫的原因和过程,内容结合了二次元世界人民喜欢的腐(两个男的在一起)、骚(因为一个巧克力少年被全校女生喜欢)、逗(被面瘫少女报复),最后煽情得抱着一个动画女主走向千山万水,原来这时候才是正式开拍宣传海报,一声action薛之谦被定格在海报上。

体验地址:薛之谦史上最疯狂的广告

(2)一镜到底,一刀未剪的大剧发布

跟随视线的深入,在色彩斑斓的画面中回顾那些很火很热的剧集和综艺,轻松愉快的BGM,个性分明的大咖,光彩夺目的荧屏巨星逐一呈现在画面中。在屏幕下方戳一戳优酷图标,画面就会变换为万花筒。在H5的最后呈现YOUKU会员推广的界面。

体验地址:优酷:一镜到底,一刀未剪的大剧发布

(3)劳斯莱斯BlackBadge化身黑暗骑士

这是一个目前来看非主流的快闪类型,提供给大家以启发思路。本H5案例采用快闪加图文切换的形式来展现,黑色的主色调以大气和高贵唯美的存在整个案例中,配合诸多经典黑色美学电影的精彩片段,即体现了对黑色美学的致敬又突出了新车型BlackBadge也融入了黑色美学的特质。

体验地址:劳斯莱斯BlackBadge化身黑暗骑士

全景交互

全景交互指将用户置于一个360度环绕的图片/视频环境下进行沉浸式的体验,用户可以通过转动手机或滑动屏幕来看这个环境里不同角度的内容并进行交互。如果将内容分成左右两个屏,带上VR眼镜,则可以进行VR体验。此玩法比较适合的场景有虚拟全景展示、身临其境的实景展示或活动现场展示。与此类似的还有商品的360度展示,用户拖动商品即可看到不同角度下商品的样子。

相关技术主要是3d旋转操作、陀螺仪方面的技术,全景图插件有造物节使用的css3d-engine,全景视频组件有Valiant360,还有一些收费组件如krpano。

案例:

(1)吴亦凡陷黑客门,化妆间私密外泄

以吴亦凡陷入黑客门为引子,通过用户的好奇心,引导用户观看,顺便进行品牌宣传。

体验地址:吴亦凡陷黑客门,化妆间私密外泄

(2)我们i音乐

进入页面是宣传海报,提示框内滚动显示品牌相关消息,点击进入3D场景,360度旋转手机可以全景观看,按照场景提示操作,4个不同场景会播放不同的音乐,在场景中的很多元素上设置了品牌LOGO,实现宣传推广,点击“查看详情”跳转到官方微博。

亮点:3d全景的画面效果颜色鲜艳丰富,4个场景都有小互动,细节之处做得很精致。人物也画得相当细致,加上点击播放的音乐,整体风格很活泼生动。

体验地址:我们i音乐

(3)肯德基VR虚拟公益艺术体验馆

进入页面选择体验KFC公益艺术虚拟体验馆的方式:360度全景模式orVR眼睛模式,进入体验馆之后点击地面上的展厅地图可以知道体验馆主要分为四个区:体验馆大厅,公益艺术画作展,我的微信好友厅,公益艺术画作展。点击画作展上的画作即可更好的欣赏画作,点击画作右下角按钮,可了解画作详细信息,进入微信好友厅,即可看到自己分享出去的好友头像。

亮点:两种可选择的体验方式都是很有身临其境感的,体验馆让人感觉就在眼前,很真实,还有李宇春做导游。

体验地址:肯德基VR虚拟公益艺术体验馆

多屏互动

多屏互动指在多个屏幕上体验活动,各自的操作会同时反应到其他屏幕上,一般以双屏互动为主。玩法有多人合作或竞技、你画我猜、一问一答、情侣互动、线下与现场观众互动、多个屏幕拼起来看视频等,也可以把手机作为遥控手柄,用大屏幕来显示。制作此类活动时,切记注意场景,上百人的大场和十几个人的中场和几个人的小场是不同的,策划上完全不同,大屏只有一个,人一多就要考虑到展示的问题,要么只实时展示战绩,要么只展示一瞬间的头像(主区域,视动作而定,比如一次击杀、一次抢赢,夜店霸屏也是不错的参考)。十几人和几人的场基本展示上不用担心,可以全部展示。接下来就是形式,其实很多都可以借鉴其他实体游戏或现有的游戏,比如贪吃蛇大战。信步互动是国内最早尝试多屏互动的公司之一,很多案例做的也不错。

相关技术主要是通过websocket或轮询接口进行同步通信和更新画面的内容,对实时在线要求不高的,可以不用websocket技术。我们在实际制作中后端一般采用node.js。

案例:

(1)CF手游&品客组队大战僵尸

①剧情介绍,手游打僵尸,用高能量“薯片”做弹药,急需支援弹药;②选择模式-单人模式,左手“瞄准”怪兽,右手“扔”手雷,限时杀怪得分,根据游戏成绩决定是否获礼包;③选择模式-双人模式,角色A选择“双人模式”生成二维码,角色B扫码进入,角色A点击开始,A打怪,同单人模式,B“装弹”,即不停向上滑动“薯片”,装到包装里,为A提供弹药;④根据游戏成绩(单人/双人),获得积分礼包/下载CF手游。

体验:“双人双手操作”,虽然有时候左手“瞄准”会有一些卡顿,但“雷爆”的那一刻体验还是蛮爽的!H5小游戏虽然与原生H5手游体验上有一定差距,但在H5营销案例上,已属很赞了

体验地址:CF手游&品客组队大战僵尸

(2)七夕节“梅赛德斯-奔驰”

以鹊桥会为主题,扫码进入页面,摇动手机,画面开始展现,一台奔驰汽车试过桥面,到达红色的爱心交汇的地方,画面最后是一台红色奔驰车朝着画面外,打开了明亮的车灯。

体验地址:七夕节“梅赛德斯-奔驰”

(3)爱9就在一起

打开案例就是一个爱不停炖的爱就在一起的画面,点击画面就会进入到下一个页面,点击图标可从两种性别中选择其中一种,然而点击不同的性别视频里的内容也不相同。点击后进入到下一个页面,这个页面可选择单屏也可选择双屏,单击双屏即可扫码邀请你的另外一个他与你一起观看观看电影,点击单屏就会进入到一个可观看的视屏。

体验地址:爱9就在一起

(4)微信线下多人飞机游戏

微信无现金日的活动现场提供了一个可以让多人同时玩的飞机游戏。游客用手机操作飞机射击,当达到了一定分数就可换取礼物。在大屏幕上会显示多人一起玩的游戏画面。这种方式增强了主办方与游客、游客之间的互动,也减少了游客的排队时间。飞机游戏的设计,也让人想起了第一款微信游戏就是飞机游戏,有一种回归初心的感觉。

(5)信步互动投篮球小游戏

用手机控制篮球的方向和速度,瞄准篮框投球,最后15秒,篮框会移动,增加了游戏难度,游戏还可以与公众号进行关联,典型的线下吸粉神器。

如何创意如泉涌?

操千曲而后晓声,观千剑而后识器。

要有好的想法,平时就要见多识广,多看看别人的案例,积累一定量的创意。

199case网站收录了很多优秀的H5案例,可以看到完整的鲜活的设计,从加载动效、到交互到分享指引的每个细节都值得借鉴。至于积累H5特效,fff这个网站,里面有一些酷炫有趣的特效可以参考。

总结

H5在未来十年都会是web的主流形式,现在很多APP、VR、AR与H5都有结合点,对于营销而言,移动端的富媒体广告形式,H5更是不二人选。了解H5带来的新能力及其带来的玩法,多看案例,在构思策划活动时也可以翻看一下这篇文章,你就找到灵感了,然后就是升职加薪,走向人生巅峰…

作者微信号:houtiemin

扫码关注获得更多资讯、创意、资料

�$��M*2

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:还怕没灵感,H伍玩的方法知多少