4

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 Wipe

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
Lapidus
  • 925
  • 1
  • 10
  • 16
  • What are you trying to accomplish? Do you simply want a blue circle to appear (sweeping around)? Or do you want one image or piece of content to be replaced by another (with the new one sweeping around over the old one)? – Matt Coughlin Mar 23 '13 at 21:22
  • Basically just a circle that fills up. To display a song's duration, like iTunes does. – Lapidus Mar 24 '13 at 19:41

1 Answers1

6

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:

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59