提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
Hello,大家好,我是赵四,又来给大家安利实用的H5交互教程啦!
这一期教程主要涉及了一个比较溜的理念——平行世界
话说平行世界上有很多个自己,世界1的自己可能是名消防员;世界2的自己却是名警察,有着不同的人生;此时世界1的你在做这件事,世界2的你却在做另外一件事...
有点像电影《星际穿越》的多维空间
像《彗星来的那一夜》的平行时空交错
像《蝴蝶效应》的平行时空连锁反应
又像美剧《迷失》的多条时间线...
如果将平行世界理念运用到H5制作上,会产生什么有趣的玩法?
点击按钮,即可看到另外一个世界的自己
左右两边代表不同的故事..
这种极具对比性的效果是不是很赞!!
本期教学案例:《你知道另一个世界,还有一个你吗?》、《纯白闺蜜》
(案例超链接在文末)
制作工具:iH5.cn
制作难点:时间轴的控制、滑动时间轴下遮罩的使用。
听说智商超过120的人才能看懂
好啦开个小玩笑
只要多关注赵四的交互教程
从H5菜鸟进阶到全能选手
不是梦!
扯淡完,下面正式开始教学哈
一、上下分镜效果制作
《你知道另一个世界,还有一个你吗?》画面上设有上下两个分镜,分别代表两个平行世界的人物故事。
具体涉及的分镜效果和交互有二:
1、页面的3D翻转
这跟jQuery框架搭建的滚动3D动效相当,这类常用在PC端的动效在移动端上一样可以发挥出应有的3D翻转效果。
▲jQuery3D翻转效果
如果你要做这种翻转,应该怎么办?很简单,选中编辑器舞台下的页面,修改其向前/后翻页效果为“向上/下方块旋转”即可。细看了一下,里面还预设有将近30种不同的翻页动效,这些不常见但都挺实用,能丰富页面翻转时的视觉体验:
2.主画面动画模块的上下翻转
控制主画面上下翻转的方法其实很简单,单从效果图上看,不难看出它只是旋转了一周360°。因此我们把素材放在同一个时间轴下,设置关键帧控制旋转角度即可,具体设置如下:
巧妙的是,这个翻转的动作受一定的交互机制控制(所以时间轴取消了自动播放)。这支H5的原设计师增设了一个按钮,用户需要点击它才能触发翻转效果的开始。
值得一提的是,按钮的往上偏移的动画效果也是用时间轴做的,方法大同小异,设置两个关键帧,第二关键帧调整Y坐标即可,这里就不赘述了。
若想了解更多这支H5的详细时间轴动效实现原理,可以参考赵四的往期文章:《深度揭秘上百种H5动效(不看可能会后悔篇)》
二、左右分镜效果制作
以往左右分镜效果玩的比较多的是视频类H5,比如网易去年发布的《二分之一的生活》,直接把视频对半,效果不错但交互体验很差,唯一的交互只有开始时的触发视频播放。
假如不用视频呢?有交互的左右分镜效果能做么?当然能!《纯白闺蜜》这支H5就是:
左右代表两个人物、两个故事,我们向左/右滑动后,会看到不同的画面。下面教大家如何用工具还原这支H5,首先我们先看看原理,《纯白闺蜜》这支H5每个页面其实大同小异,因此只需搞明白一个页面的实现方法,其他页面就可以轻松搞定了。页面分为三部分:
经研究,这其实是两张同尺寸的图片叠加,将上层图片附加遮罩效果(剪切功能),通过控制遮罩的宽度来控制遮罩范围。当遮罩宽度为0时,下层的图片2会显示完整;当宽度为1/2时,则刚好跟图片2平分画面(两张图片尺寸一致);当宽度调整回正常尺寸,画面是图片1。
我们常用透明按钮(开启剪切)来做遮罩,何为剪切功能?这里温习一下:
意思就是说,当我们将素材放在透明按钮下,将透明按钮的剪切功能打开,我们调整透明按钮的宽度时,随着宽度减小,超过宽度边缘的素材将无法显示。
因为这是需要左右滑动来控制透明按钮遮罩的宽度,所以我们需要用到滑动时间轴功能。
具体实现如下:
关于那些闪烁+位移的提示图标,都可以用时间轴+轨迹做出来,只需调整素材的坐标、透明度等属性即可,这里就不赘述了。
意想不到,在我写完这篇交互教程时,iH5.cn也刚好推出了一个类似效果的模板:
里面涉及的交互还更多,包括输入文字、上传照片等,如果想学的话快留言哈!具体的交互延伸会在下期分享~
另外呢,网易的《二分之一的生活》还附有一个小彩蛋,就是双屏互动。想学吗?快告诉赵四吧,看大家意愿安排教程~
好了,这期的交互教程就到此为止,咱们回顾一下这次的难点:
大家记得要多加学习,只要掌握好时间轴的关键帧设置、透明按钮的遮罩应用,这类H5就信手拈来了。
拜了个拜~咱们下期再见。
本期H5链接:
《你知道另一个世界,还有一个你吗?》http://db84f609426b.ih5.cn/idea/RyY_l9h
《二分之一的生活》http://news.163.com/special/2015ending/
《纯白闺蜜》http://www.h5-share.com/h5/mengniu/?from=iguoguo.net
《你 | 我》http://2ac75eb5808a.ih5.cn/idea/wxIyHZ5
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册