快好知 kuaihz订阅观点

 

Axure教程:实现分类栏拖动效果

笔者在本文中介绍了如何用Axure实现分类栏拖动效果的操作步骤,以及实现过程中的一些心得体会。

操作步骤

1. 一个转换为动态面板的矩形

这里需要注意,转换为动态面板后要将动态面板默认勾选的自动调整为内容尺寸的勾选取消掉!

2. 将动态面板里面的矩形再次转换为动态面板

这里不需要取消勾选。

3. 在面板2里面放任意多个超出面板1宽度的矩形,这里我放了6个矩形

4. 设置面板2的交互动作

5. 预览看看效果

(1)初始状态

(2)拖动后

小记

1. 当动态面板的“自动调整为内容尺寸”勾选取消掉后,会在编辑面板里面出现蓝色的方框

这个蓝色方框是指外面那个动态面板的大小,提示用户预览时只有蓝色方框内的内容会显示出来,假如想要蓝色方框以外的内容显示出来,则需要我们通过设置交互动作——拖动,才能将范围外的内容拖到范围内显示出来。

2. 拖动的界限值的计算

这里首先边界都设定为左侧,但>=-[[This.width-350]],这350很多人不知道怎么来的。其实就是外面那个动态面板的宽度。像我这个原型就是:

外面的动态面板宽度:

350这个数值就来自这里。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:拖动  拖动词条  效果  效果词条  实现  实现词条  教程  教程词条  分类  分类词条  
原型

 Axure教程:进度条的实现

Axure的进度条应该如何实现呢?本文对每一个步骤进行了讲解。1.需要注意的地方(1)进度条如何实现?(2)进度百分比如何实现?2.元件准备从元件库中拖动一个矩...(展开)

原型

 Axure教程|如何制作”返回顶...

以人人都是产品经理的首页为例,进行“返回顶部”原型制作介绍:1、在工作区拖入一个动态面板命名为top,根据通常返回顶部的按钮在屏幕右下角的惯例设置top的X坐标...(展开)

原型

 Protopie实战教程:滑页切...

本篇文章为大家展示了在Protopie中如何实现滑页效果,来看看吧!左右滑页是手机上常用的一种交互方式,在Protopie中,我们无需任何交互配置即可实现滑页效...(展开)