Web Design Leaves

requestAnimationFrame(() => {
  //ブラウザが再描画可能なタイミングで以下が実行されます
  console.log('OK!');
}); 

//コールバック関数 
const callback = () => {
  console.log('OK!');
}

//ブラウザが再描画可能なタイミングでコールバック関数を実行 
requestAnimationFrame(callback); 

let count = 0;  
  
//コールバック関数の定義
const countUp = () => {
  count++;
  console.log(count);
  
  //コールバック関数を繰り返す条件（必要に応じて設定）
  if(count < 60) {
    //requestAnimationFrame() を使って自身（コールバック関数）を呼び出す（繰り返し）
    requestAnimationFrame(countUp);
  }
}  

//コールバック関数を実行
countUp();

window.cancelAnimationFrame(requestID);

//アニメーション対象の要素
const elem = document.querySelector('.elem');
//開始時刻を代入する変数（最初は未定義）
let start;
//requestAnimationFrame() の戻り値のIDを格納する変数
let requestID;
//background-color の値を出力する要素  
const bgcolor = document.getElementById('bgcolor');
 
//コールバック関数の定義
const changeBGC = (timestamp) => {
  if (start === undefined) {
    //初回実行時の timestamp を start に代入
    start = timestamp;
  }
  //経過時間（start が未定義の場合は0）
  const elapsed = start ? timestamp - start : 0;
  //h (hsl の hue の値)を経過時間を使って生成
  const h = Math.floor(0.03 * elapsed) % 360;
  //要素の背景色を hsl() で設定
  elem.style.backgroundColor = `hsl(${h}, 90%, 50%)`;
  //background-color の値を出力
  bgcolor.textContent = elem.style.backgroundColor;
  //requestAnimationFrame() を呼び出して戻り値のIDを変数に代入
  requestID = requestAnimationFrame(changeBGC);
}

const startBtn = document.getElementById('start');
const stopBtn = document.getElementById('stop');
//Start ボタンにクリックイベントを設定 
startBtn.addEventListener('click', (e) => {
  //アニメーションを開始
  changeBGC();
  //Start ボタンを disabled に
  e.currentTarget.setAttribute('disabled', true);
});
  
//Stop ボタンにクリックイベントを設定
stopBtn.addEventListener('click', () => {
  //アニメーションを中止（キャンセル）
  cancelAnimationFrame(requestID);
  //Start ボタンの disabled を解除
  startBtn.removeAttribute('disabled');
});

<div class="elem"></div>
<p>background-color: <span id="bgcolor"></span></p>
<button type="button" id="start">Start</button>
<button type="button" id="stop">Stop</button>

//イージング easeInOutExpo の関数の定義
const easeInOutExpo = (x) => {
  return x === 0
  ? 0
  : x === 1
  ? 1
  : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2
  : (2 - Math.pow(2, -20 * x + 10)) / 2;
}; 

/*・・・中略・・・*/

//経過時間を開始時刻とタイムスタンプから取得
const elapsed = start ? timestamp - start : 0;

//進捗度を算出
const relativeProgress = Math.min(1, elapsed / duration);

//進捗度にイージング easeInOutExpo を適用（進捗度をイージング関数で変換）
const easedProgress = easeInOutExpo( relativeProgress );

//イージングを適用して変換した進捗度を使って要素が移動する距離を算出
const x = distance * easedProgress;

<div class="elem"></div>
<button type="button" id="start">Start</button>

//対象の要素  
const elem = document.querySelector('.elem');
//開始時刻を代入する変数（最初は未定義）
let start;
  
//アニメーションの持続時間
const duration = 2000;
//アニメーションの移動距離
const distance = 300;
//イージング easeInOutExpo の関数の定義
const easeInOutExpo = (x) => {
  return x === 0
  ? 0
  : x === 1
  ? 1
  : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2
  : (2 - Math.pow(2, -20 * x + 10)) / 2;
}; 
 
//コールバック関数の定義
const transX = (timestamp) => {
  if (start === undefined) {
    start = timestamp;
  }
  //経過時間
  const elapsed = start ? timestamp - start : 0;
  
  //進捗度を算出
  const relativeProgress = Math.min(1, elapsed / duration);
  
  //進捗度にイージングを適用（イージング関数で進捗度を変換）
  const easedProgress = easeInOutExpo( relativeProgress );
 
  //イージングを適用した進捗度を使って要素が移動する距離を設定
  const x = distance * easedProgress;
  
  //経過時間が持続時間に満たない場合（進捗度が1に満たない場合）
  if (elapsed < duration) { //または if (easedProgress < 1) { 
    elem.style.transform = `translateX(${x}px)`;
    //requestAnimationFrame() を使ってコールバック関数を繰り返す
    requestAnimationFrame(transX);
  }
}

