AI向け説明 AI Description

`M-011` は数値を指定された時間内で目標値までカウントアップさせるアニメーションです。`requestAnimationFrame` を使用してフレームごとに数値を更新し、イージング関数を適用することで自然な加速・減速を表現します。等幅フォント（tabular-nums）を使用すると数値のガタつきを防げます。

`M-011` animates numbers counting up to a target value. It uses `requestAnimationFrame` for smooth updates and applies easing functions for natural deceleration. Using tabular numerals (`font-variant-numeric: tabular-nums`) prevents layout jitter.

調整可能パラメータ Adjustable Parameters

• --count-color — 数値の色Counter value color

実装 Implementation

HTML + CSS + JS

<span class="counter" data-target="1000">0</span>
<style>
:root { --count-color: #5c6ac4; }
.counter { color: var(--count-color); font-variant-numeric: tabular-nums; font-weight: bold; }
</style>
<script>
function animateValue(obj, start, end, duration) {
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.innerHTML = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}
const obj = document.querySelector(".counter");
animateValue(obj, 0, 1000, 2000);
</script>

React (JSX + CSS)

// react/M-011.jsx
import { useEffect, useState } from 'react';
import './M-011.css';

export default function CountUp({ end, duration = 2000 }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let startTime = null;
    let animationFrame;

    const step = (timestamp) => {
      if (!startTime) startTime = timestamp;
      const progress = Math.min((timestamp - startTime) / duration, 1);
      setCount(Math.floor(progress * end));
      if (progress < 1) {
        animationFrame = requestAnimationFrame(step);
      }
    };
    
    animationFrame = requestAnimationFrame(step);
    return () => cancelAnimationFrame(animationFrame);
  }, [end, duration]);

  return <span className="counter-value">{count}</span>;
}