恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
不看吃亏系列丨转盘抽奖H5全套教程
0.0°
2017-02-22 原创文章 经验/观点 举报 17723 25 78 12

Image title


春节时,广汽传祺的一个抽奖H5的浏览量突破420万,成为2017年首个现象级H5轻广告。


详情可以查看往期文章《2017年首个百万级PV案例居然是这个H5!!》

Image title


抽奖H5的实用性不用多说了,因为传播方便,即开即玩,它完全适用于节日营销、商家推广、品牌传播、用户导流等场景。

 

那么,当今抽奖H5的需求大吗?

 

十分大!但通常商家的推广经费不足以支撑动辄4、5万的外包定制费用...所以,如果你学会用工具制作同等效果的抽奖H5,这些有需求的商家就是你的金主。

 

今天赵四就教大家使用ih5.cn从零开始,一步一步,做出一个完整的抽奖H5。

 

目前用于抽奖的H5有哪些形式?

 

试着整理了一下,发现还挺多的——


Image title


这些看似完全不同的抽奖H5,其实背后的原理几乎是一样的,所以只需搞懂其中一类,就可以举一反三了。

 

为了大家学到真功夫,这次赵四在开源网站上搜到了一个名为《Canvas自适应宽度大转盘抽奖代码》的转盘抽奖H5当作教学对象,效果如下:


按正常的套路来说,一个完整的转盘抽奖,通常是这样的——


Image title


OK,弄明白整套流程之后,我们就逐步拆分讲解。


一、时间轴——大力出奇迹!让转盘转起来!!

Image title

转盘转动效果实质是转盘内轮的旋转角度不断增大,做绕圆心的单向运动罢了。

So...我们要用到时间轴功能,不断调整旋转角度,实现绕圆心运动效果。


1.转盘素材的导入


Image title


类似PS的图层层次关系,我们依次把背景图、外轮、内轮、按钮等素材导入。

 

这里为新手们提个醒,因为后续的页面数比较多,我们需要在舞台下添加“页面”,再将刚上传的素材Ctrl+x/v至页面下即可。


2.转盘转动效果(重点)


Image title



如你所见,转盘转动是通过数个时间轴预设好的,诀窍在于由中奖概率机制判定是否中奖(下面会讲到),以此控制不同结果的时间轴播放。

 

以其中一条时间轴为例,关键点在于修改关键帧时间节点的旋转角度。

Image title

时间轴此时关键帧的旋转角度增幅不太一致,这是遵循转盘转动速度先快后慢的原则。在时间间隔一致的前提下,旋转角度的增幅越大,旋转得越快,加速效果也越平滑。

 

你可以先设数个时间间隔为0.5秒的关键帧,然后在第二关键帧处设一个旋转角度为X,以此作为后面旋转角度增幅的重要依据。

 

比如后续关键帧分别设为X、3X、10X、12X、13X、13.5X...

如果想偷懒,可以按照上面配图的数值设置。


明白原理后,我们就照版煮碗,做出五条时间轴,命名为不同的奖项名称。

 

有几点需要注意:

 

①负责旋转的内轮素材,必须是正圆的PNG,且保证四面相切不留空白,否则不能绕圆心旋转。

②最后一帧的N值,决定转盘最后停止时的位置,需要手动调整。

③把全部时间轴全部装在“容器”功能下,方便后序的操作和管理。

 

如果初学者不清楚如何使用时间轴,可以参考下方教学视频(声音挺nice的):


https://v.qq.com/x/page/f0173cwckrh.html


二、计数器——设置中奖概率,中不中奖就靠它!


中奖概率看起来很玄乎,实质是一个随机生成的过程,这恰好可以用计数器的“生成随机数”事件代替。


Image title


这可以理解为常见的数学问题——随机抓小球。我们预设好几个数,然后让计数器随机生成一个数,当随机生成的数恰好等于我们预设的数字,即为中奖。

 

