Axure：模仿豆瓣影戏APP滑动点击切换主页

文/Kevin

前期筹备：手机截屏两张主页图，Photoshop切图

截屏不消教了吧，我的是安卓手机 判别率是1080*1680，和iPhone6 plus一样的判别率，以是在这里用了iPhones plus的元件当配景。

Photoshop不消怕，先沿着标尺拉上几条参考帮助线

放大准确到像素

OK，这些帮助线是为了等会切图利便快捷。

点开切图器材，沿着帮助线拉矩形，切正在热映、即将上映、玄色条，黑条下面整个主页。

点击文件-导出-储存为web名目，选择jpeg名目-确定。

从文件夹拉第二张截图拖进第一张截图上面，确定。

直接点击文件-导出-储存为web名目，选择jpeg名目-确定。

此时，桌面上应该有个images文件夹，删除多余图片，定名，如图：

来Axure

事先建设一个iPhone 6 plus 元件，不懂就Google 百度，可能不消也可以。

调解到吻合巨细

图片元件包围玄色屏幕，调解圆角，双击插入截屏一，像Photoshop那样沿着标尺拉帮助线

接下来慢慢插入图片（录制的GIF文件过大，压缩后还不可，于是又在播放大段GIF文件时录制几个小段GIF

哭）

起首插入正在热映黑字

按住ctrl+alt 拖动复制，双击插入即将上映灰字

同理，插入玄色滑块

插入一个白色无边矩形挡住截屏一谁人玄色滑块，拖到第三层，等会我们的玄色滑块滑动时就不会看到截屏一的玄色滑块了。

起首看截屏一配景的长度，我的这里是337，点锁定长宽比，插入正在热映主页，改长度为337，就和配景一样大了，拖动调解。

将全部对象定名更层次，将上面插入的主页转为动态面板，打消自动调解为内容尺寸，添加状态，复制正在热映主页，进入状态 2 粘贴，然后双击插入即将上映主页。

定名一下动态面板和状态

同理，将正在热映黑字转为动态面板，添加状态，复制粘贴，双击插入正在热映灰字。

同理将即将上映灰字转为动态面板，添加状态，复制粘贴，双击插入即将上映黑字。

搜查一下

开始交互

当主页向左滑动竣事时

先配置前提，只有主页是正在热映才气执行这些交互

配置主页动态面板状态：即将上映主页向左滑动

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!