H5速成6丨用时间轴功能打造平行世界H5

原创文章 分类: 经验/观点 版权:
934 7 7 2
更新于:2017-02-15
4.0
编辑推荐

Image title


Hello,大家好,我是赵四,又来给大家安利实用的H5交互教程啦!


这一期教程主要涉及了一个比较溜的理念——平行世界


话说平行世界上有很多个自己,世界1的自己可能是名消防员;世界2的自己却是名警察,有着不同的人生;此时世界1的你在做这件事,世界2的你却在做另外一件事...


Image title


有点像电影《星际穿越》的多维空间

像《彗星来的那一夜》的平行时空交错

像《蝴蝶效应》的平行时空连锁反应

又像美剧《迷失》的多条时间线...


如果将平行世界理念运用到H5制作上,会产生什么有趣的玩法?

Image title

点击按钮,即可看到另外一个世界的自己

左右两边代表不同的故事..

这种极具对比性的效果是不是很赞!!



本期教学案例:《你知道另一个世界,还有一个你吗?》、《纯白闺蜜》

(案例超链接在文末)

制作工具:iH5.cn

制作难点:时间轴的控制、滑动时间轴下遮罩的使用。

Image title

听说智商超过120的人才能看懂

Image title

好啦开个小玩笑

只要多关注赵四的交互教程

从H5菜鸟进阶到全能选手

不是梦!

扯淡完,下面正式开始教学哈


一、上下分镜效果制作


《你知道另一个世界,还有一个你吗?》画面上设有上下两个分镜,分别代表两个平行世界的人物故事。


Image title


具体涉及的分镜效果和交互有二:


  • 页面的3D翻转
  • 主画面动画模块的上下翻转


1、页面的3D翻转


Image title


这跟jQuery框架搭建的滚动3D动效相当,这类常用在PC端的动效在移动端上一样可以发挥出应有的3D翻转效果。


Image title

▲jQuery3D翻转效果


如果你要做这种翻转,应该怎么办?很简单,选中编辑器舞台下的页面,修改其向前/后翻页效果为“向上/下方块旋转”即可。细看了一下,里面还预设有将近30种不同的翻页动效,这些不常见但都挺实用,能丰富页面翻转时的视觉体验:


Image title


2.主画面动画模块的上下翻转


Image title


控制主画面上下翻转的方法其实很简单,单从效果图上看,不难看出它只是旋转了一周360°。因此我们把素材放在同一个时间轴下,设置关键帧控制旋转角度即可,具体设置如下:


Image title


巧妙的是,这个翻转的动作受一定的交互机制控制(所以时间轴取消了自动播放)。这支H5的原设计师增设了一个按钮,用户需要点击它才能触发翻转效果的开始。


值得一提的是,按钮的往上偏移的动画效果也是用时间轴做的,方法大同小异,设置两个关键帧,第二关键帧调整Y坐标即可,这里就不赘述了。


若想了解更多这支H5的详细时间轴动效实现原理,可以参考赵四的往期文章:《深度揭秘上百种H5动效(不看可能会后悔篇)》


二、左右分镜效果制作


以往左右分镜效果玩的比较多的是视频类H5,比如网易去年发布的《二分之一的生活》,直接把视频对半,效果不错但交互体验很差,唯一的交互只有开始时的触发视频播放。


Image title


假如不用视频呢?有交互的左右分镜效果能做么?当然能!《纯白闺蜜》这支H5就是:

Image title

左右代表两个人物、两个故事,我们向左/右滑动后,会看到不同的画面。下面教大家如何用工具还原这支H5,首先我们先看看原理,《纯白闺蜜》这支H5每个页面其实大同小异,因此只需搞明白一个页面的实现方法,其他页面就可以轻松搞定了。页面分为三部分:

  • 居中平分的分镜
  • 图片1
  • 图片2

Image title


经研究,这其实是两张同尺寸的图片叠加,将上层图片附加遮罩效果(剪切功能),通过控制遮罩的宽度来控制遮罩范围。当遮罩宽度为0时,下层的图片2会显示完整;当宽度为1/2时,则刚好跟图片2平分画面(两张图片尺寸一致);当宽度调整回正常尺寸,画面是图片1。



我们常用透明按钮(开启剪切)来做遮罩,何为剪切功能?这里温习一下:


Image title


意思就是说,当我们将素材放在透明按钮下,将透明按钮的剪切功能打开,我们调整透明按钮的宽度时,随着宽度减小,超过宽度边缘的素材将无法显示。


因为这是需要左右滑动来控制透明按钮遮罩的宽度,所以我们需要用到滑动时间轴功能。



具体实现如下:


Image title


关于那些闪烁+位移的提示图标,都可以用时间轴+轨迹做出来,只需调整素材的坐标、透明度等属性即可,这里就不赘述了。



意想不到,在我写完这篇交互教程时,iH5.cn也刚好推出了一个类似效果的模板:


Image title


里面涉及的交互还更多,包括输入文字、上传照片等,如果想学的话快留言哈!具体的交互延伸会在下期分享~



另外呢,网易的《二分之一的生活》还附有一个小彩蛋,就是双屏互动想学吗?快告诉赵四吧,看大家意愿安排教程~



好了,这期的交互教程就到此为止,咱们回顾一下这次的难点:



  1. 两个分镜:上下旋转&左右滑动
  2. 上下旋转是用时间轴制作(调整旋转角度)
  3. 左右滑动是用滑动时间轴制作(调整遮罩的宽度)


大家记得要多加学习,只要掌握好时间轴的关键帧设置、透明按钮的遮罩应用,这类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

尼姑拉丝赵四

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

2040粉丝/8关注

原创小生
震惊!这个H5居然是在线聊天室!(内附完整教程)网易的爆款H5,手把手教你做!

尼姑拉丝赵四

尼姑拉丝赵四

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

原创小生

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