有一款叫做小红书的APP（不是小黄书）登陆界面做的非常清新脱俗，教他家用Axure模仿练习一下他的登陆界面划屏效果，这个内容虽然有些多，但是制作方法并不难，耐心跟着做的话肯定没问题哒！点击观看效果
效果分析
这个登陆界面中，我们需要做的效果有下面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/
原创文章，作者：ioued，如若转载，请注明出处：https://www.iamue.com/12057/
