jsは徐々に増加するデジタルアニメーションを実現します

背景

視覚化大画面プロジェクトで最もよく使用されるコンポーネントはデジタルコンポーネントです。データの変化を示すには、視覚効果を高めるために、数字にスクロール効果を追加して、ある数字から別の数字に徐々に増加するスクロールアニメーションを実現する必要があります。

まず、マインドマップ:

コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します。

まず、すべての可能な値をリストして垂直リストを形成し、次にコンテナーを固定して、数値のオフセット値を一定の速度で変更します。

以下は、このソリューションの実装の紹介です。0から9までの10個の要素値があり、各数字は垂直リストの10％を占めるため、垂直オフセット値は0％—> -90％です。

成し遂げる：

<ul>
  <li>
    0123456789
  </li>
</ul>

ul{
  上マージン: 200px;
}
ul li{
  マージン:0 自動;
  幅: 20px;
  高さ: 30px;
  テキスト配置: 中央;
  境界線:2px実線rgba(221,221,221,1);
  境界線の半径:4px;
}
ul li span{
  位置: 絶対;
  色: #fff;
  上位: 30%
  左: 50%;
  変換: translate(-50%,0);
  遷移: transform 500ms イーズインアウト;
  書き込みモード: 垂直方向;
  テキストの向き: 直立;
  文字間隔: 17px;
}

spanDom = document.querySelector('span') とします。
開始 = 0 にする
間隔を設定する(() => {
  開始++
  if(開始>9){
    開始 = 0
  }
  spanDom.style.transform = `translate(-50%,-${start*10}%)`
}, 1000)

上記のコードには問題があります。9 から 0 に移行すると、コンテナのオフセットは -90% から 0% に直接移行します。 ただし、遷移アニメーションの時間が固定されているため、逆方向にスクロールする状況が発生します。この問題を解決するには、シームレススクロールのアイデアを参考にすることができます。

• 9 の後に 0 をコピーします。
• 縦のリストが9までスクロールしたら、コピーした0までスクロールし続けます。
• コピーした0までスクロールするときに、リストのオフセット位置を0に変更し、アニメーション時間を0に制御します

<ul>
  <li>
    01234567890
  </li>
</ul>

spanDom = document.querySelector('span') とします。
開始 = 0 にする
var タイマー = setInterval(fn, 1000);
関数fn() {
  開始++
  クリアインターバル(タイマー)
  タイマー = setInterval(fn,start >10 ? 0 : 1000);
  if(開始>10){
    spanDom.style.transition = `なし`
    開始 = 0
  }それ以外{
    spanDom.style.transition = `transform 500ms イーズインアウト`
  }
  spanDom.style.transform = `translate(-50%,-${start/11*100}%)`
} 

2つの要素を使用してスクロールを実現する

アニメーションの効果をよく見てください。実際、ビューポートには 2 つの要素しかありません。1 つは前の値で、もう 1 つは現在の値です。スクロール オフセット値は translateY(-100%) に設定するだけで済みます。

具体的なアイデア:

• 前の値のprevと変更された値のcurをそれぞれ保存する2つの変数を宣言します。これらの2つの値のスクロールアニメーションのスイッチとして変数playを宣言します。
• useEffect を使用して入力値をリッスンします。有効な数値の場合は、変更前の値を prev に割り当て、現在の入力値を cur に割り当て、play を true に設定してスクロール アニメーションを開始します。

調整されたコード構造は次のとおりです。

 <div className={styles.slider}>
   {[前, 現在].map((項目, インデックス) => (
      <span key={index} className={`${styles['slider-text']} ${playing && styles['slider-ani']} ${(prev === 0 && cur === 0 && index ===0) && styles['slider-hide']}`}>
        {アイテム}
      </span>
    ))}
  </div>

