Axure9 教程:图表载入效果
csdh11 2025-01-12 12:40 35 浏览
导读：我们在设计原型时会经常使用到图表，给图表加一点载入时的动效会让图表更加生动。今天我们来简单介绍下在Axure中实现柱状图、折线图、饼图载入效果的方法。
一、柱状图
1.拖入一个【矩形】元件，设置初始的高度为：1px,宽度和填充颜色自定。
2.矩形上方拖入一个【文本标签】，设置数字文本，初始隐藏。
3.给上述矩形元件添加一个【载入时】的效果，高度自定，动画选择【线性】【500s】效果,锚点的位置选择底部；显示【2】中拖入的文本标签，动画选择【逐渐】【500s】。
查看效果
原型预览地址：https://3ibj8g.axshare.com
二、折 线 图
1.使用【钢笔工具】绘制出我们想要的折线图，完成后只需要选中画完的折线图右键选择【曲线连接各点】就可以生成曲线图。
2.将绘制完成的折线图右键【转化为动态面板】，设置此动态面板的宽度为1px。
3.给此动态面板添加一个【载入时】的交互，设置尺寸为动态面板原本的尺寸，动画选择【线性】【500s】效果即可。
查看效果
三、饼 图
1.拖入一个【圆形】元件，填充颜色为紫色，命名为：【purple】，调整好大小和位置后选中此元件，右键【选择形状】，选择第四个形状，拖动缺口处的轴调整此圆形的角度。
2.将其右键转换为动态面板，命名为【purple- panel】；
3.用上述方法我们再制作出3个圆形，所有饼图的角度加起来为360度，且每个圆形的起点位置一致。
4.将这4个圆形所在的动态面板叠放在一起，同时选中后右键转换为动态面板，命名为【panel】。
5.给动态面板【panel】添加载入时【旋转】的交互，使每一个圆形所在的动态面板通过旋转一定的角度，实现载入的动画效果。
在饼图的最上方拖入一个白色的圆形，输入文字，即可制作出圆环的效果。
查看效果
本文由 @Daisy 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议
相关推荐
- SpringBoot+LayUI后台管理系统开发脚手架
-
源码获取方式：关注，转发之后私信回复【源码】即可免费获取到！项目简介本项目本着避免重复造轮子的原则，建立一套快速开发JavaWEB项目（springboot-mini），能满足大部分后台管理系统基础开...
- Spring Boot+Vue全栈开发实战，中文版高清PDF资源
-
SpringBoot+Vue全栈开发实战，中文高清PDF资源，需要的可以私我：）SpringBoot致力于简化开发配置并为企业级开发提供一系列非业务性功能，而Vue则采用数据驱动视图的方式将程序...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源，非常适合零基础入门java的同学，希望大家在学习的时候，能够节省时间。纯干货，良心推荐！第一阶段：Java基础...
- 探秘Spring Cache:让Java应用飞起来的秘密武器
-
探秘SpringCache：让Java应用飞起来的秘密武器在当今快节奏的软件开发环境中，性能优化显得尤为重要。SpringCache作为Spring框架的一部分，为我们提供了强大的缓存管理能力，让...
- 3，从零开始搭建SSHM开发框架(集成Spring MVC)
-
目录本专题博客已共享在(这个可能会更新的稍微一些)https://code.csdn.net/yangwei19680827/maven_sshm_blog...
- Spring Boot中如何使用缓存?超简单
-
SpringBoot中的缓存可以减少从数据库重复获取数据或执行昂贵计算的需要，从而显著提高应用程序的性能。SpringBoot提供了与各种缓存提供程序的集成，您可以在应用程序中轻松配置和使用缓...
- 我敢保证，全网没有再比这更详细的Java知识点总结了，送你啊
-
接下来你看到的将是全网最详细的Java知识点总结，全文分为三大部分：Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点，别眨眼，从小白到大佬、零基础到精通，你绝...
- 1，从零开始搭建SSHM开发框架(环境准备)
-
目录本专题博客已共享在https://code.csdn.net/yangwei19680827/maven_sshm_blog1，从零开始搭建SSHM开发框架（环境准备）...
- 做一个适合二次开发的低代码平台，把程序员从curd中解脱出来-1
-
干程序员也有好长时间了，大多数时间都是在做curd。现在想做一个通用的curd平台直接将我们解放出来；把核心放在业务处理中。用过代码生成器，在数据表设计好之后使用它就可以生成需要的controller...
- 设计一个高性能Java Web框架（java做网站的框架）
-
设计一个高性能JavaWeb框架在当今互联网高速发展的时代，构建高性能的JavaWeb框架对于提升用户体验至关重要。本文将从多个角度探讨如何设计这样一个框架，让我们一起进入这段充满挑战和乐趣的旅程...
- 【推荐】强&牛!一款开源免费的功能强大的代码生成器系统!
-
今天，给大家推荐一个代码生成器系统项目，这个项目目前收获了5.3KStar，个人觉得不错，值得拿出来和大家分享下。这是我目前见过最好的代码生成器系统项目。功能完整，代码结构清晰。...
- Java面试题及答案总结(2025版持续更新)
-
大家好，我是Java面试分享最近很多小伙伴在忙着找工作，给大家整理了一份非常全面的Java面试场景题及答案。...
- Java开发网站架构演变过程-从单体应用到微服务架构详解
-
Java开发网站架构演变过程，到目前为止，大致分为5个阶段，分别为单体架构、集群架构、分布式架构、SOA架构和微服务架构。下面玄武老师来给大家详细介绍下这5种架构模式的发展背景、各自优缺点以及涉及到的...
- 本地缓存GuavaCache(一)（guava本地缓存原理）
-
在并发量、吞吐量越来越大的情况下往往是离不开缓存的，使用缓存能减轻数据库的压力，临时存储数据。根据不同的场景选择不同的缓存，分布式缓存有Redis，Memcached、Tair、EVCache、Aer...
- 一周热门
- 最近发表
- 标签列表
-
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- parsevideo (33)
- 个人网站源码 (37)
- centos7.4下载 (33)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- jdk1.8.0_191下载 (33)
- axure9注册码 (33)
- pts/1 (33)
- spire.pdf 破解版 (35)
- shiro jwt (35)
- sklearn中文手册pdf (35)
- itextsharp使用手册 (33)
- 凯立德2012夏季版懒人包 (34)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)
- dos 删除目录下所有子目录及文件 (36)