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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
H5速成7| 阴阳师SSR式神生成器制作攻略
0.0°
2017-02-15 原创文章 教程 举报 10539 20 81 8

这是赵四教你做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交互形式,请务必告诉我&关注我。

更新:2017-02-15

收藏

20人已收藏

尼姑拉丝赵四

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

  • 27

    作品

  • 2292

    粉丝

  • 8

    关注

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

    猜你喜欢

      2017-02-15 原创文章 教程 举报 10539 20 81 8

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

      0.0°

      你确定要举报H5速成7| 阴阳师SSR式神生成器制作攻略

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年11月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      81
      20
      8

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

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

      登录

      手机号

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

      登录
      第三方账号登录