axure动态面板滑动效果

手机端交互中，页面的上下左右滑动是常用的交互形态，今天给大家分享一下如何使用Axure来进行模拟，这里使用动态面板来实现，如果对动态面板不是很了解的同学，请查看专栏里的“动态面板入门教程”。

先看效果：

开工之前我们我们先分析一下，滑动效果的用处和实现方法：

1、上下滑动：一般用于浏览页面，例如新闻客户端的信息流。

实现方案：通过onDrag事件（锁定y轴）控制页面move动作，使页面上下移动

2、左右滑动：一般用于tab切换，且一般都是顶部tab，例如新闻客户端的分类

实现方案：通过onSwpieLeft和Right控制多个state页面切换，达到tab切换

案例：模拟头条的页面切换（上下浏览页面，左右切tab）

一、实现方案：

由于顶部tab和内容页面的切换效果不一样（一个为滑动，一个无动画），我们这里将tab和页面分隔为两个动态面板来实现。

我们首先创建两个动态面板，如下图，我们分别命名为：Tab页，内容页。

二、动态面板的内容设置

1、为动态面板2（内容页），增加三个state页面，并将三个页面内容填充进去

①为了体现上下滑动效果，页面尽量长一些，至少2屏，这样滑动效果较好。

②每个页面中的元件制作完成后，建议都group起来，方便后续绑定action。

（内容我这里直接手机截图，也可以自行设计。）

2、为动态面板1（Tab页），增加三个state页面，并将三个页面内容填充进去

（如下图，我这里直接截取的三张图片）

三、事件设置（左右滑动，页面切换）

1、内容页向左切换：

选中动态面板2（内容页），增加onSwipeLeft事件（左滑）

①Set Panel State为“内容页”，设置页面切换为Next，切换动画为 slide left。

②Set Panel State为“Tab页”，设置页面切换为Next，切换动画为 none。

2、内容页向右切换：

选中动态面板2（内容页），增加onSwipeRight事件（右滑），

①Set Panel State为“内容页”，设置页面切换为Previous，切换动画为 slide right。

②Set Panel State为“Tab页”，设置页面切换为Previous，切换动画为 none。

四、事件设置（上下滑动，页面浏览）

上下滑动我们使用onDrag事件+move动作来实现，由于页面的state会进行切换，我们需要三个onDrag+move的组合。

首先为动态面板2（内容页）增加三个onDrag事件的case。

增加方法：

双击onDrag事件，弹出的事件对话框中，点击顶部的Add Condition。

剩下的两个case依次设定为state2，和state3，这里代表onDrag事件可根据state做不同的动作。

为每个刚才设置好的Case增加move动作，move的对象是group起来的一组图片，Move的属性设为with drag y。

也可以设定一个上边界（Bounds），以防内容顶部滑动超出界面

参考设定值：top，is less than，0

其他两个case操作一样，下图是事件配置完的状态。

五、运行预览效果

运行一下，我们上下滑动页面，页面展示不同内容。左右滑动页面，页面可以有滑动效果的切换，顶部tab无滑动效果切换，一切正常，大功告成。

axure动态面板滑动效果相关推荐

axure下移固定地方_axure固定元件位置教程：使用axure动态面板制作一个返回顶部的按钮...
许多网站上都有一个"返回页首"按钮.无论屏幕如何滚动,"返回顶部"按钮始终浮动在固定位置,随时可用.一旦点击它,他就像一个小小的火箭,摇晃起来,页面将返回页面顶 ...
axure 动态面板实现图片轮播效果（淘宝）
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现工具/原料 axure7.0 方法/步骤下载需要轮播的图片将图片引入至axure中,将引入的第一张图片转为动态面板将动态 ...
axure 动态面板自动适应浏览器宽度_动态面板之“固定到浏览器”与“自适应窗口宽度”特性解读图文教程(18)...
特性:固定到浏览器案例:固定位置与锚点链接特性:自适应窗口宽度案例:底部导航横向铺满全屏补充,点击小图,动态切换大图一.固定到浏览器特性 1.准备材料: (1)直接复制粘贴一篇长的图文文档到 ...
Axure动态面板的使用
动态面板: 在Axure中的很多交互都是由动态面板来实现的.动态面板里面可以包含多个状态,所以通过一些事件可以对动态面板的状态进行切换,以此来实现交互效果.但任何时候都是只有一个状态是可见的,或者整个 ...
Axure动态面板实现轮播图
Axure中不乏许多的高级功能,其中轮播图是我们在页面中常见的一个高级功能,轮播图的做法有很多种,但是就我个人而言认为使用动态面板做轮播简单点.今天就让我们来学习一下Axure中动态面板实现轮播图吧. ...
axure 动态面板自动适应浏览器宽度_Axure教程：用axure制作Web原型自适应电脑屏幕...
本篇文章作者主要讲的是关于用Axure制作Web原型自适应电脑屏幕,一起来看看~ 用axure制作原型,很多刚入门的小白(包括我),制作原型的时候首先从制作App原型开始的,因为有固定的原型尺寸供我们 ...
Axure—动态面板-勾选
博客概要分享利用Axure的动态面板元件制作一个粗糙的勾选~ 文章目录博客概要 Axure RP8-实战案例_总目录勾选制作过程 1.整体搭建 2.创建面板 3.面板结构 4.设置交互 5.效 ...
Axure动态面板使用，简单的交互
在Axure中如何使用动态面板将动态面板拖拽到工作区,并设置为合适大小, 双击动态面板双击之后,周围变色,动态面板高亮,点击顶部的state1,添加状态, 添加很多的新的面板设置完成之后点击右上 ...
axure内联框架和动态面板_最详细的Axure动态面板使用教程
1.打开[Axure]软件,在index文件上新建一个375*667大小的背景矩形并绘制页面. 具体如图所示. 2.在banner的位置上新建一个[动态面板],双击动态面板在其中新建state1.st ...

axure动态面板滑动效果

axure动态面板滑动效果相关推荐

最新文章

热门文章