ionicで進捗を表すアニメーションを使う

簡単に進捗を表すアニメーションを実装したい

iPhoneアプリ・AndroidアプリをIonicで実装中。

円形のアニメーションを表現したく、
https://github.com/kimmobrunfeldt/progressbar.js
を発見。
実際にionicでこれを使ってみることに。

インストール

npm install progressbar.js

早速使ってみる

ionic start progressbarSmpl

インストールが完了すると以下が追記されているはず。

package.json

"dependencies": {
  "progressbar.js": "^1.0.1",
}

空のプロジェクトを作成して、早速home.tsで使ってみる

home.ts

const ProgressBar = require('progressbar.js'); ← add line

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
....

このままだとrequireが使えないので

home.ts

declare function require(x: string): any;

これを追加して、準備完了。

LineとCircleのサンプル

home.ts

  ionViewDidLoad() {
    const element = document.getElementById('example-line-container');
    const line = new ProgressBar.Line(element, {
      color: "#FCB03C",
      trailColor: "#aaa"
    });

    line.animate(1, function() {
      line.animate(0);
    })
    const container = document.getElementById('example-circle-container');
    const bar = new ProgressBar.Circle(container, {
      strokeWidth: 6,
      easing: 'easeInOut',
      duration: 1400,
      color: '#FFEA82',
      trailColor: '#eee',
      trailWidth: 1,
      svgStyle: null
    });

    bar.animate(1.0);
  }