由图13-22可知,图片移动方式为direct to line,移动路径为图片沿直线由下向上,起始值为0,终点值为100,目标点为verticalpos变量的值;图片移动要瞬间完成且不越界。
及时点评 由于移动图标移动图片时的目标点为verticalpos变量的值,因此当verticalpos的值变化时,图片将产生移动且瞬间完成。之所以当verticalpos的值减去5时,图片产生向上移动,是因为屏幕坐标y轴是向下的,y值愈小则位置愈靠上,所以变量值减去5使图片位置向上移动5。而图片移动的路径起始点与终止点的值与滑块在滚动条上移动时的路径的起点值、终点值设置一样,是为了使图片上下移动与滑块上下移动在位置上的同步。
注意,由于单击scroll up热区使verticalpos变量值的大小发生改变,不仅使图片产生移动,而且滑块移动的目标点也是verticalpos变量,因而也产生同步移动。由于用户单击鼠标时,程序反复执行“scroll up”流程,图片连续向上移动5个像素单位,且瞬间完成,因此出现图片向上滚动的效果,直到松开鼠标按键滚动停止。
【scroll controls】交互响应图标下的【scroll down】交互响应分支完成图片向下滚动的功能。
【scroll down】也是一个热区交互响应分支,热区的大小和位置正好覆盖滚动条的向下指针按钮处。
该分支群组图标的下级流程与【scroll up】完全一致,只是单击【scroll down】按钮后,其分支运算图标中的代码使verticalpos变量值增加5。其运算表达式如下:
if verticalpos<100 then verticalpos:=verticalpos+5
由于verticalpos的值增加5,故图片向下移动。连续移动且瞬间完成产生图片向下滚动的效果。
当用户用鼠标在滚动条中间的任意位置单击时,程序进入【scroll controls】交互图标下的【click on scroll bar】分支流程。该分支也是一个热区交互响应分支,其热区大小与位置正好覆盖滚动条中间的长条位置。该分支下级流程如图13-23所示。
图13-23 【click on scroll bar】分支下级流程
新闻热点
疑难解答