主页 / 问题 / 1265614
Accepted
Михаил Камахин
Asked:2022-04-03 20:54:38 +0000 UTC2022-04-03 20:54:38 +0000 UTC

用百分比的输出填充字符串圆，相对于另一个圆

  • 772

我想旋转圆，使圆.progressbar__thumb上的线从不同的位置移动。但是出了点问题。告诉我怎么右转？

const progressbarThumb = document.querySelector('.progressbar__thumb');
const progressbarPercent = document.querySelector('.progressbar__percent > tspan');
const progressbarText = document.querySelector('.progressbar__info > tspan');
let frameLoop = null;

function onCompleteGsap() {
  cancelAnimationFrame(frameLoop);
}

gsap.to(progressbarThumb, 5, {
  '--percent': 50,
  onComplete: onCompleteGsap,
  ease: 'linear'
});

function loop() {
  const percent = gsap.getProperty(progressbarThumb, '--percent');

  if (percent > 99) {
    progressbarText.textContent = 'Закончили?';
  } else if (percent > 60) {
    progressbarText.textContent = 'Разгоняемся!';
  } else if (percent > 40) {
    progressbarText.textContent = 'Погнали!';
  }
  progressbarPercent.textContent = Math.round(percent);
  frameLoop = requestAnimationFrame(loop);
}

frameLoop = requestAnimationFrame(loop);
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.progressbar {
  max-width: 150px;
  font-size: 10px;
  --color: rgb(0, 186, 16);
  --percent: 0; /* процент, насколько заполнен круг */
  --PI: 3.141592;
  --r: 30;
  --strokeWidth: 2;
  --total: calc( var(--PI) * var(--r));
}

.progressbar circle {
  r: var(--r);
}

.progressbar text {
  fill: var(--color);
}

.progressbar__percent {
  font-size: 16px;
}

.progressbar__track {
  fill: transparent;
  stroke: #ededed;
  stroke-width: var(--strokeWidth);
}

.progressbar__thumb {
  fill: transparent;
  --strokeDasharray: calc(2 * var(--total) * var(--percent) / 100) calc(2 * var(--total));
  stroke-linecap: round;
  stroke-dasharray: var(--strokeDasharray);
  stroke: var(--color);
  stroke-width: var(--strokeWidth);
  
  transform-origin: center;
  transform: rotate(90deg);
}
<svg class="progressbar" viewBox="0 0 62 80">
    <circle class="progressbar__track" cx="31" cy="31"></circle>
    <circle class="progressbar__thumb" cx="31" cy="31"></circle>
    <text x="32" y="33" class="progressbar__percent" text-anchor="middle" dominant-baseline="middle"><tspan>0</tspan>%</text>
    <text x="32" y="73" class="progressbar__info" text-anchor="middle" dominant-baseline="middle"><tspan>Загрузочка ...</tspan></text>
</svg>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

javascript

1 个回答

  1. Best Answer
    1. 设置元素将被转换的相对点的坐标 -transform-origin: 50% 50%;
    2. 让我们添加一个transform-box带有值的属性，fill-box以便计算相对于元素的百分比。

    const progressbarThumb = document.querySelector('.progressbar__thumb');
const progressbarPercent = document.querySelector('.progressbar__percent > tspan');
const progressbarText = document.querySelector('.progressbar__info > tspan');
let frameLoop = null;

function onCompleteGsap() {
  cancelAnimationFrame(frameLoop);
}

gsap.to(progressbarThumb, 5, {
  '--percent': 100,
  onComplete: onCompleteGsap,
  ease: 'linear'
});

function loop() {
  const percent = gsap.getProperty(progressbarThumb, '--percent');

  if (percent > 99) {
    progressbarText.textContent = 'Закончили?';
  } else if (percent > 60) {
    progressbarText.textContent = 'Разгоняемся!';
  } else if (percent > 40) {
    progressbarText.textContent = 'Погнали!';
  }
  progressbarPercent.textContent = Math.round(percent);
  frameLoop = requestAnimationFrame(loop);
}

frameLoop = requestAnimationFrame(loop);
    *,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.progressbar {
  max-width: 150px;
  font-size: 10px;
  --color: rgb(0, 186, 16);
  --percent: 0;
  /* процент, насколько заполнен круг */
  --PI: 3.141592;
  --r: 30;
  --strokeWidth: 2;
  --total: calc( var(--PI) * var(--r));
}

.progressbar circle {
  r: var(--r);
}

.progressbar text {
  fill: var(--color);
}

.progressbar__percent {
  font-size: 16px;
}

.progressbar__track {
  fill: transparent;
  stroke: #ededed;
  stroke-width: var(--strokeWidth);
}

.progressbar__thumb {
  fill: transparent;
  --strokeDasharray: calc(2 * var(--total) * var(--percent) / 100) calc(2 * var(--total));
  stroke-linecap: round;
  stroke-dasharray: var(--strokeDasharray);
  stroke: var(--color);
  stroke-width: var(--strokeWidth);
  transform-origin: center;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
    <svg class="progressbar" viewBox="0 0 62 80">
    <circle class="progressbar__track" cx="31" cy="31"></circle>
    <circle class="progressbar__thumb" cx="31" cy="31"></circle>
    <text x="32" y="33" class="progressbar__percent" text-anchor="middle" dominant-baseline="middle"><tspan>0</tspan>%</text>
    <text x="32" y="73" class="progressbar__info" text-anchor="middle" dominant-baseline="middle"><tspan>Загрузочка ...</tspan></text>
</svg>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

    • 3

相关问题