Vue は動的な円形のパーセンテージ進捗バーを実装します

最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装する必要があることに気付きました。

初心者なので実装が難しいと感じたので、他の人のやり方を見るためにBaiduに行きましたが、満足のいくものは見つかりませんでした。静的な実装か、多くのDOM操作が必要でした。ミニプログラムで直接DOM操作を行うことは避けたほうがよいでしょう。

以下は、Vue コンポーネントの形式で作成した動的実装です。まずは効果図を示します。

効果

実装手順

円グラフを描く

.pie {
  表示: インラインブロック;
  位置: 相対的;
  幅: 150ピクセル;
  高さ: 150px;
  上マージン: 40px;
  境界線の半径: 50%;
  背景: #ccc;
  背景画像: linear-gradient(右へ、透明度 50%、#4479FD 0);
  色: 透明;
  テキスト配置: 中央;
}

比例効果を実現する

これは、疑似要素の遮蔽と動きを追加することで実現されます。コードは次のとおりです。

.pie::before {
  コンテンツ： '';
  位置: 絶対;
  上: 0; 左: 50%;
  幅: 50%; 高さ: 100%;
  境界線の半径: 0 100% 100% 0 / 50%;
  背景色: 継承;
  変換の原点: 左;
  アニメーション: スピン 5 秒 線形無限、背景 10 秒 ステップ終了 無限。
}
@keyframes スピン {
  に { transform: rotate(.5turn); }
}
@キーフレーム背景{
  50% { 背景: #4479FD; }
}

CSSアニメーション遅延プロパティの使用

上記のアニメーション時間をそれぞれ50、100に変更すると、対応する遅延秒数をanimation-delayに直接渡すことができます。たとえば、-60秒は60%で表示されます。

アニメーション再生状態: 一時停止;
アニメーション遅延: -60秒;

トーラス形状の実現

div内に直接配置されたdivを追加する

<div class="pie">
  <div class="pie-inner">
  {{num}}%
  </div>
</div>

一定速度のアニメーションを追加する

startAnimate (ステップ、制限、速度) {
  タイムアウトを設定する(() => {
  // numはパーセンテージです if (this.num < limit) {
      this.num += ステップ
      this.startAnimate(ステップ、制限、速度)
    } それ以外 {
      this.num = 制限
    }
  }、 スピード）
}

計算プロパティをアニメーション遅延にバインドする

数値を対応する遅延秒数にリアルタイムで変換します

計算: {
    遅れ （） {
      `-${this.num}s` を返す
    }
}

要約する

これまでのところ、動的な円形のパーセンテージ進捗バーは基本的に実現されていますが、まだ完璧ではありません。ご意見やご質問がございましたら、お気軽にお寄せください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:

vue+ElementUI+echarts フロントエンドとバックエンドのインタラクションを使用して、Springboot プロジェクトで動的なドーナツチャートを実現する (推奨)
Springboot は、vue+echarts のフロントエンドとバックエンドのインタラクションを使用して、動的なドーナツチャートを実現します。
Vue 円形パーセンテージプログレスバーコンポーネントの機能の実装
Vue で円形プログレスバーを実装する例
Vueは3/4ドーナツチャートの効果を動的に描画します
echarts を使用して Vue でドーナツチャートを作成するサンプルコード
Vueはキャンバスを使用して円を描画します

<<: MySQL コマンドラインモードアクセス操作 MySQL データベース操作

>>: Linux ディスクパーティションの実装の原理と方法の分析