jvsheng / blog Goto Github PK

svg画loading动画

svg的入门知识可以看这个，http://www.w3school.com.cn/svg/，都是一些文档上有的，不再赘述。

在看loading组件源码的时候，发现对于加载中动画，官方并没有使用图片而是用的svg。代码如下所示：

<svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
  <circle class="path" cx="50" cy="50" r="20" fill="none"/>
</svg>

jsfiddle demo: https://jsfiddle.net/Viajes/4yn8uybL/
这种svg图片的整体动画效果可以通过animation实现

1. 增加一个css动画，通过改变dasharray, dashoffset实现svg绘制路径的变化
2. 增加一个css动画，让loading图片不断地360旋转

viewBox

首先考虑一个问题，如果我们需要改变loading圆的大小，是否需要每次改变圆心的坐标和圆的半径？有没有更简单粗暴的方法？

有没有可能，使用一个视口区域，在这个区域中画一个圆。然后对于不同大小的svg容器，自适应的缩放这个视口区域中的图片，显示在容器中。viewBox的作用就是这样。

viewBox值有4个数字：

viewBox="x, y, width, height"  // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！

更直观的解释：

1. 如果没有viewBox, 应该是长这样的：
   
   rect大小只有整个SVG舞台的1/20.

2. viewBox="0,0,40,30"相当于在SVG上圈了下图左上角所示的一个框框：
   

3. 然后把这个框框，连同框框里的小矩形一起放大到整个SVG大小（如下gif）:
   

更具体的，可以看这篇，理解SVG viewport,viewBox,preserveAspectRatio缩放

自定义指令

官方文档：自定义指令
jsfiddle demo: https://jsfiddle.net/Viajes/nvenjgos/

只贴几点容易被忽略的：

1. bind 和 inserted 的区别
   bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
   inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

2. update 和 componentUpdated 的区别
   update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
   componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用

其次，对于 binding.modifiers，在loading组件中用到了，可以用来标识一些变量。比如是全屏，还是特定节点（v-loading.fullscreen, v-loading.body, v-loading）

Vue.extend应用

考虑一个场景，当我们自定义一个指令，同时这个指令在操作DOM的同时，还需要一个html模板的时候，怎么办？

在写angularjs1.5的时候，可以直接指定templateUrl：

而在Vue中，可以通过Vue.extend，生成一个Vue示例来进行挂载。
Vue.extend官方文档：https://cn.vuejs.org/v2/api/index.html#Vue-extend

在loading组件中的使用：

// loading.vue文件，导出一个Vue示例，包含了模板

import Loading from './loading.vue';
const Mask = Vue.extend(Loading);

const mask = new Mask({
  el: document.createElement('div'),
  data: {}
});
el.instance = mask;
el.mask = mask.$el;

提供了一种新的思路吧，也同时可以看到Vue.extend在实际开发中的应用。

loading遮罩定位

官方提供了三种定位方式：
1.v-loading.fullscreen，loading元素会添加到body中，fixed定位全屏
2.v-loading.body，loading元素会添加到body中，但是大小只覆盖了绑定指令的那个元素。
3.v-loading，loading元素会添加到绑定指令的那个元素中，大小只覆盖了绑定指令的元素。

对于只覆盖指定元素的loading效果，下面这种写法可以学习一下：

['top', 'left'].forEach(property => {
  const scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
  el.maskStyle[property] = el.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] + 'px';
});

['height', 'width'].forEach(property => {
  el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px';
});

可以学到两点：

1. 这种获取width，height时，通过forEach来操作的简单粗暴的写法。
2. scrollTop/scrollLeft的兼容性写法，要考虑 document.body 和 document.documentElement的特殊情况。

延伸

• SVG动态绘制不规则图形
• 线条之美，玩转SVG线条动画