使用CSS3 / JS SVG径向擦拭动画 [英] SVG radial-wipe animation using CSS3/JS

问题描述

我如何能实现径向擦拭动画CSS3和JS？
这似乎很简单，但我不能弄明白。

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

推荐答案

下面是使用jQuery做的一个基本途径。有可能是将简化可用插件。

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

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

参见：

• SVG路径＆NBSP; （w3schools.com）


• 路径＆NBSP; （w3.org）

• SVG Path   (w3schools.com)
• Paths   (w3.org)

这篇关于使用CSS3 / JS SVG径向擦拭动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！