专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

Axure教程-动态面板详解

来源:小易整编  作者:小易  发布时间:2023-09-02 12:59
摘要:动态面板的学习可以帮助我们完成十分复杂的动作设计,今天我们详细学习一下动态面板的使用。图:Axure中代表动态面板的icon从这个icon可以看出:1.这个动态面板有多个层2.每个层有自己的顺序3.每个层的可以放不同的内容我们可以用动态面板...

动态面板的学习可以帮助我们完成十分复杂的动作设计,今天我们详细学习一下动态面板的使用。

Axure教程-动态面板详解

图:Axure中代表动态面板的icon

从这个icon可以看出:

1.这个动态面板有多个层2.每个层有自己的顺序3.每个层的可以放不同的内容

我们可以用动态面板做什么?

举例:动态面板变换与控制

上面的例子简单的演示了动态面板的使用。

动态面板支持在同一个区域内放置多个状态的内容,选择显示其中一个状态的内容,不能同时显示多个状态。支持外部通过命令来切换动态面板的状态,面板的状态有先后顺序,支持正序和倒序变换。在状态变化时支持一些简单的过场动画。下面我们开始banner的制作

首先我们去找几张图作为素材,我在京东上找了几张banner,我们就仿一个京东banner吧。

第一步

把找到的图分别放到同一个动态面板的不同状态内。

我新建了一个动态面板,设置了5个状态,分别放了五张图。我们的banner目前还不能动。我们来给他添加操控。

第二步

我们新建5个圆点,来分别控制banner动态面板的5个状态,这里我们在切换动画上加上“向右滑动”,

圆点的交互设置

这样就完成了点击之后滑动切换banner图了。

第三步

优化,一般我们看到的banner控制点会有两个状态,当前图片的控制点会突出显示。我们来完成这步。

我们新建一个动态面板,分成五个状态,并且每个状态与banner的面板对应,将圆点突出处理。

在每个圆点上再加一个控制自身状态的命令,保证两个动态面板的一一对应

我们现在就完成了90%了,看看效果

为什么说是90呢?

因为真正的滚动banner不仅有一个方向,应该点击左边的点向左滑切换,点击右边的点才像右滑才对。实现可以左右切换效果的方法也比较多,大家可以自己思考一下。另外,在banner图的左右两边加个左右箭头控制前后图的切换就是满分了。这个就比较简单了。

本节涉及到略微复杂的内容,面板与面板之间的互相控制,小伙伴们练习一下。

题外话

当初豆子开axure教程时,是想大家可以学会本教程后,不用学习代码就可以作出自己的个人网站,其实今天的banner就可以作为大家个人站的一部分啦。个人网站对于专业设计师来说真的是必备的,没有的小伙伴可以准备起来了。

好久没更新教程,之前有点偷懒,后续还会继续更新axure的教程,尽量以简单易懂、几分钟看完就会的小知识点写给大家。

紫说(公众号)

作者:紫大文


本文地址:网络知识频道 https://www.hkm168.com/jiqiao/1045441.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


网络知识
小编:小易整编
相关文章相关阅读
  • 用U盘轻松实现一键重装系统的小白装机教程

    用U盘轻松实现一键重装系统的小白装机教程

    在现代社会,电脑已经成为人们生活中不可或缺的工具。然而,由于各种原因,我们有时候需要重装电脑系统来解决一些问题或提升性能。但是,对于一些小白用户来说,重装系统可能是一项困难的任务。因此,本文将介绍一款小白一键重装系统的u盘装机教程,帮助小白...

  • 什么是构造函数?详解JavaScript中的构造函数

    什么是构造函数?详解JavaScript中的构造函数

    作为原型和原型链的基础,先了解清楚构造函数以及它的执行过程才能更好地帮助我们学习原型和原型链的知识。本篇文章带大家详细了解一下javascript中的构造函数,介绍一下怎么利用构造函数创建一个js对象,希望对大家有所帮助!一个普通的函数被用...

  • 什么是Linux系统中nc命令?nc命令的用法详解

    什么是Linux系统中nc命令?nc命令的用法详解

    这篇文章主要介绍了linux系统中nc命令的基本用法,nc命令非常之强大,这里先简单介绍它用来作端口扫描以及文件传输等的基础使用。功能说明:功能强大的网络工具,在网络工具中有“瑞士军刀”美誉,其有Windows和Linux的版本。因为它短小...

  • Java中的Scanner操作详解

    Java中的Scanner操作详解

    scanner是java中的一个常用类,用来读取控制台或文件中的输入数据。它提供了一种简单的方式来解析基本类型和字符串,并支持对正则表达式进行匹配。Scanner类位于java.util包中,因此在编写程序时需要import...

  • 带你搞懂git回滚代码(实例详解)

    带你搞懂git回滚代码(实例详解)

    本篇文章给大家带来了关于git回滚代码的相关知识,git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理,希望对大家有帮助。在日常coding的过程中免不了分支之间的合并,回滚、提交、打tag等操作,如果你现...

  • 百度智慧课堂怎么使用?百度智慧课堂使用教程

    百度智慧课堂怎么使用?百度智慧课堂使用教程

    百度智慧课堂怎么使用?百度智慧课堂是一款可以再网上带给你丰富的线上学习服务的线上学习软件,很多名师教授在其中免费授课,是很多人在线提升自己的重要渠道,不过很多新用户并不懂得该如何正确使用该软件,下面就由小编为大家带来有关百度智慧课堂的使用教...

  • 解析如何解锁iPhone屏幕的教程,帮你解决手机被锁定的问题

    解析如何解锁iPhone屏幕的教程,帮你解决手机被锁定的问题

    你是否曾经遇到过忘记iphone的锁屏密码的情况?或者是否遭遇过熊孩子乱试密码导致iphone被锁定一个小时的情况呢?如果你曾经有类似的经历,需要快速解锁屏幕,那么可以考虑使用苹果屏幕解锁工具。这款工具是专为苹果用户设计的,可以帮助解锁苹果...

  • C++中的取余函数详解

    C++中的取余函数详解

    C++中的取余函数详解在C++中,取余运算符(%)用于计算两个数相除的余数。它是一种二元运算符,其操作数可以是任何整数类型(包括char、short、int、long等),也可以是浮点数类型(如float、double)。取余运算符返回的结...

  • 周排行
  • 月排行
  • 年排行

精彩推荐