SVG电弧（圆形闪电）加载动画

⚡ Electric SVG Loader ⚡

svg, loader

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 5604
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

console.clear();

var svgns = "http://www.w3.org/2000/svg";
var twoPI = Math.PI * 2;

function ElectricLine() {
    var radius = arguments.length <= 0 || arguments[0] === undefined ? 48 : arguments[0];
    var startOffset = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];

var path = document.createElementNS(svgns, 'path');

var coords = [];
    var centerX = 50;
    var centerY = 50;

for (var i = 0; i <= twoPI + 0.1; i += 0.1) {
        coords.push(centerX + Math.sin(i + startOffset) * radius, centerY + Math.cos(i + startOffset) * radius);
    }

// Slightly randomize the points
    function updateElectricLine() {
        path.setAttribute('d', coords.map(function(point, i) {
            return (i == 0 ? 'M' : i % 2 == 0 ? 'L' : ',') + Math.round((point + Math.random() * 3) * 100) / 100;
        }).join(''));
    }

path.style.animationDelay = '0s, ' + -Math.random() + 's';
    //path.style.animationDuration = (1.5 + Math.random()) + 's, ' + 0.2 + ( Math.random() * 0.4 ) + 's';

updateElectricLine();

// Have to get it in the dom for `getTotalLength` to work
    var tempSVG = document.createElementNS(svgns, 'svg');
    tempSVG.appendChild(path);
    document.body.appendChild(tempSVG);

// Get the line length
    var length = path.getTotalLength();
    document.body.removeChild(tempSVG);

// Set an accurate strokeDasharray & offset for the animation
    path.style.strokeDasharray = length / 2; //( length * 0.48 ) + ' ' + ( length * 0.52 );
    path.style.strokeDashoffset = -length;

return {
        el: path,
        update: updateElectricLine
    };
}

var lines = [new ElectricLine(35, Math.PI * 0.0), new ElectricLine(34.5, Math.PI * 1.0), new ElectricLine(34, Math.PI * 0.25), new ElectricLine(33.5, Math.PI * 1.25), new ElectricLine(33, Math.PI * 0.5), new ElectricLine(32.5, Math.PI * 1.5)];

var svg = document.querySelector('.electric-loader g');
lines.forEach(function(line) {
    svg.appendChild(line.el);
});

var t = 0;

function update() {
    requestAnimationFrame(update);
    if (t % 7 == 0) {
        lines.forEach(function(line) {
            line.update();
        });
    }
    t++;
}

update();

编译

CSS

HTML

⚡ Electric SVG Loader ⚡

svg, loader

编辑器支持Emmet

快捷键

⚡ Electric SVG Loader ⚡

svg, loader

SVG+CSS3 弹圈（跳绳）加载动画

SVG绘制的缓存加载（buffer loader）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：