1
votes

Besoin d'augmenter la hauteur et la largeur du cercle

Je dois augmenter la hauteur et la largeur du cercle pour doubler. Mais ça ne marche pas. Veuillez me suggérer où j'ai mis l'erreur dans le code. Je n'ai aucune idée de la valeur de r . Veuillez m'aider à mettre à jour la valeur de r .

Voici mon exemple de code.

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

    .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;
    }

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

javascript jquery html css

1 commentaires

vous avez raison sur l'approche, mais quelques valeurs doivent être mises à jour en raison de règles mathématiques. bonne chance.

3 Réponses :

1
votes

Comme vous l'avez deviné, vous devez changer la valeur de r pour changer le rayon.

Si nous regardons le code javascript:

<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"/>

Cela signifie que r est la valeur de l'attribut html r de l'élément avec le nom de classe circle_animation .

Si nous regardons ensuite le balisage html:

.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;
}

nous voyons que r est mis à 69.85699 sur le cercle avec le nom de classe circle_animation p >

Après cela, vous devez vous rappeler que puisque vous dessinez un cercle plus grand, vous devrez également doubler la taille du svg et du stroke-dasharray et stroke-dashoffset (ces valeurs sont censées être 2 * 2 * PI * r pour cette animation).

Voici votre exemple avec un rayon doublé comme vous l'avez demandé:

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

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

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

2 commentaires

Veuillez exécuter le code et vous voyez une rupture de cercle après le compte 6.

Vous avez raison, j'ai oublié de doubler également la valeur de setInterval. J'ai mis à jour la réponse.

0
votes

Vous en avez besoin, vérifiez ce violon et codez https://jsfiddle.net/rmcej7vk/ HTML

.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;
    }

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

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

p >

0 commentaires

1
votes

votre rayon est 69.85699 sur le cercle. considérons 70 pour plus de simplicité.

le double sera 140 , la circonférence de ce cercle serait 880 maintenant, votre cx et cy doivent également prendre en compte le décalage / la largeur du trait. donc, 140 + (8/2)

la plupart des autres calculs sont simples car vous les avez déjà effectués.

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

.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;
}

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

0 commentaires