Axure-小红书APP登陆界面划屏效果制作

有一款叫做小红书的APP（不是小黄书）登陆界面做的非常清新脱俗，教他家用Axure模仿练习一下他的登陆界面划屏效果，这个内容虽然有些多，但是制作方法并不难，耐心跟着做的话肯定没问题哒！点击观看效果

效果分析

这个登陆界面中，我们需要做的效果有下面4个内容：

1. 大图和文字会随着划屏一起移动，非动态面板多个状态切换，是同一层级的内容滑动。
2. 背景图汇随着划屏变为对应图片并且放大
3. 图标会随着划屏变为对应图标
4. 页码会随着划屏切换到对应页的效果

界面结构

大图和文字

3屏宽的界面，将图片和文字摆放在对应位置。

将外层动态面板缩小为1屏大小，起到限制显示区域的作用。

背景图

1个动态面板的3个状态，每个状态中是不同的图。

图标

3个相同位置的图标，默认显示第1个，隐藏其他2个。

页码

1个动态面板的3个状态，每个状态中表示不同的页码。

登陆和注册按钮

用矩形画2个按钮，本次教程中不涉及登录之后的内容，所以不在这里做交互。

实现思路

建立全局变量page，默认值为1，代表当前的页码，各个元件根据page的值进行相应交互。

制作方法

拖动分为2类交互，1是拖动时，2是拖动结束时。

拖动时

将大图和文字分别设置水平拖动，并且进行边界限制，不做限制的话就可以左右无限拖拽了。

拖动结束时

拖动结束分为向左和向右拖动结束时2个交互类型，而拖动又分为大距离拖动和小距离拖动，大距离拖动结束时将跳转到下一页，小距离拖动结束时将保持当前页。

所以我们应当设置条件来判断拖动的距离，我们设拖动200为大小距离的阀值。

在这里要跟大家介绍一个函数——TotalDragX，这个函数的意思是从按下到抬起鼠标总共拖拽的距离。

如果拖拽距离大于200并且当前页码是第1第2页的时候，满足了大距离的拖动条件，则将[[page+1]]。

根据page值设置背景图这个动态面板切换到对应的状态，在选择状态中选择Value(值)，状态名称和序号中填写全局变量[[page]]，这样是第几页就会切换到状态几了。

页码这个动态面板也是一样的，切换到对应[[page]]的状态。

而大图和文字的，我们要根据[[page]]在拖动结束时跳转到整数的页面上，而不是卡在一半。

公式为[[(page-1)*-1屏宽度+左边的空隙距离]]

【思路重点】大距离拖拽=拖拽成功，page+1，小距离拖拽=拖拽失败，page不变。

拖动结束处于不同界面时，不同的icon和背景有不同的变化。

icon的变化：显示当前page的icon，隐藏另外2个icon，当前page的icon以中心为锚点，线性动画到原始尺寸。另外2个icon以中心为锚点，线性动画到小尺寸

背景的变化：当前页的背景图由原尺寸放大，其他2个背景图缩小的原尺寸。这样才能在其他page再一次放大图片时，依旧是从原始尺寸放大。需要注意的是，在这i类我们需要把动态面板放大到比原来的图片尺寸大1像素，否则在你放大图片的时候动态面板会跟着一起放大，图片会出框。我在这里的做法是将动态面板高度+1，Y坐标-1。

至此，跟着教程将左拖拽结束时的交互做完了，下面来动动脑筋把向右拖拽做了吧！都是一样的哦，只是有一些轻微的不同。如果还是比较迷茫的话你可以下载Axure源文件去仔细观察学习.^_^.

转载自：http://www.axure.com.cn/2909/