提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
这是赵四教你做H5系列教程第一篇——三大实用交互点攻略。
最近最火的手游,莫过于阴阳师了。
有网友吐槽,这游戏就是一个讲述主角安倍神明因为抽不到SSR卡,从欧洲人逐渐变成非洲人黑化的故事...
身为非酋的你,看到朋友圈每天都有人在晒他抽到的SSR,是不是颇为心动但又无奈一直抽不到?
抽不到不要紧,你可以假装你抽到了...大家可以先扫扫下方二维码体验一下。
这是啥?
这是我用iH5制作的简便型图片生成器,大家可以自行输入自己的ID和大区名字,保存一张假装自己抽取到SSR的图片,将其发到朋友圈娱乐娱乐~
这是怎么做的?
简单的交互过程就不过多阐述了(如果有学习需求的,点击H5页面二右下角按钮联系作者)。这里主要向大家介绍,
三个关键交互点:
一、制作弹框性选项
功能选择:时间轴
选择时间轴功能后,将弹框的素材安置在时间轴下,然后在素材下设置轨迹,这样就可以通过设置时间节点的位置、大小来控制这个素材的变化了。
这里必须给大家提个醒,想让时间轴控制某个素材的变化,需要将其放在时间轴下面作为子对象,一个时间轴可以控制N个子对象。
所以,我的做法是:设置单位为1秒、播放倍数为5倍的时间轴,以此控制弹框的展开。
关于弹窗的效果,如果再花点心思还可以做成渐变式的交互体验,比如下面这两种效果:
还有一个交互细节,当我们点了“大天狗”时,式神框会自动显示出相对应的文本,那这个是怎么做的呢?
很简单——先在框内预设好全部文本并隐藏,点击弹框,触发其显示即可。
需要注意两点:
二、将输入的文本嵌入到图片上
功能选择:输入框、变量、文本
这个交互看起来好像很麻烦,但实际上简单得不得了,只需明白一个逻辑:
理解逻辑后,改参数就很简单了。
我设置了俩输入框,给用户输入名字和大区,分别设置俩个变量并且绑定起来,命名为a和b,所以当用户输入任何内容,都能被变量记录起来,并以$a和$b提取出来。
然后在图片的相应位置放置俩空白文本,让点击按钮触发一个设定文本文字为$a、$b的事件即可。
效果如下——
这种交互挺实用的,比如网易的二次元社区在iH5上发布的《万圣节欧非属性测试》H5,就是用到设定文本文字功能。
这种文字关联提取式的玩法,更多创意就靠大家去发掘了。
三、打印画布,长按保存整幅图片
功能选择:画布
虽然对H5页面的长按会出现保存的按钮,但是存下来的有时只是局部的素材,比如:
这是因为H5素材的分层导致的,假如长按的区域里有多层PNG素材堆砌,保存下来的可能是最顶层的某张PNG。而iH5的画布功能本质上是能将整幅图片拷贝到Canvas里,让图片得以按照指定区域进行封装打印。
具体操作如下:
(1)将需要打印的图片内容放置在画布下
(2)在指定区域放置一个空白图片作为容器
(3)打印画布内容至该空白图片上
紧接着,我们只需对某个按钮设置画布打印事件触发即可。
值得提醒的是:
(1)需要打印的内容必须全部放置在画布下。
(2)打印前,必须调整好空白图片的尺寸和位置,这些参数会直接影响图片打印的效果。
(3)画布功能除了可以打印图片,还可以用于复杂时间轴动画等内容的WebGL加速优化。(将时间轴放置在画布下)
以上就是该SSR生成器在制作上的交互应用教程啦,这三类交互都比较实用,想必发挥空间还有很多。
如果在交互实现上还有其他不懂的,就在下面留言吧,尽快给你回复~
不说了,我要去朋友圈晒我的9个SSR了,拜了个拜~
PS:如果有啥想学的H5交互形式,请务必告诉我&关注我。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册