使用CSS3/JS的SVG徑向擦除動畫

Question

如何在CSS3或JS中實現徑向擦除動畫？ 這似乎很簡單，但我無法弄清楚。

Answer 1

以下是使用jQuery進行此操作的基本方法。有可能會有插件可以簡化這一點。

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); 

參見：

• SVG Path  （w3schools.com）
• Paths  （w3.org）