//ボタンの要素
const startBtn =  document.getElementById('start');
//ボタンの要素にクリックイベントを設定
startBtn.addEventListener('click', ()=> {
  //開始時刻を初期化
  start = undefined;
  //関数を実行
  transX();
});

<div class="svg-wrapper" style="width: 100px;">
  <svg viewBox="0 0 100 100" class="svg-e01">
    <ellipse cx="50" cy="50" rx="50" ry="20" fill="pink" style="cursor:pointer;"/>
  </svg>
</div>

//イージング関数（easeInOutExpo）の定義
const easeOutBounce = (x) => {
  const n1 = 7.5625;
  const d1 = 2.75;
  if (x < 1 / d1) {
    return n1 * x * x;
  } else if (x < 2 / d1) {
    return n1 * (x -= 1.5 / d1) * x + 0.75;
  } else if (x < 2.5 / d1) {
    return n1 * (x -= 2.25 / d1) * x + 0.9375;
  } else {
    return n1 * (x -= 2.625 / d1) * x + 0.984375;
  }
}; 
  
//楕円の要素
const ellipse = document.querySelector('.svg-e01 ellipse');
  
//開始時刻を代入する変数（最初は未定義）
let start;
  
//アニメーションの持続時間
const duration = 1000;
  
//楕円のX軸方向の半径
const rx = parseInt(ellipse.getAttribute('rx'));
//楕円のY軸方向の半径
const ry = parseInt(ellipse.getAttribute('ry')); 
//X軸方向とY軸方向の半径の差分
const diff = rx - ry;
  
//楕円から円に変化させる場合は true にする変数
let increase = true;
  
//コールバック関数の定義
const changeRY = (timestamp) => {
  if (start === undefined) {
    start = timestamp;
  }
  //経過時間
  const elapsed = start ? timestamp - start : 0;
  
  //進捗度を算出してイージングを適用
  const relativeProgress = easeOutBounce(Math.min(1, elapsed / duration));

  //increase の値により進捗度を使って ry 属性の値を設定
  const y = increase ? ry + diff * relativeProgress : rx - (diff * relativeProgress);
  
  //進捗度が1に満たない場合
  if (relativeProgress < 1) { 
    ellipse.setAttribute('ry', y);
    //requestAnimationFrame() を使ってコールバック関数を繰り返す
    requestAnimationFrame(changeRY);
  }else if(relativeProgress === 1){
    //進捗度が1の場合（完全な円にするため）
    ellipse.setAttribute('ry', y);
  }
}
 
//ellipse の要素にクリックイベントを設定
ellipse.addEventListener('click', (e)=> {
  //開始時刻を初期化
  start = undefined;
  //現在のX軸方向とY軸方向の半径の値が同じでない場合（楕円の場合）
  if(ellipse.getAttribute('rx') !== ellipse.getAttribute('ry')){
    increase = true; 
  }else{
    //現在のX軸方向とY軸方向の半径の値が同じ場合（円の場合）
    increase = false;
  }
  //関数を実行
  changeRY();
});

//楕円の要素 
const ellipse = document.querySelector('.svg-e01 ellipse');
  
//開始時刻を代入する変数（最初は未定義）
let start;
  
//アニメーションの持続時間
const duration = 400;
  
//楕円のX軸方向の半径
const rx = parseInt(ellipse.getAttribute('rx'));
//楕円のY軸方向の半径
const ry = parseInt(ellipse.getAttribute('ry')); 
//X軸方向とY軸方向の半径の差分
const diff = rx - ry;
  
//マウスオーバーの際は true、マウスアウトの際は false にする変数
let mouseEnter = true;

//リクエストID（キャンセル時に使用）
let requestID;
  
//コールバック関数の定義
const transitionRY = (timestamp) => {
  if (start === undefined) {
    start = timestamp;
  }
  //経過時間
  const elapsed = start ? timestamp - start : 0;
  //進捗度を算出
  const relativeProgress = Math.min(1, elapsed / duration);
  
  //mouseEnter の値により進捗度を使って ry 属性の値を設定 
  let y;
  if(mouseEnter) {
    //マウスオーバー
    y = ry + diff * relativeProgress;
  }else{
    //現在の楕円または円のY軸方向の半径を取得（マウスアウト）
    const currentY = parseInt(ellipse.getAttribute('ry'));
    y = currentY - ((currentY - ry) * relativeProgress);
  }

  //進捗度が1に満たない場合
  if (relativeProgress < 1) { 
    ellipse.setAttribute('ry', y);
    //requestAnimationFrame() を使ってコールバック関数を繰り返す
    requestID = requestAnimationFrame(transitionRY);
  }else if(relativeProgress === 1){
    ellipse.setAttribute('ry', y);
  }
}

//マウスオーバーイベント
ellipse.addEventListener('mouseenter', (e)=> {
  //実行中のアニメーションがあれば停止
  if(requestID) cancelAnimationFrame(requestID);
  //開始時刻を初期化
  start = undefined; 
  //mouseEnter を true に
  mouseEnter = true;
  transitionRY();
});
  
