CHARTIST.JSとScrollMagicを使ってスクロール到達時のアニメーションを実装してみた

どうもですよはやちですよ٩( ᐛ )و

今回は、CHARTIST.JSで作ったグラフをScrollMagicと一緒に使用してアニメーション実装をしました。実装方法をご紹介します٩( ᐛ )و

実装方法

まずはじめに、CHARTIST.JSでグラフのアニメーションを作ります。

グラフの設定

seriesでグラフの数値を設定をしてデータを定義します。

//大きいフラグ
let chartBig = new Chartist.Pie('.chart', {
    series: [91, 3, 6]
  }, {
    donut: true,
    donutWidth: 52,
    showLabel: false
  });

//小さいグラフ
let chartSmall = new Chartist.Pie('.chart2', {
    series: [80, 11]
  }, {
    donut: true,
    donutWidth: 52,
    showLabel: false
  });

アニメーションの設定

設定されたグラフを動かすための関数を用意します。

//アニメーションの関数
function charts(elm) {
  
  //グラフの描画するアクション…１
  elm.on('draw',(data)=>{
  
  //グラフに割り当てられたDataを取り出す…２
  if(data.type === 'slice'){
    
    //dasharrayの長さを設定します。
    let pathLength = data.element._node.getTotalLength();
    
    //pathにstroke-dasharrayの数値を代入する。
    data.element.attr({
      'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
    });
   

  //アニメーションの設定…３
   let animationDefinition = {
      'stroke-dashoffset': {
        id: 'anim' + data.index,
        dur: 1000,
        from: -pathLength + 'px',
        to:  '0px',
        easing: Chartist.Svg.Easing.easeOutQuint,
        //fillの初期値を設定、これがないと最初のアニメーションがみれなくなってしまう。
        fill: 'freeze'
      }
    };
    
    
//最初のdataでない場合、アニメーションの時間を計測して前のアニメーションの終了イベントを発生させる…４
    if(data.index !== 0){
      animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
    }
    
    //pathにstroke-dasharrayの初期値を代入する
    data.element.attr({
      'stroke-dashoffset': -pathLength + 'px'
    });
    
    //アニメーションの開始
    data.element.animate(animationDefinition, false);
   }
  }); 
}

//デカいグラフのアニメーション
charts(chartBig)…５;
//小さいグラフのアニメーション
charts(chartSmall)…５;

1. drawは描画するための処理
2. seriesで設定した数分dasharrayを計測して、pathにstroke-dasharrayを代入する処理
3. stroke-dashoffsetを動かす設定、easing、delayの設定などアニメーションの設定
4. pathのアニメーションが終わって次のpathのアニメーションを発生させるための処理
5. 設定したグラフを設定

の順に設定してます。
ひとまずできたものがこちら( ˘ω˘)☞三☞ｼｭｯｼｭｯ

スクロールの設定

先ほどの関数をそのままに、グラフの設定と関数の発火タイミングをスクロールマジックの中に書き換えました。

行って戻ってくるとなんども関数が発火されてしまうため、classでアニメーションが一度だけ発火するようにしています。

//Scrollmagic発火
let controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
  triggerElement: '#js-magic'
}).on('start', function () {
  
  //グラフの設定
  let chartBig = new Chartist.Pie('.chart', {
      series: [91, 3, 6]
    }, {
      donut: true,
      donutWidth: 52,
      showLabel: false
    });

  let chartSmall = new Chartist.Pie('.chart2', {
      series: [80, 11]
    }, {
      donut: true,
      donutWidth: 52,
      showLabel: false
  });
  
  //js−magicにclassがついてなかったらアニメーションを発火させる
  if(!$('#js-magic').hasClass('is-animate')){
          //デカいグラフのアニメーション
          charts(chartBig);
          //小さいグラフのアニメーション
          charts(chartSmall);
        $('#js-magic').addClass('is-animate');
   }
}).addTo(controller);

できあがったものがこちらになります( ˘ω˘)☞三☞ｼｭｯｼｭｯ
わかりやすく発火タイミングのlineを敷いてあります。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。