axure画扇形_如何利用axure制作一个动态的饼状图

话不多少,先放图!

饼状图

首先,我们来分析一下动态效果

1.鼠标悬浮饼状块颜色发生了改变,且尺寸发生了变化

2.鼠标移入不同的块内,提示框随着鼠标的移动而移动,且提示框内的文字发生了变化。​

​然后,我们根据这个思路一步一步去实现这个效果

先拖入一个圆,点击右上角的小点转换为自定义形状,选择第四个形状,操作如图一所示

图一

​然后拖动这个形状两头的小点,拖成一个扇形样子,如图二所示。

图二

再拖入一个圆,使其跟这个扇形大小位置完全重合,然后同时选中圆和扇形,鼠标右击点击改变形状-相交,这时候就会发现,只剩扇形的轮廓了,点击去除边框,这样就完成一个扇形的绘制了!然后填充合适的颜色和阴影。同样,用此方法完成剩下的两个互补的扇形~

为什么不直接用刚开始自定义的扇形,而要通过跟一个圆通过改变形状得出的扇形呢?

因为刚开始自定义的扇形他的范围是一个正方形,如图二所示,而改变形状后的扇形的范围则自定义扇形范围的一半。这样就避免了鼠标悬浮在种类一上面的扇形时,会很容易触发其他种类扇形的动效!

​饼状图绘制好了,在加上用水平线、文本标签制作的指示文字,元件部分就准备就绪了,那我们就开始设计交互吧!

​首先是鼠标悬浮饼状块颜色发生了改变,且尺寸发生了变化,交互设置入图三所示

图三

​其他的扇形交互设置基本上也是这样的,值得注意的是,设置尺寸的时候这三个扇形的锚点不一致,左侧的扇形锚点在右侧,右侧的扇形锚点在左侧,下面的扇形的锚点在顶部!

然后我们就开始设计鼠标移入,提示框随着鼠标的移动而移动​,且提示框内的文字发生变化的交互了。

首先我们利用矩形工具制作下面三个提示框,从左到右,我这里分别取名为1,2,3​

图四

​选中这三个提示框,右击设为隐藏。

分别选中种类1、种类2、种类3对应的扇形,设置交互,如图五、六、七所示

图5

图6

图7

​设置完成后,点击预览就可以看到完整的饼状图效果啦~~~

戳下面下载源文件哟~~~

​链接:https://pan.baidu.com/s/18mrFc3jnEtkUSZRgf7FleA

密码:mwfp

​再告诉大家一个好方法哟~

下载的源文件也就是rp文件,将其后缀名改为rplib后,此文件就可以作为元件素材导出axure的元件库哟~以后想要用,就直接从axure的元件库中拖入工作区即可呢~~~

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页