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