SVG 圆形动画

问题描述

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

I am trying to make a circle animation,
I currently have this: 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 中，
而且我需要它是顺时针的，我怎样才能做到这一点，这甚至可能吗?

I want it animated like a circle progress, something like this: http://jsfiddle.net/andsens/mLA7X/ but in SVG,
And I need it to be clockwise, how can I achieve this, and is this even possible?

推荐答案

这是一个小提琴示例.

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

Note: I used r = 57, since the perimeter is 358.1 which is close to 360 degrees. For different r values, you need to calculate the stroke-dasharray

非常感谢@Robert Longson、@Erik Dahlström 和@Phrogz 多年来为 SO 解决方案提供的解决方案.这个小提琴只是他们的调整之一.

Many thanks to @Robert Longson , @Erik Dahlström and @Phrogz for SO solutions over the years.This fiddle is just one of their tweaks.

(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>

这篇关于SVG 圆形动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！