明白原理,接下来就好办了。对此我们需要做两件事


①添加一个透明按钮,以触发计数器能生成随机数


透明按钮的添加十分简单,点击左侧“透明按钮”组件,在“GO”图标的上方拖拽一片区域,这片区域就是透明按钮的触发区。


在透明按钮下添加一个触发条件为轻触,让计数器生成随机数的事件——

Image title

上面是该触发事件的属性界面,里面填写的数值范围就决定了这个H5的中奖几率。


数值范围越大,相当于概率的分母越大,中奖概率越小。


②在计数器下插入事件,对生成的随机数进行判断


计数器生成随机数后,只需播放其中一条时间轴&隐藏其他,这两个步骤都是基于同一个触发条件——当数值等于X,因此我们可以用到“事件组”功能来进行组队式触发。


Image title

两个事件:从头播放、隐藏同层控件。有两点需要注意:


①上面提到的“隐藏同层控件”,由于ih5.cn不支持把时间轴选为对象,所以我们转个弯,用容器再把时间轴分别装起来,让几个容器变成同层关系,这时选容器为对象,以此代表时间轴。

Image title

②由于上面预设的计数器生成随机数的范围是1-10,那么“不中奖”的数值范围就应当是填写为5-10


来到这里,先呼一口气,已经完成一半啦!转盘的雏形也出来了,我们预览看看效果。

Image title

因为转盘转得太快了,录屏的帧数跟不上,大家可以扫下方二维码预览此时的效果。


Image title


三、事件&数据库——信息反馈要做足!

 

站在用户体验角度,信息反馈是不能省的,用户抽完奖,中奖与否都要告诉用户。一般而言,可以采用跳转反馈页面——


Image title


新起一个页面,老套路,用容器把同类型的图片装起来。这些反馈图片需要跟前面生成的数值匹配,所以我们得在页面1的计数器下动手脚:

Image title

这个逻辑设置好了,那么跳转页面2的逻辑呢?

 

很简单,在每个转盘时间轴结束后跳转就OK了~!直接在时间轴下添加一个事件即可——


·触发条件:结束

   ·触发对象:舞台

     ·目标动作:跳转页面

       ·页面:页面2

Image title

三、数据库、二维变量、输入框——记录哪些人中奖了!

 

呼...终于来到最后一步了,咱们再坚持一下就完成了!!撸起袖子继续干!

 

这部分需要用到数据库跟二维变量,这俩货比较难也比较抽象。


为了照顾新手,我们先来初步认识一下这俩货:


数据库:可以理解为一个装数据的大容器,支持上传数据、提取预设好的数据。

二维变量:跟变量相似,扮演连接数据库的角色。同时也可以作为数据库提取时的临时存放地点。


数据库的应用,很容易搞混乱出错,所以我们得先捋清楚逻辑再动手:


①抽奖的结果必须记录

抽奖的结果决定于一开始生成随机数的计数器。

 

②中奖了的人要登记个人信息

登记需要输入,需用到输入框。


我们先在左侧功能栏里找到数据库功能,在舞台下添加一个数据库。紧接着,添加数据库下重命名为“奖品”的字段。


在页面1的计数器下的每个事件组下,分别添加“赋值”事件:

Image title

光是赋值,数据库此时还是没数据的,还需要在赋值后做一个“提交”的逻辑,我们干脆就利用前面的时间轴的事件组,设置数据库的提交。


Image title


此时,我们把舞台属性栏下的“微信登录”打开。预览试着抽一次,就可以在后台看到数据库记录下的结果了。


Image title


终于有点模样了...咱们继续~


按套路来说,抽奖H5都会要求大家填写相关信息,用输入框再适合不错了。

我们上传一个名为“信息登记”的素材,与输入框等一并装进容器下方便管理。

Image title

Image title


与此同时,在数据库下新增两个文本字段,用来装载用户填写的名字和微信号。这时,数据库后台的列表样式会是这样的:

