Axure如何制作动态玫瑰蛋糕？
点击观看视频教程
Axure制作动态玫瑰饼图教程；
一、生产完成后应具有以下效果。
根据表格数据自动生成相应玫瑰图；
加载时，系统自动完成玫瑰图动态生成的效果；
当鼠标移动到相应的扇区时，可以查看具体的数据。
二、制作材料及互动本案例以六个扇形玫瑰图为例。所有生产材料均采用Axure天然材料，包括以下材料。1.表格是用来记录每个板块代表的名字和具体数据的，后续操作需要用到，所以最好给每个网格命名，方便后续变量的选取。2.为最大文本创建新的文本标签时，需要在表格中填写最大数据值。例如，上表中的最大数据值是200。此标签仅用于逻辑计算，默认情况下可以隐藏。稍后，您将通过这些数据自动绘制玫瑰图。3.你可以通过右击矩形改变其形状来选择一个扇区，然后调整角度到60度左右，复制六个扇区，放置好，设置不同的颜色。在这种情况下，扇区的默认宽度和高度是200。在加载每个扇区的时候，我们需要先把扇区缩小到一个更小的区域，然后再慢慢放大，这样才能做出一个动态的效果。具体交互如下:1)设置缩小大小——设置扇形大小为当前宽高除以20，锚点为中心。2)等待-等待500秒。这里注意，为了有一个连续的动态效果，第一个将等待500毫秒，第二个将等待1000毫秒，以此类推。3)设置放大尺寸——设置宽度为，表格对应的数据/最大值* his宽度* 20；将高度设置为表格* his height *20对应的数据/最大值。因为之前已经缩小了20倍，所以宽度或者高度乘以20就是恢复原来的形状，然后表格数据除以最大值得到的比值就代表了它在原来基础上的大小的比值。比如表1中的数据是200，最大值是200，比值是1，所以还是200的宽度和高度；表2是190，比值是19/20，那么它的宽度和高度就变成了190，以此类推。请注意，更改大小需要添加动画效果。我们选择线性动画，时间是1000s。4.使用折线和文本标签将折线和文本做成如下图所示的形状，并将每个扇区对应的折线和文本标签逐一组合成组，默认隐藏。我们不想做重复性的工作，而是想直接从表格中获取数据，所以在加载折线文本时加入交互:设置文本——将其分成两部分，前面的数据部分是表格对应的数据，后面的百分比=对应表格的数据/表格数据之和*100。考虑到用不完的情况，还是要用固定的函数来保留小数点。当每个扇区被加载时，我们将在扇区动画完成后显示折线数据组。需要添加以下交互:wait-等待1000秒，与放大后的动画时间一致；
显示——显示相应的多段线组合。
每个扇区都是这样设置的，可以直接复制粘贴，然后适当更改内容。5.右侧的标签栏通过一个矩形和文字，矩形设置为小方块，标签对应每种颜色的标题。这里我们也使用设置文本的交互。在加载标签的标题文本时，将文本的值设置为表格对应的标题文本，这样我们以后只需要填写表格，不需要在标签中重复填写内容。6.标签弹出窗口由矩形构成，调整到合适的大小，选择外部阴影，默认隐藏。稍后，我们将进行一次交互，并移动到相应的扇区，以显示相应的数据。7.热区因为Axure在里面看到的是扇形，但是它的空间也是正方形，这就导致了下面的交互，前面的风扇会挡住后面的扇形。所以这里我们通过热区把扇形的位置围起来，做一个相对高保真的效果。将鼠标移动到热区:display-显示标签弹出窗口。
设置文本——这里我们设置富文本，因为富文本可以设置不同的文本颜色。根据不同的文本，我们分为蓝色雨伞设置蓝色文本，红色雨伞设置红色文本。文本内容由对应的表格标题、文本数据和百分比组成，其中文本数据和百分比与前面介绍的设置折线文本一致，可以直接复制使用。
将鼠标移出热区:隐藏-隐藏标签弹出窗口。鼠标移动时，我们做一个标签跟随鼠标的交互:移动——设置标签弹出并移动到绝对位置，x坐标=Cursor.x+10，y坐标=Cursor.y+10。Cursor.x表示鼠标当前的x坐标，Cursor.y表示鼠标当前的y坐标。以上是关于“Axure如何做动态玫瑰饼状图？”希望能帮到你~！更多Axure原型技巧，尽在Axure相关文章！很多小伙伴选择在网上学习Axure，但是很多都是东拼西凑的学习，这样学的可能和实际操作不一样~所以还是系统学习Axure比较好！Axure的自学视频课相信能给你知识和动手经验~推荐热门课程。
AxureRP原型图零基础入门快速掌握素描+Axure手机支付宝APP设计实用教程AxureAPP唯一精选交互设计教程Axure电商APP购物车交互案例教程。