JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでトランジション効果の速度曲線を設定するには？transitionTimingFunctionの使い方

JavaScriptでトランジション効果の速度曲線（イージング）を設定するには、transitionTimingFunctionプロパティを使用します。このプロパティに「ease」「ease-in」「ease-out」「linear」などの値を指定することで、アニメーションの進行のしかたを細かくコントロールできます。

主な速度曲線の値

  • ease … 開始と終了が緩やかになる、標準的な速度曲線（初期値）
  • linear … 最初から最後まで一定の速度で変化する
  • ease-in … ゆっくりと始まり、徐々に加速していく
  • ease-out … 速く始まり、ゆっくりと終わる
  • ease-in-out … 開始と終了は緩やかで、中間が最も速い
  • cubic-bezier(n, n, n, n) … ベジェ曲線を使って独自の速度曲線を定義できる

サンプルコード

以下のコードを実行すると、JavaScriptでトランジション効果の速度曲線を設定できます。「設定」ボタンをクリックするとtransitionTimingFunctionプロパティによって「ease-in」が適用され、その後DIV2にマウスカーソルを重ねると、背景色・サイズ・角丸が5秒かけて変化していきます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #div1 {
            position: relative;
            margin: 10px;
            height: 300px;
            width: 400px;
            padding: 20px;
            border: 2px solid blue;
         }
         #div2 {
            padding: 80px;
            position: absolute;
            border: 2px solid blue;
            background-color: yellow;
            transform: rotateY(45deg);
            transition: all 5s;
         }
         #div2:hover {
            background-color: orange;
            width: 50px;
            height: 50px;
            padding: 100px;
            border-radius: 50px;
         }
      </style>
   </head>

   <body>
      <p>DIV2にマウスカーソルを合わせてください</p>
      <button onclick="display()">設定</button>
      <div id="div1">DIV1
         <div id="div2">DIV2</div>
      </div>
      <script>
         function display() {
            document.getElementById("div2").style.transitionTimingFunction =
            "ease-in";
         }
      </script>
   </body>
</html>

このように、CSS側であらかじめtransitionを定義しておき、JavaScriptからstyle.transitionTimingFunctionの値を書き換えるだけで、速度曲線を動的に変更できます。用途に応じて各値を使い分けることで、より自然で洗洗練されたアニメーション表現が可能になります。

  1. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE

  2. CSSでトランジション効果の速度曲線を設定する方法

    CSSでトランジション効果の速度曲線（イージング）を設定するには、transition-timing-function プロパティを使用します。指定できる主な値は linear、ease、ease-in、ease-out、ease-in-out などです。各値の特徴linear：最初から最後まで一定の速度で変化します。ease：ゆっくり始まり、途中で加速し、最後に減速します（デフォルト値）。ease-in：ゆっくりと始まり、徐々に加速します。ease-out：速く始まり、徐々に減速して終わります。ease-in-out：ゆっくり始まり、ゆっくり終わります。サンプルコード以下のコードを実行すると