Axure教程:如何制作超簡單機械加載效果

1 評論 2529 瀏覽 14 收藏 3 分鐘

本人教大家,如何利用Axure制作超簡單機械加載效果,enjoy~

看看效果:

Axure教學之超簡單機械加載效果

可以學到什么?

  1. 循環動態面板的應用
  2. 有關循環動畫怎么處理
  3. 自帶元件庫的使用

第一步:繪制

在系統元件庫里搜索“齒輪”。

Axure教學之超簡單機械加載效果

添加三個到畫布,設置尺寸180*180,依次命名齒輪1、齒輪2、齒輪3,如圖分布:

Axure教學之超簡單機械加載效果

第二步:制作動效

創建一個動態面板,添加2個狀態,命名“控制”。

新建交互【狀態改變時】:

  1. 旋轉齒輪2順時針經過360°,動畫線性5000ms;
  2. 旋轉齒輪3逆時針經過360°,動畫線性5000ms;
  3. 旋轉齒輪1逆時針經過360°,動畫線性5000ms。

Axure教學之超簡單機械加載效果

然后需要驅動“控制”動態面板循環的交互,在什么都不選擇的情況下,點擊交互,頁面載入時,設置“控制”動態面板下一項循環間隔5000ms。

Axure教學之超簡單機械加載效果

以上做的兩個步驟即每隔5秒觸發一次動態面板循環,動態面板循環一次,就轉動齒輪一周,轉動時間5秒。

第三步:效果

有沒有感覺很舒服!??!用循環動態面板同樣可以做出加載中省略號從一點到三點循環下去的效果,大家動動腦筋做做看吧!

Axure教學之超簡單機械加載效果

 

本文由 @索大佩羅娜 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 看完一篇原型設計文章啦,感覺還是不太會?

    ?? 想從0基礎開始學習Axure么?推薦你找Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包

    領取原型設計大禮包,多學多練,你也能成為原型設計高手哦!

    來自廣東 回復