网站首页

中继器使用场景(三):轮播图放大效果

大字 日期:2018-11-09 来源:未知

  本文以“人人都是产品经理”手机app原型为例,讲解轮播过程中的,侧图留框、主图放大的功能,以及自动轮播和手动拖动的实时切换。(末尾有彩蛋)

  现在手机app中我们经常能看到有放大,并且两边有前后图片留框的轮播效果,同时支持手动拖动和自动轮播两种形式。我以“人人都是产品经理”手机app为例,做了高保真原型。

  因为两侧有前后图片留框效果,如果只是简单的用动态面板不同state之间的轮播是达不到此效果的。

  (2)在mask的State1中放入五个图片元件标志,不要导入具体图片,并命名为1、2、3、4、5。因为此处只是让图片占位符确定位置,具体的图片内容靠后面讲的中继器赋值。

  将五个图片排成一排,中间略有隔开,其中第二张图片(命名2)调整为样例中主图片大小(原型中主图片尺寸为宽316×高159),其他四张图片的高度比图片2矮一些(原型中其他图片尺寸为宽366×高144)。

  在页面的空白处(注意不是在动态面板里),拖入一个中继器,将里面的矩形删除,不用放入任何元件,只需在数据集中,建两列,number列输入12345共计5行,img列对应导入我们需要展现的5张图片。

  接下来的交互非常重要,是我们常规对于中继器的反操作。之前我们大部分案例,是外部元件为中继器赋值,现在是中继器为外部元件赋值,具体如下:

  解释:index函数的用途:获取数据行的索引编号,编号起始为1,由上至下每行递增1。是系统自动生成的,不随行数剧变化而变化,就像Excel中的表格左侧的行号。

  交互:设置动态面板mask里的图片组合中的图1(排在第一个的图片)==中继器中行号为1的img列里的片,即我们在中继器img导入的图片,即动态面板图1的位置显示的是中继器中index==1的里的图片内容。

  解释:因为之前我们制作的动态面板里的图片都是元件图标,没有导入具体的图片,现在将动态面板中的5个图片分别绑定为中继器中的5个index里的图片。后续会利用中继器的排序功能为动态面板实现循环效果。

  第一步:移动动态面板里的图片组合向左侧移动X坐标“相对”位置-322。这个数值自己去调整,在动态面板中拖动位置,自己计算起始位置到拖动位置的差值即可。注意选择的是相对位置即“经过”,因为这样的话不用设置y坐标,加上线毫秒。

  第二步:当图片组合向左挪动一格后,挪出屏幕的是动态面板图2的位置并显示的是中继器index==2的图片内容,目前就是中继器中的图片2。同理显示在主屏幕的应该是动态面板图3的位置,并显示的是中继器index==3的图片内容,目前就是中继器中的图片3,所以设置原来是大图的图片2高度变小,原来是小图的图片3变大。

  第三步:等待550毫秒,这里我要重点说一下“等待”这个交互。因为我们上面几步的交互中都有线毫秒的设置,如果在后续的动作中,强调是“同步性”即在上述500毫秒的线性动画进行的同时,去做其他动作,这里可以不用加入“等待”交互。

  如果强调“先后性”,即在500毫秒动画结束后,进行接下来的动作,那么必须在两个动作之间加入>500毫秒的等待时长。因为接下来的第四步交互是要在上述动作全部完结后再进行,所以要加入550毫秒的等待。

  因为,中继器在载入时设置了以number数值为准,做升序排列,所以作为这一步,原图片顺序的变化为:

  第五步:大家会发现,当我们拖动动态面板时,主窗口图片由图2变为图3并放大后,很快就切入下一轮播,即直接跳到图片4,但是我们的原型是需要靠人为的主动拖动,将图片进行轮播。所以我们在完成位置重排后,将提前播放的图片4再拉回去。注意动画要选无。

  第六步:重新排序后,被拉回主窗口的是动态面板中图片2的位置,所以将其改为大图显示,同理将被拉出橱窗外的动态面板中的图3位置改为小图,注意动画要选无。

  详细步骤不再赘述,基于向左拖动,向右拖动很多数值和图片位置的计算正好相反,简单的给大家划一下重点:

  第一步:我们在页面新拖入一个动态面板,命名auto,分别加入两个状态,state1和state2,每个状态里没有任何内容。

  第三步:在动态面板auto状态改变时,加入“触发”之前包含图片的mask动态面板向左拖动结束时的交互,即状态每改变一次,就向自动左拖动一次。

  到这步就实现了动态面板mask自动轮播的效果,接下来,我们来实现解除和恢复自动轮播的效果,即当人工进行拖动时,自动轮播停止,当不再拖动时,自动轮播恢复。

  第五步:在动态面板mask(含图片组合的大动态面板)“鼠标移出”时,加入交互,即当不再进行操作时,重新触发auto动态面板载入时自动轮播的交互。

相关新闻

[责任编辑:admin]

中国农业人才网|农资人才网|畜牧人才网|农业招聘|中华农业英才网版权与免责声明

1、本网转载文字、图片等稿件均出于为公众传播有益资讯信息并且不以盈利为目的,转载稿件不意味着赞同其观点或证实其内容的真实性,本网不对其科学性、严肃性等作任何形式的保证。如其他媒体、网络或个人从本网下载使用须自负版权等法律责任。

2、本网站内凡注明“来源:南昌新闻网”的所有文字、图片和音视频稿件均属本网站原创内容,版权均属“中国农业人才网|农资人才网|畜牧人才网|农业招聘|中华农业英才网”所有,任何媒体、网站或个人未经本网站协议授权不得转载、链接、转贴或以其他方式复制发表。本网站原创内容版权归本网站所有,内容为作者个人观点,本网站只提供参考并不构成任何商业目的及应用建议。已经由本网站协议授权的媒体、网站,在下载使用时必须注明稿件来源:“中国农业人才网|农资人才网|畜牧人才网|农业招聘|中华农业英才网”,违者本网将依法追究法律责任。

3、凡本网站转载的所有的文章、图片、音频、视频文件等资料的版权归版权所有人所有,本网站采用的非本站原创文章及图片等内容无法一一和版权所有人联系,如果本网所转载稿件的作者或编辑认为其作品不宜上网供大家浏览,或不应无偿使用,请及时用电子邮件或电话通知本网,本网将迅速采取适当措施,避免给双方造成不必要的经济损失。

4、对于已经授权本站独家使用提供给本站资料的版权所有人的文章、图片等资料,如需转载使用,需取得本网站和版权所有人的同意。

< 分享到 设置
+ - 正文字号

点击今日