const { 値 } = プロパティ
定数[前へ、前へ設定] = useState(0)
定数[cur, setCur] = useState(0)
const [再生中、setPlaying] = useState(false)

  const 再生 = (pre, current) => {
    前を設定する(前)
    setCur(現在値)
    再生設定(false)
    タイムアウトを設定する(() => {
      再生設定(true)
    }, 20)
  }

  使用効果(() => {
    if (!Number.isNaN(値)) {
      再生(現在値、値)
    } それ以外 {
      setPrev(値)
      setCur(値)
    }
  }、 [価値]）

.スライダー{
  ディスプレイ: フレックス;
  flex-direction: 列;
  高さ: 36px;
  上マージン: 24%;
  オーバーフロー: 非表示;
  テキスト配置: 左;
}

.スライダーテキスト{
  表示: ブロック;
  高さ: 100%;
  変換: translateY(0%);
}

.スライダーアニ {
  変換: translateY(-100%);
  遷移: 1 秒のイージー変換;
}
.スライダー非表示{
  不透明度: 0;
}

複数のスクロールホイールの上方向スクロールを実装するデジタルコンポーネント

H5のrequestAnimationFrame() APIを使用して、徐々に増加するアニメーション効果を実現します。

徐々に増加し、指定された時間内に完了する必要がある数字のスクロール アニメーションを実装します。スムーズなアニメーション効果を表示するには、要素の状態を一定の頻度で更新する必要があります。JS アニメーションは、非常に短い時間で要素を継続的にレンダリング/描画することで実現されるため、タイマーは常に Javascript アニメーションのコア技術となっています。鍵となるのは更新間隔です。アニメーション効果がよりスムーズになり、停止しないようにするには、更新時間をできるだけ短くする必要があります。同時に、ブラウザがアニメーションをレンダリングできることを保証するために、更新間隔が短すぎることはできません。
ほとんどのコンピューター モニターのリフレッシュ レートは 60Hz です。つまり、1 秒間に 60 回画像が再描画されます。したがって、スムーズなアニメーションのための最適なループ間隔は通常1000ms/60、つまり約16.6msです。

タイマーの比較

• setTimeout や setInterval とは異なり、requestAnimationFrame ではプログラマが時間間隔を自分で設定する必要はありません。 setTimeout と setInterval の問題は、精度が低いことです。内部の動作メカニズムにより、間隔パラメータは実際にはアニメーション コードをブラウザの UI スレッド キューに追加して実行を待機する時間のみを指定することが決定されます。他のタスクがキューに追加されている場合、アニメーション コードは、前のタスクが完了するまで待機してから実行する必要があります。
• requestAnimationFrame はシステムの時間間隔を使用します。これにより、ブラウザは独自の頻度で再描画して、最高の描画効率を維持できます。間隔が短いために過剰描画が発生してオーバーヘッドが増加することはなく、間隔が長いためにアニメーションが停止して滑らかでなくなることもありません。これにより、さまざまな Web ページのアニメーション効果に統一された更新メカニズムが備わり、システム リソースが節約され、システム パフォーマンスが向上し、視覚効果が向上します。
• requestAnimationFrame は、各フレーム内のすべての DOM 操作をまとめて 1 回の再描画またはリフローで完了します。再描画またはリフローの時間間隔は、ブラウザーのリフレッシュ レートに厳密に従います。
• 非表示または不可視の要素については、再描画やリフローは実行されないため、CPU、GPU、メモリの使用量が少なくなります。
• requestAnimationFrame は、アニメーション専用にブラウザが提供する API です。ブラウザは実行時にメソッド呼び出しを自動的に最適化し、ページがアクティブでない場合はアニメーションを自動的に一時停止して、CPU オーバーヘッドを効果的に節約します。

RequestAnimationFrameはスクロールアニメーションを実装します

アニメーションが開始され、アニメーションの開始時刻が記録されます。startTimeRef.current

定数 startTimeRef = useRef(Date.now());
定数[t, setT] = useState(Date.now());

アニメーションの各フレームごとに、アニメーションの開始から経過した時間を記録し、現在のフレームで到達すべき数値、つまりcurrentValueを計算します。

使用効果(() => {
    const rafFunc = () => {
      定数now = Date.now();
      const t = now - startTimeRef.current;
      （t >= 期間）の場合{
        setT(期間)
      } それ以外 {
        T(t) を設定します。
        rafFunc をリクエストします。
      }
    };
    ラフをしましょう
    自動スクロールの場合
      raf = requestAnimationFrame(rafFunc);
      startTimeRef.current = Date.now();
    } それ以外 {
      raf && cancelAnimationFrame(raf);
    }
    return () => raf && cancelAnimationFrame(raf);
}, [ピリオド、自動スクロール]);

const currentValue = useMemo(() => ((to - from) / period) * t + from, [t, period, from, to]);

現在の位置の各桁の数字を比較します。変化がある場合は、オフセットを変更します。オフセットは、現在の桁の数字と次の桁の数字の差です。この変化は各フレームで連結され、スクロール アニメーションを形成します。

実績

js を使用して徐々に増加するデジタルアニメーションを実装する方法についての記事はこれで終わりです。より関連性の高い js 徐々に増加するデジタルアニメーションのコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。