SVG圆弧形动画图表

SVG and GSAP Animated Arc Graph

svg, chart

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*  ==========================================================================
    GLOBAL VARIABLES
    ========================================================================== */

var percs = [22, 17, 57, 4];
var percsRange = []; // array of percentage ranges for the arcs to animate from to
var percsEnd = []; // array of percentages for the divider lines to animate to
var markersAngles = []; // array of percentages for markers to be positioned mid arcs
var $sLine = $('.mt-line'); // starting line
var $mtText = $('.mt-text'); // media type text
var $ring = $('.mt-ring'); // each percentage arc
var $percLine = $('.mt-perc-line'); // percentage divider lines
var $mtBase2 = $('.mt-base-2'); // thick white ring
var $mtTrack = $('.mt-base-2-track'); // thick ring track
var $mtMarker = $('.mt-marker'); // marker lines

/*  ==========================================================================
    INIT ITEMS
    ========================================================================== */

TweenMax.set('svg', {
    visibility: 'visible'
});

TweenMax.set($sLine, {
    drawSVG: '0px 2px'
});

TweenMax.set($percLine, {
    transformOrigin: '1px 200px',
    opacity: 0
});

TweenMax.set($mtBase2, {
    transformOrigin: '50% 50%',
    rotation: -90,
    drawSVG: '0% 0%'
});

TweenMax.set($mtTrack, {
    transformOrigin: '50% 50%',
    drawSVG: '0% 0%'
});

TweenMax.set($mtMarker, {
    transformOrigin: '1px 277px',
    drawSVG: '0% 0%'
});

/*  Set each ring to its starting position and populate arrays
    ========================================================================== */

var addPercs = 0;
$ring.each(function(i, val) {
    percsEnd.push(addPercs);

var tempStart = addPercs;
    // set the starting positions
    TweenMax.set('.mt-ring-' + i, {
        drawSVG: addPercs + '% ' + addPercs + '%'
    });
    // get the ending positions and set the drawSVG ranges in an array
    addPercs = addPercs + percs[i];
    var rangeString = tempStart + '% ' + addPercs + '%';
    percsRange.push(rangeString);
    markersAngles.push((tempStart + (addPercs - tempStart) / 2) / 100 * 360);

});

percsEnd.reverse(); // reverse the array so the line travelling furthest goes first, and so on
markersAngles.reverse(); // reverse the array so the line travelling furthest goes first, and so on

/*  ==========================================================================
    TIMELINE ANIMATION
    ========================================================================== */

/*  ==========================================================================
    SLIDER
    ========================================================================== */

var $slider = $('#slider'),
    sliderValue = {
        value: 0
    };

$slider.slider({
    range: false,
    min: 0,
    max: 100,
    step: .1,
    start: function() {
        mtl.pause();
    },
    slide: function(event, ui) {
        mtl.progress(ui.value / 100);
    },
    stop: function() {
        mtl.play();
    }
});

mtl.eventCallback("onUpdate", function() {
    sliderValue.value = mtl.progress() * 100;
    $slider.slider(sliderValue);
});

编译

CSS

HTML

</div>

SVG and GSAP Animated Arc Graph

svg, chart

编辑器支持Emmet

快捷键

SVG and GSAP Animated Arc Graph

svg, chart

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

使用Anime.js和SVG实现的Mozilla混合图标变形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：