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

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

maynowei7个月前 (08-02)技术知识115

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

效果分析

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

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

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

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

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

界面结构

大图和文字

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

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

背景图

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

图标

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

页码

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

登陆和注册按钮

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

实现思路

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

制作方法

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

拖动时

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

拖动结束时

相关文章

成功上岸腾讯运营,教你如何写校招简历?

产品策划/运营的校招简历应该怎么写?作者从自身实际情况出发,总结分享了相关经验,希望对你有用。写在前面红红火火恍恍惚惚,本人是一位2020届本科毕业生,校招意向互联网产品类。此前有过产品相关的项目&a...

Objective-c单例模式的正确写法「藏」

单例模式在iOS开发中可能算是最常用的模式之一了,但是由于oc本身的语言特性,想要写一个正确的单例模式相对来说比较麻烦,这里我就抛砖引玉来聊一聊iOS中单例模式的设计思路。关于单例模式更多的介绍请参考...

Android主流UI开源库整理(android完整开源项目)

前言最近老大让我整理一份 Android主流UI开源库 的资料,以补充公司的Android知识库。由于对格式不做特别限制,于是打算用博客的形式记录下来,方便查看、防丢并且可以持续维护、不断更新。标题隐...

C# 中的多线程同步机制:lock、Monitor 和 Mutex 用法详解

在多线程编程中,线程同步是确保多个线程安全地访问共享资源的关键技术。C# 提供了几种常用的同步机制,其中 lock、Monitor 和 Mutex 是最常用的同步工具。本文将全面介绍这三种同步机制的用...

掌握C语言多线程:高效并发编程指南

一、多线程基础概念介绍多线程编程是现代软件开发中提高程序性能和响应性的重要技术。在C语言中,pthread(POSIX Threads)库是实现多线程编程的标准工具。本节将通俗易懂地介绍多线程的核心概...

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

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