起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure9 教程：圖表載入效果（柱狀圖/折線圖/餅圖）
導讀：我們在設計原型時會經常使用到圖表，給圖表加一點載入時的動效會讓圖表更加生動。今天我們來簡單介紹下在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 協議
角色權限
源文件下載不了，找不到