一个交互功能,居然能玩出N种花样!

原创文章 分类: 经验/观点 版权:
9987 108 106 7
2017-03-08
52.4
首页推荐

Image title


H5近两年在国内持续发酵,使得交互(interaction)这一概念从网站设计逐渐延伸到H5上。

 

就像鱼离不开水,H5离开了交互,便失去了HTML5语言所赋予页面形态的价值。说白了,如果H5弱化了交互,它充其量只是一个移动页面的滑动PPT,根本谈不上是H5。

 

“交互功能就像橡皮泥,只要发挥想象,它就能捏成各种形状。”这是某位不愿意露脸的专业设计师原话。只要发挥想象,即便是同一个交互功能,也能延伸出各式各样的戏法。

 

接下来以专业H5创作工具—iH5.cn为教学对象,选用大家最常用的时间轴功能,一步步深入探究它能延伸出的各种戏法。


1.先别急着动手,时间轴究竟为何物?


如果对时间轴的概念不清晰,说再多也是白费,我们先来科普一下时间轴。


Image title


如果在初中电脑课上有学过Flash制作小汽车运动的朋友,看到时间轴的界面时应该会感到很熟悉。没错,时间轴的概念类似于Flash动画制作,通过关键帧控制对象在规定时间内的运动轨迹。

 

想用时间轴,请务必记住以下操作逻辑顺序:时间轴——对象——轨迹——关键帧——修改关键帧属性。

 

那么,时间轴最常见、最简单粗暴的应用是啥呢?


2.规律性的几何运动

 

只要打开时间轴的循环播放功能,它就变成了无限循环的时间单元,所以我们能用时间轴延伸出很多规律性的运动形态,打个比方——

 

(1)线性运动


Image title


就比如上面这个奔跑的男人,纯粹是径向的线性往返运动,它的原理跟上面提到的用Flash做小汽车运动是一样的,我们只需在时间轴上,用多个关键帧控制这个男人的X坐标就能实现了——


Image title


说到这里,要跟大家分享一个小技巧。大家注意到这个男人前进跟倒退的轨迹是刚好相反的。


因此我们在这类往返运动制作时,只需做好前进的轨迹,然后在时间轴下插入一个“结束——时间轴反向播放”的事件,这样能减少很多工序,又能对称两个运动轨迹。


(2)圆周运动


Image title


跟线性运动相似,圆周运动只不过是在关键帧上调整素材的旋转角度,这是换汤不换药的,最常见的应用就是模仿现实生活中的手表/时钟,让秒针、分针做周而复始的圆周运动。

 

假如把线性运动跟圆周运动同时放在同一个时间轴下,那么恭喜你,一个简单粗暴的时间轴动画完成了——


Image title


说到这里,不禁想吐槽一下...为什么圆周运动式的玩法这么独特!这么好玩!怎么这么少设计师用?

 

它明明可以产生很多交互上的化学反应!无论是预加载的Loading页,还是过渡页,圆周运动式的时间轴动画都能给用户一种独特的心理预期,比如这种——


Image title


希望往后能看到这类时间轴应用的化学反应吧,咳咳,有点跑偏了,我们继续...

 

3.不存在规律的运动

 

其实说不存在规律的运动有点笼统,其实说成仿真式视频效果会比较合适,因为这类往往会让你分不清它到底是时间轴动画,还是视频。

 

比如那位专攻时间轴动画的H5设计师小牙,他不久前的《门窗都关了,你就给我看这个?》H5——


Image title


案例跳转:http://db84f609426b.ih5.cn/idea/CDXN4E_


效果就跟用AE做的动画视频如出一辙,特别是那个全屏振动效果,这完全媲美AE上的wiggle(a,b)振动效果!只不过,小牙用的只是一个简单的“全屏振动”事件,就将这个效果复现了。


在这整套时间轴方案上看,设计师小牙让我们看到了时间轴的更多可能,用时间轴模仿动画视频,未尝不是一个很好的应用形式。

 

时间轴还能做什么?


4.用时间轴做高级动效   

 

时间轴动效的原理和原生的动效组件相似,都是通过在单位时间内,改变元素的位置、大小、透明度、旋转角度等促成相应的动效效果。


Image title


过去赵四就曾对时间轴的动效应用划分为两个维度进行讲解,分别是单位时间内控制单一属性/多个属性,现在重新拿出来给大家讲解——


单位时间内控制单一属性:


Image title


不同素材间存在上下层关系,如果属性一致,上层素材会默认遮盖下层素材。所以我们只要通过时间轴控制上层素材的坐标、大小、角度,直至覆盖下层素材,即可完成素材间的遮罩效果。


Image title


图中的遮罩看起来很炫,其实是一个中间镂空的PNG图,用时间轴控制由里往外放大,巧妙地利用了遮罩的视差效果。

 

可实现的遮罩效果还有很多,比如:

  • 渐进闭合遮罩
  • 渐变式遮罩
  • 弹窗显示

这些都可以根据实际需要实现。

 

另外,时间轴还支持素材的X/Y轴旋转,借此机制也可以做出伪3D的循环以及折叠效果。

 

以X轴旋转举例,只需在时间轴下设置两个时间节点,控制素材绕X轴做0°至90°旋转,就能做出素材“翻倒”、“双向折叠”的伪3D效果。


Image title


左右折叠的两张图需要保证边缘相切,且X坐标一致,这样在时间轴控制翻转时,才能仿真式地完成3D翻转效果。


看到这里,有没有觉得时间轴比你想象中复杂?以上只是时间轴控制一个属性而已,控制多个属性时,实现的动效效果更为惊艳!比如——

  • 橡皮糖式滑动效果(控制高度、Y坐标)
  • 重影效果(控制透明度、旋转角度)
  • 对折翻转效果(绕X坐标旋转)
  • 视差效果(控制剪切属性)
  • 360度物体展示(控制旋转角度、视距)

这里就不赘述了,如果有兴趣想了解各种时间轴&其他高大上动效,可以参考上期文章《深度揭秘上百种H5动效》


5.用时间轴做辅助

 

时间轴的灵活度很高,除了像上面提到的实现各种高大上交互,还可以作为辅助功能使用。此时可以将时间轴理解成导火线,用来引爆交互这颗重磅炸弹。

 

那么,它能“引爆”哪些交互?

  • 用时间轴的循环播放控制页面自动翻页
  • 时间轴用事件连接计数器,做成倒计时
  • 时间轴用事件连接动效组件,配合动效的延时触发,让动效的衔接更自然
  • 时间轴获取当前事件,制作按下1秒等敏捷类小游戏

Image title


当然时间轴的辅助性应用远不止于此,上面只是抛砖引玉,还有更多有趣&实用的技法,还需靠大家去发掘。

 

功能就放在那儿,看似是死的;但只要懂的思考,它就能活起来,甚至能让你的H5作品迸发出更多的光彩。


现在,你能联想出哪个功能的延伸应用了吗?          

尼姑拉丝赵四

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

2144粉丝/8关注

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

尼姑拉丝赵四

尼姑拉丝赵四

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

原创小生

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