Image title


在脑袋里记住这个画面,我们在输入框里绑定二维变量时要选的位置,就是根据这个而定的~


Image title


完成这步时,我们可以用$a[1][2]代表输入的名字会绑定到二维变量的一行二列处,同理$a[1][3]代表微信号会绑定到一行三列处。

 

这里有个难点,我们此时不能再次用“提交数据库”的事件了。


因为数据库的数据是以“行”作为基准的,这意味着我提交过一次的前提下,再次提交会导致新的数据另开一行,导致录入的数据对不上号。


可以这么理解,有一个篮子,我们放了一个苹果进去然后用包装纸封起来了,此时我们就不能再放新的苹果进去,只能用另外的篮子装。除非把包装纸拆掉,放新的苹果进去再包装回来。


那么,新的数据如何放进这个“篮子”里呢?用二维变量——


二维变量无形无色,是一个很虚的概念,结合上面的例子,我们可以理解成它是一双手:


撕开包装纸,然后把里面的苹果拿出来(输出旧数据),再连同新的苹果捏在手里(二维变量),重新放进篮子里(更新数据库)。


不妨将这个输出到更新的过程拆分:


①将数据库输出到二维变量——将原有苹果拿出来

 

我们以页面2的显示作为触发条件,设置数据库输出到二维变量的事件。

Image title

因为当前数据库只有“奖品”的数据,所以脑补二维变量此时的列表应该是这样的——

Image title

②赋值新数据,更新数据库——将新的苹果放到篮子里

Image title

将用户在输入框输入的这两个值分别赋值到二维变量中,此时二维变量的列表是这样的——

Image title

紧接着!最后一步!将全部苹果放进篮子里——更新数据库!!!


Image title


大功告成

为了方便大家练习

我已经把这个案例的素材上传了

大家可以在文章右下角自行下载

(剩下一些无关紧要的逻辑,我就不啰嗦了

不然篇幅真的很长很长...有不懂的,尽管问我哈)


想搞定二维变量的难点,记住这个操作顺序就可以了:


①先赋值,接着提交一次数据库,形成“旧数据”

②将旧数据输出到二维变量

③将新数据以X行X列的形式赋值到二维变量中

④以二维变量更新数据库


憋着尿看到这里的朋友,赵四给你跪了,都是爱...

 

这篇全案教程,有点长,但不求别的,只为大家能学到真功夫。

 

先来感受一下最终的效果:


Image title


文首说好的惊喜呢?!

长久以来

一直没机会表达我对大家的爱

趁这个机会

给广大支持赵四的粉丝们送一波福利

发红包

怎么拿?

去上面的转盘H5里抽!

抽中,俺就给你发~ 


仅是个人立场的一份心意,如果争议,解释权归我~(嘿嘿嘿)

 

活动期限是多久?那就要看我钱包里还剩多少钱了...(抽中一粒瓜子是随机红包..大家悠着点...)

 

中奖几率有多大?大家尽管抽,能中奖算你赢。(微笑脸)


想学更多实用的H5,记得继续关注赵四的动向啦~

咱们下期见,拜拜~


为了完成这篇教程,忍了三小时的尿,大兄弟你就不为我点个赞么 Orz

更新:2017-02-22

下载
收藏

25人已收藏

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

  • 27

    作品

  • 2292

    粉丝

  • 8

    关注

  • 震惊!这个H5居然是在线聊天室!(内附完整教程)
  • 网易的爆款H5,手把手教你做!
  • 3个小时150万UV!网易的童年 H5刷屏了!
  • 视觉逼格指南:几何抽象风格神器

    猜你喜欢

      2017-02-22 原创文章 经验/观点 举报 17723 25 78 12

      不看吃亏系列丨转盘抽奖H5全套教程

      0.0°

      你确定要举报不看吃亏系列丨转盘抽奖H5全套教程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年02月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      78
      25
      12

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录