Jquery 使用CSS3/JS的SVG径向擦除动画

如何在CSS3或JS中实现径向擦除动画？ 这看起来很简单，但我搞不懂。

---

下面是使用jQuery执行此操作的基本方法。可能有一些插件可以简化这一过程

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>

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

//绘制圆弧的实用函数
函数drawCircleArc（元素、角度）{
var endAngleDeg=角度-90；
var endAngleRad=（endAngleDeg*数学PI）/180；
var largeArcFlag=（角度<180？'0'：'1'）；
var endX=数学cos（endangelrad）*100；
var endY=100+（数学sin（endangelrad）*100）；
var数据='M100100 v-100 A101000'+大齿轮CFLAG+'，1'+
endX+'，'+endY+'z'；
$（elem）.attr（'d'，数据）；
}
//运行动画的代码
var arcAngle=0；//从0开始，到360结束
var arcAngleBy=10；//每帧度数
var arcAngleDelay=50；//每帧的持续时间（毫秒）
函数updateClircleWipe（）{
arcAngle+=arcAngleBy；
drawCircleArc（“#圆擦拭”，弧角）；
如果（弧角<360）{
setTimeout（函数（）{updateCircleWipe（）；}，arcAngleDelay）；
}
}
setTimeout（函数（）{updateCircleWipe（）；}，arcAngleDelay）；

另请参见：

• （w3schools.com）
• （w3.org）

---

您想实现什么目标？你只是想要一个蓝色的圆圈出现（四处扫荡）？或者你希望一张图片或一段内容被另一张图片或一段内容所取代（新的图片或内容覆盖着旧的图片或内容）？基本上只是一个填满的圆圈。显示歌曲的持续时间，就像iTunes一样。

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