SVG-анимация с радиальным стиранием с использованием CSS3/JS

Как я могу добиться анимации радиального стирания в CSS3 или JS? Это кажется таким простым, но я не могу понять. Radial Wipe


svg animation jquery svg-animate
person Lapidus    schedule 23.03.2013    source источник
comment
Что вы пытаетесь достичь? Вы просто хотите, чтобы появился синий круг (движущийся вокруг)? Или вы хотите, чтобы одно изображение или часть контента были заменены другим (с новым изображением поверх старого)?   -  person Matt Coughlin    schedule 24.03.2013
comment
В основном просто круг, который заполняется. Чтобы отобразить продолжительность песни, как это делает iTunes.   -  person Lapidus    schedule 24.03.2013

Ответы (1)


arrow_upward
6
arrow_downward

Вот основной способ сделать это с помощью jQuery. Могут быть доступны плагины, которые упростят это.

Демонстрация JSFiddle

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

См. также:

person Matt Coughlin    schedule 24.03.2013