动画和更新进度环

Question

我为我的玩家设计了一个可视的希思计，我将其作为3个水平div来工作，并用圆圈制作了一个，但将两者结合起来，以便可以动态更新圆圈，并可以将动画/分解为片段/条纹一个问题。我只是不知道如何合并方法。

编辑：值得注意的是，我的主要问题是使SVG戒指具有动画条纹，例如能量条。以及使能量条向上滚动，想一想电梯。我可以使其以较小的角度进行动画处理，但我希望它保持笔直并向上移动

这就是我走了多远（JSFiddle https://jsfiddle.net/nekollx/juczm0bh/上的javascript和css）

class ProgressRing extends HTMLElement {
  constructor() {
    super();
    const stroke = this.getAttribute('stroke');
    const radius = this.getAttribute('radius');
    const normalizedRadius = radius - stroke * 2;
    this._circumference = normalizedRadius * 2 * Math.PI;

    this._root = this.attachShadow({
      mode: 'open'
    });
    this._root.innerHTML = `
      <svg
        height="${radius * 2}"
        width="${radius * 2}"
       >
         <circle
           stroke="green"
           stroke-dasharray="${this._circumference} ${this._circumference}"
           style="stroke-dashoffset:${this._circumference}"
           stroke-width="${stroke}"
           fill="transparent"
           r="${normalizedRadius}"
           cx="${radius}"
           cy="${radius}"
        />
      </svg>

      <style>
        circle {
          transition: stroke-dashoffset 0.35s;
          transform: rotate(-90deg);
          transform-origin: 50% 50%;
        }
      </style>
    `;
  }

  setProgress(percent) {
    const offset = this._circumference - (percent / 100 * this._circumference);
    const circle = this._root.querySelector('circle');
    circle.style.strokeDashoffset = offset;
  }

  static get observedAttributes() {
    return ['progress'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'progress') {
      this.setProgress(newValue);
    }
  }
}

window.customElements.define('progress-ring', ProgressRing);

// emulate progress attribute change
let progress = 0;
const el = document.querySelector('progress-ring');

const interval = setInterval(() => {
  progress += 10;
  el.setAttribute('progress', progress);
  if (progress === 100)
    clearInterval(interval);
}, 1000);

Answer 1

您可以为此使用circle。

在svg中，您可以通过dashoffset，dasharray和linking-problems-due-to-symbols-with-abicxx11

使进度环响起

谢谢...