SVG radial-wipe animation using CSS3/JS

前端 未结 1 1385
别那么骄傲
别那么骄傲 2021-01-06 23:55

How can i achieve a radial wipe animation in CSS3 or JS? It\'s seems so simple but I can\'t figure it out. \"Radial

相关标签:
1条回答
  • 2021-01-07 00:33

    Here's a basic way of doing it using jQuery. There may be plug-ins available that would simplify this.

    JSFiddle Demo

    HTML

    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    
        <!-- 0 degrees arc -->
        <path d="M100,100 v-100 a100,100 0 0,1 0,0 z"
              id="circle-wipe" fill="#999" stroke-width="0" />
    </svg>
    

    CSS

    svg {
        width: 200px;
        height: 200px;
    }
    

    jQuery

    // Utility function for drawing the circle arc
    
    function drawCircleArc(elem, angle) {
        var endAngleDeg = angle - 90;
        var endAngleRad = (endAngleDeg * Math.PI) / 180;
        var largeArcFlag = (angle < 180 ? '0' : '1');
    
        var endX = Math.cos(endAngleRad) * 100;
        var endY = 100 + (Math.sin(endAngleRad) * 100);
    
        var data = 'M100,100 v-100 a100,100 0 ' + largeArcFlag + ',1 ' +
                    endX + ',' + endY + ' z';
    
        $(elem).attr('d', data);
    }
    
    // Code for running the animation
    
    var arcAngle = 0;        // Starts at 0, ends at 360
    var arcAngleBy = 10;     // Degrees per frame
    var arcAngleDelay = 50;  // Duration of each frame in msec
    
    function updateCircleWipe() {
        arcAngle += arcAngleBy;
    
        drawCircleArc('#circle-wipe', arcAngle);
    
        if (arcAngle < 360) {
            setTimeout(function(){ updateCircleWipe(); }, arcAngleDelay);
        }
    }
    
    setTimeout(function(){ updateCircleWipe(); }, arcAngleDelay);
    

    See also:

    • SVG Path   (w3schools.com)
    • Paths   (w3.org)
    0 讨论(0)
提交回复
热议问题