jQuery Academy · レッスン

カスタムイージングとアニメーションコールバック

カスタムイージング関数でアニメーションの速度と進行を制御し、アニメーションの完了時や各ステップの実行時に正確にコードを実行するコールバックを活用します。

「カスタムイージングとアニメーションコールバック」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン2/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

基本的なアニメーション速度を超えて

アニメーションは要素を動かすだけではありません。重要なのは、要素がどのように動くかです。イージングはアニメーションの加速と減速を制御し、より自然な動きや印象的な動きを実現します。

jQueryには、組み込みのイージングオプションが2つあります。'linear'（一定速度）と'swing'（ゆっくり開始し、中間で速くなり、最後に再びゆっくりになる）です。しかし、これ以上の設定が必要な場合はどうすればよいでしょうか。

デフォルトのイージングを確認する

jQueryのデフォルトのイージングオプションの違いを見てみましょう。

'linear'：アニメーションの開始から終了まで、一定の速度で動きます。
'swing'：デフォルトの設定です。ゆっくり始まり、中間で速度が上がり、最後に再び遅くなります。

どちらもシンプルですが、アニメーションの印象をより細かく制御したいことはよくあります。

jQuery UIによるカスタムイージング

より高度なイージング効果を実現するには、プラグインを使うことが一般的です。人気のある選択肢として、jQuery UI Easingコンポーネントがあります。

これはjQueryの$.easingオブジェクトを拡張し、'easeOutBounce'や'easeInOutQuad'など、多数の新しい関数を追加します。これにより、あらかじめ定義された動きのカーブを豊富に利用できます。

これらを使うには、通常、プロジェクトにjQuery UIライブラリを含める必要があります。

コード例：EaseOutBounceによるバウンス

jQuery UIのカスタムイージング関数を使って、アニメーションを試してみましょう。単に突然停止するのではなく、最後にボックスが跳ね返ることに注目してください。この効果は'easeOutBounce'を使って実現しています。

（注：この例では、jQuery UIのコアとエフェクトが読み込まれているものとします。）

<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1500, 'easeOutBounce'); // Using a jQuery UI easing
      });
    });
  </script>
</body>
</html>

アニメーションのコールバックを理解する

アニメーションは非同期で実行されます。つまり、アニメーション中もコードの実行は続きます。アニメーションが終了した後に何か処理を行いたい場合はどうすればよいでしょうか。

jQueryの.animate()メソッドは、コールバック関数を受け取れます。最も一般的なものはcompleteコールバックです。

completeコールバックは、選択した要素のアニメーションが完全に終了したときに1回実行されます。
処理を連続して実行したり、「完了」メッセージを表示したりするのに適しています。

コード例：`complete`コールバック

ここでは、ボックスをアニメーションさせた後、アニメーションが100%完了してから背景色を変更し、メッセージを表示します。

これにより、表示の一貫性を保ち、後続の処理を適切なタイミングで実行できます。

<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #008CBA;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p id="message"></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1000, function() { // This is the complete callback
          $(this).css("background-color", "#f44336");
          $("#message").text("Animation complete! Color changed.");
        });
      });
    });
  </script>
</body>
</html>

`step`コールバック

アニメーションの最後だけでなく、アニメーションの途中で処理を実行したい場合があります。そのときに使うのがstepコールバックです。

stepコールバックは、アニメーションの各ステップで、アニメーション対象の各プロパティごとに実行されます。アニメーションの実行中、継続的に呼び出されます。

now（プロパティの現在値）、fx（アニメーションの詳細を含むオブジェクト）、tween（より高度な制御に使用）などの引数を受け取ります。

コード例：`step`コールバック

stepコールバックを使って、アニメーション中に動くボックスの現在位置を表示してみましょう。

これにより、リアルタイムの更新を取得し、アニメーションの進行に応じて処理できることがわかります。ここでは特にnow引数を使います。

<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #FFC107;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p>Current Left Position: <span id="position">0px</span></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, {
          duration: 1500,
          step: function(now, fx) { // This is the step callback
            $("#position").text(now.toFixed(0) + "px");
          }
        });
      });
    });
  </script>
</body>
</html>

複数のコールバックを使う

同じアニメーションでstepコールバックとcompleteコールバックの両方を使えます。

animate()メソッドは、第2引数としてオプションオブジェクトを受け取り、その中でduration、easing、コールバック関数を定義できます。

これにより、アニメーション中の進行状況を追跡し、アニメーションの終了後に最終処理を実行するという、細かな制御が可能になります。

コールバックの確認

アニメーションの実行中、プログレスバーを継続的に更新するには、どのjQuery animate()コールバックが最適でしょうか。

イージングとコールバック：まとめ

よくできました。jQueryのアニメーションを強化する方法を学びました。

カスタムイージング：jQuery UIなどのプラグインを使うと、'linear'や'swing'だけでなく、より動的な速度カーブを適用できます。
completeコールバック：アニメーションが終了した瞬間に正確にコードを実行します。
stepコールバック：リアルタイムの更新を取得し、アニメーションの進行中に繰り返し処理を実行します。

これらの機能により、Web要素の視覚的な流れやインタラクションのタイミングを、より細かく制御できます。

よくある質問

「カスタムイージングとアニメーションコールバック」レッスンは無料ですか？

はい。「カスタムイージングとアニメーションコールバック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「カスタムイージングとアニメーションコールバック」で何を学びますか？

カスタムイージング関数でアニメーションの速度と進行を制御し、アニメーションの完了時や各ステップの実行時に正確にコードを実行するコールバックを活用します。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/3です。

「カスタムイージングとアニメーションコールバック」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

アニメーションの連結とキュー管理
カスタムイージングとアニメーションコールバック
高度なトグルとスライド効果

← jQuery Academyに戻る