SVG圆形动画

Question

SVG圆形动画

5

我正在尝试制作一个圆形动画，
目前我有这个代码：http://jsfiddle.net/gf327jxu/1/

<svg width="100" height="100" class="circle">
   <circle cx="50" cy="50" r="40" />
</svg>

CSS：

.circle{
stroke:green;
stroke-width:10;
fill:none;
}

我希望它像圆形进度条一样动态，类似于这个： http://jsfiddle.net/andsens/mLA7X/ 但在SVG上实现，而且我需要它是顺时针的，如何实现这个功能，是否可能？

- robert

1

与CSS3中所需的效果相关的问题：https://dev59.com/1IHba4cB1Zd3GeqPMhQi#24486333 - web-tiki

可能是[CSS3旋转器，预加载程序]的重复问题（https://dev59.com/1IHba4cB1Zd3GeqPMhQi）。 - Paulie_D

对于纯SVG解决方案：您可以通过动画化stroke-dashoffset来实现这种效果，http://xn--dahlstrm-t4a.net/svg/path/piecharts.html是一个例子。 - Erik Dahlström

4个回答

4

这里有一个纯SVG的解决方案: codepen

<svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" xml:space="preserve">
    <circle fill="none" stroke="#000" stroke-width="4" cx="50" cy="50" r="48" stroke-dasharray="360" stroke-linecap="round" transform="rotate(-90 ) translate(-100 0)" >
        <animate attributeName="stroke-dashoffset" values="360;0" dur="2s" repeatCount="indefinite"></animate>
    </circle>
</svg>

- normad

3

const countdownNumberEl = document.getElementById('countdown-number');
const circle = document.getElementById('circle');

let countdown = 25;
const radius = Number(circle.getAttribute('r'));
const circumference = 2 * radius * Math.PI;

circle.style.transition = `all ${countdown}s linear`

countdownNumberEl.innerHTML = countdown;

function startTimer() {
  const interval = setInterval(() => {
    countdown = countdown - 1;
    countdownNumberEl.innerHTML = countdown;
    
    if (countdown === 0) {
      clearInterval(interval);
    }
  }, 1000);

  circle.setAttribute('stroke-dasharray', circumference);
  circle.setAttribute('stroke-dashoffset', circumference);
}

setTimeout(() => startTimer(), 0)

body {
  background: #333;
  font-family: sans-serif;
}

#countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 60px auto;
  height: 80px;
  width: 80px;
}

#countdown-number {
  color: darkgray;
}

svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg) rotateZ(-90deg);
}

<div id="countdown">
  <p id="countdown-number"></p>
  <svg>
    <circle r="24" cx="40" cy="40 "stroke-linecap="round" stroke-width="2" fill="none" stroke="black"></circle>
  </svg>
  <svg>
    <circle id="circle" r="24" cx="40" cy="40" stroke-linecap="round" stroke-width="2" fill="none" stroke="darkgray"></circle>
  </svg>
</div>

- Ali Klein

0

<!DOCTYPE html>
<html>
    <head>
        <title>svg circle animation</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #XMLID_4_{
                stroke-dasharray: 1000;
                stroke-dashoffset: 2000;
                fill: #FFFFFF;
                stroke: #000000;
            }
            svg:hover #XMLID_4_{
                -webkit-animation: draw 3s forwards;
                animation: draw 3s;
            }
            @keyframes draw{
                from{
                    stroke-dashoffset: 1000;
                    fill:#efefef;
                    stroke:#ff5535;
                }
                to{
                    stroke-dashoffset: 0;   
                }
            }
            @-webkit-keyframes draw{
                from{
                    stroke:#ff5535;
                    stroke-dashoffset: 1000; 
                }
                to{
                    stroke-dashoffset: 0;   
                }
            }
        </style>
    </head>
    <body>
        <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
        <g>
        <circle id="XMLID_4_"  stroke-width="3" stroke-miterlimit="10" cx="366.5" cy="135.6" r="44.7"/>
        </g>
        </svg>
    </body>
</html>

- Nikit Barochiya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alvin K. · Accepted Answer

这里是一个范例。

注意：我使用了r = 57，因为周长为358.1，接近于360度。对于不同的r值，需要计算stroke-dasharray。

非常感谢@Robert Longson、@Erik Dahlström和@Phrogz多年来在SO上提供的解决方案。此范例只是他们改进的其中之一。

(function() {
  // math trick 2*pi*57 = 358, must be less than 360 degree 
  var circle = document.getElementById('green-halo');
  var myTimer = document.getElementById('myTimer');
  var interval = 30;
  var angle = 0;
  var angle_increment = 6;

  window.timer = window.setInterval(function() {
    circle.setAttribute("stroke-dasharray", angle + ", 20000");
    myTimer.innerHTML = parseInt(angle / 360 * 100) + '%';

    if (angle >= 360) {
      window.clearInterval(window.timer);
    }
    angle += angle_increment;
  }.bind(this), interval);
})()

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
    <circle cx="100" cy="100" r="57" id="green-halo" fill="none" stroke="#00CC33" stroke-width="15" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
    <text id="myTimer" text-anchor="middle" x="100" y="110" style="font-size: 36px;" >0%</text>
</svg>