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

jQueryでアニメーションにイージング効果を追加する方法

jQueryの animate() メソッドを使ってアニメーションにイージング効果を加えることで、Webページにより自然で洗練された動きを実現できます。重要なのは、アニメーションの速度を適切に制御することです。速度を急激に上げすぎず、どこでアニメーションを止めるかを意識しながら実装しましょう。

サンプル概要：回答追加ボタンの実装

ここでは例として、クリックすると回答入力用のテキストエリアへスムーズに切り替わるボタンを作成します。まずはHTMLでボタンを定義します。

<button class="btn" id="answer">
    Add answer
</button>

fadeOutとanimateを組み合わせたイージング処理

次に、fadeOut() の完了コールバック内で animate() を呼び出し、高さと透明度を段階的に変化させることで、滑らかなイージング効果を実現します。

処理の流れ

  • container.css('opacity', '0') で、コンテナを初期状態として透明にしておきます。
  • fadeOut('fast') でボタンを素早くフェードアウトさせます。
  • コールバック内で container.show() を実行した後、animate() によって高さを200px、不透明度を1へと変化させます。
  • 続けて高さを170pxへアニメーションさせることで、わずかに収束するような自然な動き（オーバーシュート的な演出）を生み出します。

完全なサンプルコード

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('body').on('click', '#answer', function() {
                var container = $('.new-answer');

                container.css('opacity', '0');

                $(this).fadeOut('fast', function() {
                    $(this).hide();
                    container.show();
                    container.animate({ height: "200px",
                    opacity: 1}).animate({
                    height: "170px" });

                });
            });
        });
    </script>
    <style>
        .btn {
            width: 150px;
            height: 40px;
            color:#666666;
            text-decoration: none;
        }
        .new-answer {
            background: none repeat scroll 0 0 #00FFFF;
            border: 2px solid #94ACBE;
            border-radius: 5px 5px 5px 5px;
            margin-bottom: 40px;
        }
        .new-answer .middle, .top {
            padding: 0 10px;
        }
        .new-answer textarea {
            color: #000080;
            font: 12px;
            height: 120px;
            padding: 2px;
            width: 100%;
        }
    </style>
</head>
<body>
<button class="btn" id="answer">Add answer</button>
<div class="new-answer" hidden="true">
<div class="top">
<span>Add a new answer below</span>
</div>
<div class="middle">
<textarea id="question-content"></textarea>
</div>
</div>
</body>
</html>

まとめ

このように、fadeOut() と animate() を連続して組み合わせることで、単純な表示切り替えよりも格段に自然で心地よいアニメーションになります。イージングプラグイン（jQuery Easing Pluginなど）を併用すれば、さらに多彩な加速・減速カーブを指定することも可能です。アニメーションの速度設定と停止タイミングを適切に調整し、ユーザーにとって快適なUIを目指しましょう。

  1. WordPressコンテンツにクールなCSS3アニメーションを追加する方法【Animate It!プラグイン活用術】

    物語を語るという芸術は、ホモ・サピエンスが言葉を話せるようになるずっと前から存在していたのかもしれません。ストーリーテリングは私たちとともに進化し、その時代に使える道具へと適応してきました。口承によって世代から世代へと語り継がれてきた物語は、手書きの本から大量印刷、デジタルワープロへと進化を遂げ、近年ではインターネットへと舞台を移しています。人類の進化の歴史から見ると、現代のテクノロジーの潜在能力をまだ十分に引き出せていないように感じられます。動画がすでに仮想世界での覇権争いを始めている一方で、ウェブコンテンツの大部分は今なおテキスト中心なのです。現代のウェブコンテンツはインタラクティブである

  2. WordPressサイトにクールなタイピングエフェクトを追加する方法

    「コンテンツは王、デザインは女王」とよく言われます。今日のウェブサイトにおいて、これはまさに真実と言えるでしょう。目を引くデザインは、訪問者の注意をつかむための強力な武器になります。綿密に設計されたレイアウト、調和のとれた配色、美しいフォントに加えて、訪問者の注目を一瞬で集める方法のひとつが、動きのあるタイプライター風テキストの活用です。WordPressユーザーなら、Typed Jsというプラグインを使うことで、この効果を誰でも簡単に実現できます。補足:このエフェクトはテキストが動く仕組みのため、文章や静止画だけではその「クールさ」を伝えきれません。そこで筆者は自身の個人サイトプロジェクトで