作品名稱：圖表載入效果
作品編號：Case004
軟件版本：Axure9
作品類型：交互案例
我們在設(shè)計(jì)原型時(shí)會經(jīng)常使用到圖表忌锯，給圖表加一點(diǎn)載入時(shí)的動(dòng)效會讓圖表更加生動(dòng)。今天我們來簡單介紹下在Axure中實(shí)現(xiàn)柱狀圖拓诸、折線圖、餅圖載入效果的方法。
原型預(yù)覽鏈接：
http://daisyaxure.com/demo/Case004
請復(fù)制以上鏈接至電腦瀏覽器查看效果（附源文件下載鏈接）
- 柱狀圖?-
1.拖入一個(gè)【矩形】元件嘲叔，設(shè)置初始的高度為：1px,寬度和填充顏色自定。
2.矩形上方拖入一個(gè)【文本標(biāo)簽】抽活，設(shè)置數(shù)字文本硫戈，初始隱藏。
3.給上述矩形元件添加一個(gè)【載入時(shí)】的效果下硕，高度自定丁逝，動(dòng)畫選擇【線性】【500s】效果,錨點(diǎn)的位置選擇底部；顯示【2】中拖入的文本標(biāo)簽梭姓，動(dòng)畫選擇【逐漸】【500s】霜幼。
查看效果
- 折 線 圖?-
1.使用【鋼筆工具】繪制出我們想要的折線圖，完成后只需要選中畫完的折線圖右鍵選擇【曲線連接各點(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)畫選擇【線性】【500s】效果即可。
查看效果
- 餅 圖?-
1.拖入一個(gè)【圓形】元件探熔，填充顏色為紫色驹针，命名為：【purple】，調(diào)整好大小和位置后選中此元件祭刚，右鍵【選擇形狀】牌捷，選擇第四個(gè)形狀，拖動(dòng)缺口處的軸調(diào)整此圓形的角度涡驮。
2.將其右鍵轉(zhuǎn)換為動(dòng)態(tài)面板暗甥，命名為【purple- panel】；
3.用上述方法我們再制作出3個(gè)圓形捉捅，所有餅圖的角度加起來為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)面板通過旋轉(zhuǎn)一定的角度漾肮，實(shí)現(xiàn)載入的動(dòng)畫效果。
在餅圖的最上方拖入一個(gè)白色的圓形茎毁，輸入文字克懊，即可制作出圓環(huán)的效果忱辅。
