当前位置:首页 > 技术知识 > 正文内容

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

maynowei11个月前 (08-02)技术知识197

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

效果分析

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

  1. 大图和文字会随着划屏一起移动,非动态面板多个状态切换,是同一层级的内容滑动。

  2. 背景图汇随着划屏变为对应图片并且放大

  3. 图标会随着划屏变为对应图标

  4. 页码会随着划屏切换到对应页的效果

界面结构

大图和文字

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

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

背景图

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

图标

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

页码

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

登陆和注册按钮

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

实现思路

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

制作方法

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

拖动时

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

拖动结束时

相关文章

出售闲置原型素材来赚钱,上传作品,即可收上万元收入

出售闲置原型素材来赚钱。产品经理每年设计出大量的原型作品和组件、元件库、交互原型模板等作品,如果项目结束,你的原型就失去了作用,而有需求的人却找不到这样的作品。现在我们发现这样一家元件库、原型模板、素...

关于异步信号安全(下面关于异步电路危害的描述错误的是)

线程安全与重入以及异步信号安全的区别. 可重入一定是线程安全的,但是线程安全不一定是可重入的. 引用别人的博客中的话吧.如下: http://blog.csdn.net/xiaofei0859/art...

C语言编写多线程,什么时候要使用互斥锁?为什么要使用互斥锁?

在多线程编程中,当多个线程同时访问共享资源(如变量、文件等)时,会出现竞态条件(Race Condition)问题,导致程序的行为不可预测。为了避免这种问题,需要使用互斥锁来保护共享资源的访问。互斥锁...

一个快要被忘记的数据库开发岗位,但应该被尊重

数据库测试,似乎是被人遗忘的数据库职业,但依然是不错的选择。底下是我在某站找的招聘启事,就连蚂蚁金服都在积极寻找数据库测试人:要说我经历的项目,大大小小也有几十个,从 C/S, B/S, 再到 B/C...

China to work with all member states to complete preparations in final phase for SCO Tianjin summit: spokesperson

BEIJING, July 31 (Xinhua) -- China will work with all the Shanghai Cooperation Organization (SCO) me...

Java的反射技术reflect(java,反射)

Java 的反射技术实现方式是程序员构建代码的逆向过程。反编译技术和代码混淆技术也涉及到程序源代码的反射构建。Java的反射reflect基于类的字节码文件构建中间语言代码文件。基于Java类的中间语...