Question

我需要将圆圈的高度和宽度增加一倍。但这不起作用。请建议我在代码中放置错误的位置。我不知道r的价值。请帮助我更新r的值。

这是我的示例代码。

var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
  $('.circle_animation').css(
    'stroke-dashoffset',
    initialOffset - (i * (initialOffset / time) * (r / 69.85699))
  );
  $('h2').text(i);
  if (i == time) {
    clearInterval(interval);
  }
  i++;
}, 1000);

    .item {
      position: relative;
      float: left;
    }

    .item h2 {
      text-align: center;
      position: absolute;
      line-height: 125px;
      width: 100%;
    }

    svg {
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }

    .circle_animation {
      stroke-dasharray: 440;
      /* this value is the pixel circumference of the circle */
      stroke-dashoffset: 440;
      transition: all 1s linear;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
  <h2>0</h2>
  <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
         <g>
          <title>Layer 1</title>
          <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
         </g>
        </svg>
</div>

Answer 1

您猜到了，必须更改r的值才能更改半径。

如果我们查看javascript代码：

    var r = $(".circle_animation").attr("r");

这意味着r是类名称为r的元素的html属性circle_animation的值。

如果我们再看一下html标记：

    <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>

我们看到在类名称为circle_animation的圆上r设置为69.85699

此后，您必须记住，由于绘制了更大的圆圈，因此还必须将svg的大小以及stroke-dasharray和stroke-dashoffset都加倍（这些值应该是2 * 2 * PI * r为该动画）。

以下是您要求的半径加倍的示例：

var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
    $('.circle_animation').css(
        'stroke-dashoffset',
        initialOffset-(i*(initialOffset/time)*(r/139.71398))
    );
    $('h2').text(i);
    if (i == time) {
        clearInterval(interval);
    }
    i++;  
}, 1000);

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
    margin-top: 60px;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 878; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 878;
  transition: all 1s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
    <h2>0</h2>
    <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="139.71398" cy="162" cx="162" stroke-width="8" stroke="#6fdb6f" fill="none"/>

Answer 2

您的半径为69.85699。为了简单起见，请考虑使用70。

双精度将为140，该圆的周长将为880 现在您的cx和cy还应该考虑笔画的偏移量/宽度。因此，140 + (8/2)

大多数其他计算都很简单，因为您已经完成了。

var time = 10;
var initialOffset = '880';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
    $('.circle_animation').css(
        'stroke-dashoffset',
        initialOffset-(i*(initialOffset/time)*(r/140))
    );
    $('h2').text(i);
    if (i == time) {
        clearInterval(interval);
    }
    i++;  
}, 1000);

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align: center;
    position: absolute;
    line-height: 265px;
    width: 100%;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 880; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 880;
  transition: all 1s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
    <h2>0</h2>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="140" cy="144" cx="144" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

Answer 3

您需要此，检查此小提琴并输入https://jsfiddle.net/rmcej7vk/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
  <h2>0</h2>
  <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
         <g>
          <title>Layer 1</title>
          <circle id="circle" class="circle_animation" r="139.7139" cy="162" cx="162" stroke-width="8" stroke="#6fdb6f" fill="none"/>
         </g>
        </svg>
</div>

JS

var time = 10;
var initialOffset = '880';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
  $('.circle_animation').css(
    'stroke-dashoffset',
    initialOffset - (i * (initialOffset / time) * (r / 139.7139))
  );
  $('h2').text(i);
  if (i == time) {
    clearInterval(interval);
  }
  i++;
}, 1000);

CSS

.item {
      position: relative;
      float: left;
    }

    .item h2 {
      text-align: center;
      position: absolute;
      line-height: 250px;
      width: 100%;
    }

    svg {
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }

    .circle_animation {
      stroke-dasharray: 880;
      /* this value is the pixel circumference of the circle */
      stroke-dashoffset: 880;
      transition: all 1s linear;
    }

需要增加圆的高度和宽度

3 个答案: