随着触摸设备的流行,我们开始对使用的程序期望更多。当你旋转球体,你期望它能保持旋转。如果你轻弹屏幕上某些东西离开,你期望它能保持移动。
在非实体的UI组件上模拟物理属性既丰富了用户体验,也给用户互动增加一种自然的感觉。

想想看——你曾有多少次坐在那儿看着你的iPhone弹出它的列表边界之后又看着它自己缩回?…我无聊的时候常做这事。它甚至为程序的简单使用性增加了娱乐因素。

支持Flash平台的触摸设备也能一样出色,而且它并不 难实现。这个帖子里,我们将探索一个相关的简单机制来增加Flex Spark组件的惯性和物理属性。你为HP touchsmart,3M touch screen,或者可能甚至一个移动设备而做的下一个app能利用这个技术来创建更丰富体验。

首先,我们来看看它的运行,然后我们深入了解它是如何工作的。在下面的例子里,有三个标签。第一个标签里,你可以用鼠标抓住一张图片并弹开它。你将会注意 到它有惯性并会保持你给的移动状态。如果你超过了一般的滚动条界限,它仍会继续,并会猛的退回到它的“常态”范围内。在第二个标签里,有个竖直的列表供你 弹动其中的内容,而在第三个标签里,一个横排列表也一样有物理惯性属性。

这些组件的默认行为都被保留,并且创造这种体验的代码非常短。如果你非常熟悉Spark组件模型,你可能已经意识到了s:Scroller组件。它是用来创建你UI的可滚动区域的,它可以通过Spark皮肤来创建拥有这些皮肤的可滚动元素。

在这个例子里,我决定扩展Scroller类并创建允许物理属性的DraggableScrooler,包括惯性,摩擦力,界线,还有弹回。通过这个途 径,你可以给这个scroller使用任何Spark组件或者个性的皮肤。你所需要做的就是在通常使用s:Spark的地方代之以个性化的 DraggableScroller实例。
这个可以加进任何UI,任何皮肤,并不会改变默认行为。

让我们看看是怎么回事…以下代码用于上述例子里第一个标签的可滚动图片。

  1. <components:DraggableScroller width=”100%” height=”100%”
  2.                 dragHorizontal=”true”
  3.                 dragVertical=”true”
  4.                 preventDefaultActions=”true”
  5.                 exceedBounds=”true”
  6.                 friction=”.2″
  7.                 snapBack=”true”
  8.                 snapBackRatio=”.2″>
  9.   <s:Group>
  10.     <mx:Image
  11.       source=”http://earthobservatory.nasa.gov/images/imagerecords/44000/44969/gulf_amo_2010209_lrg.jpg”
  12.       id=”img” />
  13.   </s:Group>
  14. </components:DraggableScroller>

复制代码

你可以看到在DraggableScroller实例里包裹的图片内容。你可以通过属性来决定它可以被横向还是竖向拖拽,判断是否过界,是否该弹回,摩擦和弹回系数(介于0和1之间)。这些系数决定了弹回动作的速度(数值越低越慢)

    博视界科技专注于沉浸式全景数字餐厅、全息酒店宴会厅,旨在帮传统餐饮用科技玩跨界,欢迎咨询!

官方网站:www.boseetech.com

联系方式:    

微信联系我:


    【声明】转载本文请注明出处三人行设计,并保留有效链接:营造简单的触摸互动 http://www.srxtuan.com/archives/1465,谢谢!

猜您还喜欢: