H5速成7| 阴阳师SSR式神生成器制作攻略

原创文章 分类: 教程 版权:
6861 13 75 8
2016-11-24
47.9
编辑推荐

这是赵四教你做H5系列教程第一篇——三大实用交互点攻略。


Image title


最近最火的手游,莫过于阴阳师了。


有网友吐槽,这游戏就是一个讲述主角安倍神明因为抽不到SSR卡,从欧洲人逐渐变成非洲人黑化的故事...


身为非酋的你,看到朋友圈每天都有人在晒他抽到的SSR,是不是颇为心动但又无奈一直抽不到?


抽不到不要紧,你可以假装你抽到了...大家可以先扫扫下方二维码体验一下。

Image title

这是啥?


这是我用iH5制作的简便型图片生成器,大家可以自行输入自己的ID和大区名字,保存一张假装自己抽取到SSR的图片,将其发到朋友圈娱乐娱乐~

Image title


这是怎么做的?



简单的交互过程就不过多阐述了(如果有学习需求的,点击H5页面二右下角按钮联系作者)。这里主要向大家介绍,


三个关键交互点:


  • 如何做弹框型选项
  • 如何将输入的文本嵌入至图片
  • 怎么样才能让用户长按保存整幅图片


一、制作弹框性选项


功能选择:时间轴

Image title


选择时间轴功能后,将弹框的素材安置在时间轴下,然后在素材下设置轨迹,这样就可以通过设置时间节点的位置、大小来控制这个素材的变化了。


这里必须给大家提个醒,想让时间轴控制某个素材的变化,需要将其放在时间轴下面作为子对象,一个时间轴可以控制N个子对象。


所以,我的做法是:设置单位为1秒、播放倍数为5倍的时间轴,以此控制弹框的展开。

Image title

关于弹窗的效果,如果再花点心思还可以做成渐变式的交互体验,比如下面这两种效果:

Image title

还有一个交互细节,当我们点了“大天狗”时,式神框会自动显示出相对应的文本,那这个是怎么做的呢?


很简单——先在框内预设好全部文本并隐藏,点击弹框,触发其显示即可。

Image title

需要注意两点:


  • 弹框列表下的各个透明按钮尽量留合适的间隙,避免错误触碰。
  • 将全部文字放在一个容器内,并在每个文字下设置当其显示时,隐藏同层控件的事件,减少交互上的运算步骤。


二、将输入的文本嵌入到图片上


功能选择:输入框、变量、文本


这个交互看起来好像很麻烦,但实际上简单得不得了,只需明白一个逻辑:

Image title

理解逻辑后,改参数就很简单了。


我设置了俩输入框,给用户输入名字和大区,分别设置俩个变量并且绑定起来,命名为a和b,所以当用户输入任何内容,都能被变量记录起来,并以$a和$b提取出来。


然后在图片的相应位置放置俩空白文本,让点击按钮触发一个设定文本文字为$a、$b的事件即可。


效果如下——

Image title

这种交互挺实用的,比如网易的二次元社区在iH5上发布的《万圣节欧非属性测试》H5,就是用到设定文本文字功能。

Image title

这种文字关联提取式的玩法,更多创意就靠大家去发掘了。



三、打印画布,长按保存整幅图片


功能选择:画布


虽然对H5页面的长按会出现保存的按钮,但是存下来的有时只是局部的素材,比如:

Image title

这是因为H5素材的分层导致的,假如长按的区域里有多层PNG素材堆砌,保存下来的可能是最顶层的某张PNG。而iH5的画布功能本质上是能将整幅图片拷贝到Canvas里,让图片得以按照指定区域进行封装打印。



具体操作如下:


(1)将需要打印的图片内容放置在画布下

(2)在指定区域放置一个空白图片作为容器

(3)打印画布内容至该空白图片上

Image title

紧接着,我们只需对某个按钮设置画布打印事件触发即可。



值得提醒的是:


(1)需要打印的内容必须全部放置在画布下。

(2)打印前,必须调整好空白图片的尺寸和位置,这些参数会直接影响图片打印的效果。

(3)画布功能除了可以打印图片,还可以用于复杂时间轴动画等内容的WebGL加速优化。(将时间轴放置在画布下)



以上就是该SSR生成器在制作上的交互应用教程啦,这三类交互都比较实用,想必发挥空间还有很多。



如果在交互实现上还有其他不懂的,就在下面留言吧,尽快给你回复~



不说了,我要去朋友圈晒我的9个SSR了,拜了个拜~


PS:如果有啥想学的H5交互形式,请务必告诉我&关注我。

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者,定期安利H5交互教程

1169粉丝/7关注

原创小生
不看吃亏系列丨转盘抽奖H5全套教程2017年首个百万级PV案例居然是这个H5!!

尼姑拉丝赵四

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者,定期安利H5交互教程

原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by © 2008-2017 UI.CN