SVG学习笔记（二）作一个Loading动画

用SVG作一个Loading动画

博客原文连接

概述

以前作加载效果都是用的html结合css，此次用SVG感受还挺省事的

准备

开始作这个加载效果以前，须要先了解一下两个属性，stroke-dasharray和stroke-dashoffset

这两个属性能够看下面张鑫旭大神的文章，说的仍是很清楚的

stroke-dasharray和stroke-dashoffset资料

实现

一、基础效果

代码：

<svg width="100" height="100">
  <style> #svg-loading-base circle { stroke-dasharray: 250; stroke-dashoffset: 250; animation: svg-loading-base 1s ease infinite; } @keyframes svg-loading-base { to { stroke-dashoffset: 0; opacity: 0.1; } } </style>
  <g id="svg-loading-base">
    <text x="50" y="55" style="text-anchor: middle; fill: #5CC9F5; font-size: 14px;">加载中</text>
    <circle cx="50" cy="50" r="40" style="fill: none; stroke: #5CC9F5; stroke-width: 5px; stroke-dasharray: null; stroke-dashoffset: null" />
  </g>
</svg>
复制代码

这个基础版比较简单，就是单纯经过stroke-dasharray和stroke-dashoffset两个属性来设置线段分隔长度和偏移量，而后使用animation动画逐渐减小stroke-dashoffset偏移量的值实现

二、加速版

代码：

<svg width="100" height="100">
  <style> #svg-loading-fast circle { animation: svg-loading-fast 2s ease infinite; } @keyframes svg-loading-fast { from { stroke-dasharray: 250; stroke-dashoffset: 250; } to { stroke-dasharray: 0; stroke-dashoffset: 0; opacity: 0.5; } } </style>
  <g id="svg-loading-fast">
    <text x="50" y="55" style="text-anchor: middle; fill: #5CC9F5; font-size: 14px;">加载中</text>
    <circle cx="50" cy="50" r="40" style="fill: none; stroke: #5CC9F5; stroke-width: 5px; stroke-dasharray: null; stroke-dashoffset: null" />
  </g>
</svg>
复制代码

基础版比较单调，这个加速版就先不设置默认的stroke-dasharray和stroke-dashoffset，直接在animation动画设置后逐渐减小

三、滚动版

代码：

<svg width="100" height="100">
  <style> #svg-loading-rolling circle { stroke-dasharray: 300; stroke-dashoffset: 300; animation: svg-loading-rolling 1.5s linear infinite; } @keyframes svg-loading-rolling { from { stroke-dasharray: 600; stroke-dashoffset: 600; transform: rotate(0); transform-origin: 50px 50px; } to { stroke-dashoffset: 0; transform: rotate(720deg); transform-origin: 50px 50px; opacity: 0.1; } } </style>
  <g id="svg-loading-rolling">
    <text x="50" y="55" style="text-anchor: middle; fill: #5CC9F5; font-size: 14px;">加载中</text>
    <circle cx="50" cy="50" r="40" style="fill: none; stroke: #5CC9F5; stroke-width: 5px; stroke-dasharray: null; stroke-dashoffset: null" />
  </g>
</svg>
复制代码

除了加速版，还能够弄一个滚动版，利用css3里的rotate为circle添加一个旋转动画以后，总体的加载效果比基础版流畅多了

四、心电图版

代码：

<svg width="100" height="100">
  <style> #svg-loading-polyline { stroke-dasharray: 400; stroke-dashoffset: 400; animation: svg-loading-polyline 1s linear infinite; } @keyframes svg-loading-polyline { from { stroke-dasharray: 600; stroke-dashoffset: 600; } to { stroke-dashoffset: 0; opacity: 0.1; } } </style>
  <polyline id="svg-loading-polyline" points="10 90, 30 10, 40 70, 45 60, 55 80, 65 30, 80 80, 90 90" style="fill: none; stroke: #5CC9F5; stroke-width: 3px; stroke-dasharray: null; stroke-dashoffset: null" />
</svg>
复制代码

固然也能够用折线作一个心电图版，效果也不错

总结

利用stroke-dasharray和stroke-dashoffset这两个属性制做动效至关实用，结合css3相关动画，能够快速制做简单美观的动画效果