滚动

cellz管理员 2015-12-03
滚动的英文名叫“scroll”,相信很多用户对这个组件并不陌生。它几乎在所有APP或者网页上都出现过。可以说,“滚动”组件是数字展示与传统展示最大的区别点,它解决了如何在有限的屏幕上显示无限内容的问题。

在cellz中滚动一共有三种滑动方式:连续滚动,均匀分页,以及吸附点分页。
相信大家对于“连续滚动”都清楚是怎么回事。我们重点说说“均匀分页”与“吸附点分页”。
 
“均匀分页”,自动将滚动中所有内容按照滑动方向的设置(垂直/水平),等分成若干份,当最后一页不足时将会留白补足。这个效果如同状态集的横向吸附/纵向吸附效果。这个效果主要是为了突出在滚动中心点区域内容的重要性,不希望用户因为快速连续的滚动而忽略掉。
 
“吸附点分页”,你可以认为“均匀分页”是一种特殊的“吸附点分页”。它自动将从第二页开始的中心点设置为“吸附点”,当吸附点到达滚动中点位置的时候,滚动就会停止。并且在“吸附点分页”的滑动方式下,cellz也开放了“吸附点”的设置,你可以在半屏幕之后任意位置设置“吸附点”,按滚动方向滑动,此“吸附点”到达滚动中心位置时,滚动将停止。除非你继续进行滑动操作。
那么使用“吸附点”,你就可以让用户的注意力集中在任意你想让用户注意的地方。
 
“吸附点”,还有一个很强大的功能。任何一个吸附点都可以设置“触发”与“关联”。
说明:使用“触发”的必要条件是,当吸附点达到滚动中心时。

当我们设置关联的时候,只需要选择关联对象与被关联对象就可以了。那么关联是什么意思呢。我们将一个状态集从起始状态到最终状态,动画从第一帧到最后一帧,页面的切换的始瞬间到完全移出屏幕,滚动的开始到滚动的终止,使用“轻扫”时对象的起始位置与终点位置等认为是一个完整的过程,当两个或多个组件发生关联关系时,他们的这个过程将会同步进行,你操作状态集A从第一状态到第二状态,与它关联的状态集也会对应的切换到第二状态。

我们通过关联可以设计出很多出彩的效果,比如视差滚动,比如图片的交错运动构成一张整图。

而“吸附点”关联是与状态集中某状态的关联(选中状态集单个状态),动画中的某帧关联(选中动画的某一帧)是同样的逻辑。 吸附点从进入滚动区域边缘位置到到达滚动区域中心位置被认为是一个完整的过程,这个过程可以与状态集整个状态播放,或整个动画的播放相关联。 比如你用状态集来实现一朵花的绽放,当这朵花在滚动边缘时还是花骨朵,而当花移动到滚动区域中心时,已绽放开来。当继续滚动,花又慢慢合拢成为一个花骨朵。
 

总之,滚动的“吸附点”设计就是为了通过各种效果吸引用户关注滚动区域的内容。合理的使用这个效果,你可以做出引人瞩目的交互效果。
不得不说的是,滚动其实也是一个容器类组件。所谓容器类组件是指,你可以在滚动中添加状态集,动画,甚至其他任意组件。
分享到微博 分享到微信
×
请打开微信"扫一扫",可将文章分享到朋友圈