作品名稱(chēng)：圖表載入效果

作品編號(hào)：Case004

軟件版本：Axure9

作品類(lèi)型：交互案例

我們?cè)谠O(shè)計(jì)原型時(shí)會(huì)經(jīng)常使用到圖表，給圖表加一點(diǎn)載入時(shí)的動(dòng)效會(huì)讓圖表更加生動(dòng)。今天我們來(lái)簡(jiǎn)單介紹下在Axure中實(shí)現(xiàn)柱狀圖、折線圖、餅圖載入效果的方法。

原型預(yù)覽鏈接（附源文件下載鏈接）：http://daisyaxure.com/demo/Case004

柱狀圖?

1.拖入一個(gè)【矩形】元件，設(shè)置初始的高度為：1px,寬度和填充顏色自定。

2.矩形上方拖入一個(gè)【文本標(biāo)簽】，設(shè)置數(shù)字文本，初始隱藏。

3.給上述矩形元件添加一個(gè)【載入時(shí)】的效果，高度自定，動(dòng)畫(huà)選擇【線性】【500s】效果,錨點(diǎn)的位置選擇底部；顯示【2】中拖入的文本標(biāo)簽，動(dòng)畫(huà)選擇【逐漸】【500s】。

查看效果

折 線 圖?

1.使用【鋼筆工具】繪制出我們想要的折線圖，完成后只需要選中畫(huà)完的折線圖右鍵選擇【曲線連接各點(diǎn)】就可以生成曲線圖。

2.將繪制完成的折線圖右鍵【轉(zhuǎn)化為動(dòng)態(tài)面板】，設(shè)置此動(dòng)態(tài)面板的寬度為1px。

3.給此動(dòng)態(tài)面板添加一個(gè)【載入時(shí)】的交互，設(shè)置尺寸為動(dòng)態(tài)面板原本的尺寸，動(dòng)畫(huà)選擇【線性】【500s】效果即可。

查看效果

?

餅 圖?

1.拖入一個(gè)【圓形】元件，填充顏色為紫色，命名為：【purple】，調(diào)整好大小和位置后選中此元件，右鍵【選擇形狀】，選擇第四個(gè)形狀，拖動(dòng)缺口處的軸調(diào)整此圓形的角度。

2.將其右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，命名為【purple- panel】；

3.用上述方法我們?cè)僦谱鞒?個(gè)圓形，所有餅圖的角度加起來(lái)為360度，且每個(gè)圓形的起點(diǎn)位置一致。

4.將這4個(gè)圓形所在的動(dòng)態(tài)面板疊放在一起，同時(shí)選中后右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，命名為【panel】。

5.給動(dòng)態(tài)面板【panel】添加載入時(shí)【旋轉(zhuǎn)】的交互，使每一個(gè)圓形所在的動(dòng)態(tài)面板通過(guò)旋轉(zhuǎn)一定的角度，實(shí)現(xiàn)載入的動(dòng)畫(huà)效果。

在餅圖的最上方拖入一個(gè)白色的圓形，輸入文字，即可制作出圓環(huán)的效果。

---

更多高保真原型及交互案例請(qǐng)?jiān)L問(wèn)：http://daisyaxure.com

總結(jié)

以上是生活随笔為你收集整理的【Axure交互教程】图表载入效果（柱状图/折线图/饼图）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。