load-vue(定製化+趣味性的加載動畫插件)

背景介紹：

你們好，我是六六。通過測試，一款加載動畫插件完美髮布。寫這個插件的初衷有兩點，第一就是加載loading的有趣性,在加載過程變的有趣，大大地提高用戶體驗感。第二就是定製化，開發者能夠根據本身的需求隨意改變更畫的大小，顏色，速度等。已經成功運用在個人仿蘑菇街商城項目裏面運行了，效果仍是ok的。若是你們以爲能夠歡迎使用哦，若是有什麼問題或建議隨時call我。我會及時改進的。同時若是大家有更好的素材也能夠分享給我，目前素材比較少，好了來看看效果吧。

使用：

1.安裝：

npm  install load-vue --save
複製代碼

2.使用注意：

使用模板方式的話，必定要將isShow先置爲false，在經過js使isShow變成true.（我是經過觀察isShow變化啓動動畫的）

loading功能：

1.

使用方法及參數說明：

2.

使用方法及參數說明：

3.

使用方法及參數說明：

4.

使用方法及參數說明：

5.

使用方法及參數說明：

6.

使用方法及參數說明：

開發遇到的問題：

1.已解決

問題：使用setInterval會形成卡頓。
解決：使用requestAnimationFrame函數。（推薦作動畫的函數）

2.已解決

問題：重複獲取canvas對象。
解決：啓動動畫前獲取一次就好。

3.已解決

問題：未實現編程式組件。
解決：經過extend構造器實現。

4.已解決（效果不是很好）

問題：不能對vue外面的構造函數傳參。
解決：經過localstrange實現數據共享。

5.未解決|經過Map數據結構

問題：大量的if判斷數據溢出，判斷運動狀態。

6.已解決

問題：有加載條時 當組件隱藏時，須要對數據進行初始化 ，其實就是對vue數據進行初始化。
解決：Object.assign(this.$data, this.$options.data())

7.終極解決方案

問題：沒法獲取canvas對象。
解決：使用v-if組件沒法獲取canvas對象 使用v-show會影響到頁面，經過wacth對isShow進行觀察，在經過$nextTick獲取ctx。

8.導入導出問題

問題：不如其餘插件那麼雅觀
解決：熟悉es6導入導出規範後能夠解決。

9.以解決

問題：屢次調用動畫,動畫累加
解決：觀測isShow爲false時，經過cancelAnimationFrame取消動畫。

結束

我會一直更新維護這個插件的，如今素材比較少，我相信，總有一天，會成功的。
你們也多提意見，讓這個插件會愈來愈好的。

github地址：點擊進入github