那些創意十足的Loading動效原型合集（一鍵復用！）
APP設計中，我們在很多地方都會用到Loading，全屏載入要Loading，下拉刷新要Loading，上滑載入也要Loading...
所以今天就給大家分享一下我臨摹一些好玩的效果自己做的Loading，相比較高冷的GIF圖，我的Loading們可是能一鍵複製，隨意修改的源文件（所有組件都是可以修改的）喲。當然，如果你願意發揮你的聰明才智，分分鐘擼一個你自己的也不是不闊以！(☆_☆)
原型效果預覽
看不了動圖的話，請直接看鏈接好啦！啊啊啊，為什麼知乎不支持GIF呀，藍瘦香菇（T﹏T）
在線預覽地址：http://www.xiaopiu.com/h5/byId?type=project&id=58fda5094fc138923433df7d
我要怎麼用？
方法一：引用「Loading合集」組件庫，編輯項目時可以從右側公用組件庫中拖拽使用。
方法二：直接點擊編輯項目「Loading合集」，找到想要的Loading效果，跨瀏覽器Tab複製到自己的項目中。
（點擊圖片查看動圖）
備註：如果想要修改顏色再用，一定要記得切換到「原始態」進行修改喲！這樣會對所有狀態生效。
動效怎麼做的？
動效都是通過組件「狀態」做的。
1. 創建狀態：分析每個Loading在動畫過程中會有多少種形態，就依次創建多個「狀態」；
2. 調整時間：調整狀態間的動畫時間和曲線（非必需，依具體效果而定）；
3. 添加事件：給每個狀態添加「定時」事件切換到相應狀態，連接成動畫。
（點擊圖片查看動圖）
我分享的「Loading合集」中每個Loading都是由一個小動效和文案「Loading」組成的，雙擊後選中小動效組件可以看到它的所有狀態和事件，就可以好好琢磨啦！~^_^o~
（點擊圖片查看動圖）
源文件鏈接
原型預覽：http://www.xiaopiu.com/h5/byId?type=project&id=58fda5094fc138923433df7d
原型下載：http://www.xiaopiu.com/square?searchText=Loading%E5%90%88%E9%9B%86
組件庫引用：http://www.xiaopiu.com/square/contr?sort=new&libPop=contr&libId=58ff2eb74c07899660ef8104
其它「資源分享系列」鏈接
電商（天貓商城）APP原型資源分享
WeUI（微信）原型資源分享
外賣（餓了么）APP原型資源分享
音樂（網易雲音樂）APP原型資源分享
新聞閱讀（ZAKER等4個）APP原型資源分享
歡迎大家對我們的原型提出建議，對後面分享內容有哪些期待和想法也可以跟我們交流喲！
如果你覺得還不錯，就點個贊吧！哈哈，給我一點更下去的動力！～動力！～動力！～
推薦閱讀：