//マウスアウトイベント
ellipse.addEventListener('mouseleave', (e)=> {
  //実行中のアニメーションがあれば停止
  if(requestID) cancelAnimationFrame(requestID);
  //開始時刻を初期化
  start = undefined;
  //mouseEnter を false に
  mouseEnter = false;
  transitionRY();
});

<svg width="100" height="100" viewBox="0 0 100 100">
  <rect class="rect" x="0" y="0" width="100" height="100" fill="pink" />
</svg>

.rect {
  clip-path: ellipse(50% 20%);
  cursor: pointer;
  transition: clip-path .6s;
}
.rect:hover {
  clip-path: ellipse(50% 50%);
}

<div id="target"></div>
<div>
  <input id="timeRange" type="range" min="0" step="1" value="0" disabled>
  <!--max 属性の値は JavaScript で設定-->
</div>
<svg width="120px" height="140px" viewBox="-10 0 120 140" >
  <rect id="svgRect" x="10" y="70" width="50" height="4" transform="rotate(-40, 60, 72)" fill="red"/>
  <circle cx="60" cy="72" r="6"/>
  <text x="0" y="120">Start</text>
  <text x="85" y="120">End</text>
</svg>
<div>
  <button type="button" id="play">Play </button>
  <button type="button" id="pause">Pause </button>
  <button type="button" id="cancel">Cancel </button>
</div>
<p>localTime（再生位置） <span id="outputLocalTime">0</span> </p>
<p>progress（進捗度） <span id="outputProgress">0</span> </p>

#target {
  width: 50px; 
  height: 50px; 
  background-color: darkseagreen; 
  border-radius: 50%;
}
input[type="range"] {
  width: 300px; 
  margin: 25px;
}

//Web Animation API アニメーション対象の緑色の円  
const target = document.getElementById('target');
//メーターの針を表す SVG の rect 要素
const rect = document.getElementById('svgRect');
//アニメーションの再生位置をアニメーション表示する type="range" の input 要素
const timeRange = document.getElementById('timeRange');
//緑色の円のアニメーションの再生位置の値（localTime）の出力先の要素
const outputLocalTime = document.getElementById('outputLocalTime');
//緑色の円のアニメーションの進捗度の値（progress）の出力先の要素
const outputProgress = document.getElementById('outputProgress');
 
//緑色の円の移動のアニメーションを Web Animation API の animate() メソッドで作成
const animation = target.animate(
  {
    transform: ['translateX(0px)', 'translateX(300px)']
  },
  {
    duration: 2000, 
    fill: 'both'
  }
);
//自動再生の停止
animation.cancel();

//スライダー（input type="range"）の max 属性に endTime プロパティの値を設定
timeRange.setAttribute('max', animation.effect.getComputedTiming().endTime );
 
//equestAnimationFrame() の戻り値を格納する変数
let requestID;
  
//進捗状況のアニメーションや値を表示するコールバック関数
const displayTiming = () => {
  //タイミング情報を取得
  const timing = animation.effect.getComputedTiming();
  //現在の進捗度（timing の progress プロパティ）を取得
  const currentProgress = timing.progress;
  //メーターの針を表す rect 要素を現在の進捗度を使って回転
  rect.setAttribute('transform',`rotate(${-40 + currentProgress * 260},  60, 72)` );
  //現在の進捗度を出力
  outputProgress.textContent = currentProgress;
  //再生位置（timing の localTime プロパティ）を取得
  timeRange.value = timing.localTime;
  //再生位置の値を小数点以下を切り下げて出力
  outputLocalTime.textContent = Math.floor(timing.localTime);
  
  //アニメーションが再生中の間、requestAnimationFrame() でこの関数を繰り返し呼び出して実行
  if(animation.playState === 'running'){
    //戻り値を変数に代入
    requestID = requestAnimationFrame(displayTiming);
  }
}
 
//Play ボタンにクリックイベントを設定
document.getElementById('play').addEventListener('click', () => {
  //アニメーションを再生
  animation.play();
  //アニメーションの準備ができたら displayTiming() を呼び出す
  animation.ready.then(displayTiming);
});
  
//Pause ボタンにクリックイベントを設定
document.getElementById('pause').addEventListener('click', () => {
  //アニメーションを一時停止
  animation.pause();
});
  
//Cancel ボタンにクリックイベントを設定
document.getElementById('cancel').addEventListener('click', () => {
  //アニメーションをキャンセル（初期状態に戻す）
  animation.cancel();
  //requestAnimationFrame() をキャンセル
  cancelAnimationFrame(requestID);
  //メーターのアニメーションを初期状態に
  rect.setAttribute('transform','rotate(-40, 60, 72)');
  //スライダーのアニメーションを初期状態に
  timeRange.value = 0;
  outputLocalTime.textContent = '0';
  outputProgress.textContent = '0';
});