【リハビリJS学習】瞑想アプリを作る③

JS学習のため、瞑想アプリ作成をする第三回。

↓前回はこちら

12. CSSを調整する

// 〜中略〜
.sound-picker {
  button {
    width: 120px;
    height: 120px;
    padding: 30px;
    border: none;
    border-radius: 50%;
    &:nth-child(1) {
      background-color: #4972a1;
    }
    &:nth-child(2) {
      background-color: #a14f49;
    }
    img {
      height: 100%;
    }
  }
}

13.　app.jsで関数を作成する

// 
const app = () => {
  const song = document.querySelector('.song');
  const play = document.querySelector('.play');

  // 再生ボタンのアウトラインをアニメーション化
  const outline = document.querySelector('.moving-outline circle');
  const video = document.querySelector('.vid-container video');
  // サウンドを選択 全てのボタンを取得したいのでquerySelectorAll
  const sounds = document.querySelectorAll('.sound-picker button');
  // 時間表示
  const timeDisplay =document.querySelector('.time-display');
  // 再生ボタンの輪郭の長さを取得
  const outlineLength = outline.getTotalLength();
  console.log(outlineLength);
    // 継続時間（実際には曲全体の長さを取得するのではないので fake とする
  let fakeDuration = 600;
}
app();

const outlineLength = outline.getTotalLength();
SVGのパスの長さを取得することができる

再生ボタンの輪郭を取得できているか確認できたらconsole.logは消してOK。

1４.　app.jsでアニメーション化する部分の関数を作成する

    // 〜中略〜
  /* アニメーション化 */
  // stroke-dasharrayとstroke-dashoffsetを取得し、
  // それらのプロパティをアニメーション化してゼロから開始しているように見せる

  outline.style.strokeDasharray = outlineLength;
  outline.style.strokeDashoffset = outlineLength;
}

app();

このアウトラインの全長から瞑想時間に合わせてカウントダウン（長さを減らしていく？）していくイメージ💡

strokeDasharray
図形の輪郭線を描くのに用いるダッシュとすき間のパターンを定義する

// 100pxの線・100pxのすき間の点線になる
outline.style.strokeDasharray = 100;

strokeDashoffset
関連する破線をレンダリングするうえで、オフセットを定義する

// 200pxのすき間ができる
outline.style.strokeDashoffset = 200;

参考：

===
jsでsvgを操作したのは初めてだった！