アニメーションを実装するときには無くてはならない存在です(と思ってます)。単体ではかなりつらくなってきます。以下に具体例を挙げます。1つの要素を対象としたアニメーションは、メソッドチェーンで簡潔に書くことができます。$el.velocity(...).velocity(...);しかし、アニメーションさせたい要素が二つ以上あり、それぞれ、他の要素のアニメーションの進捗に依存している時、うまく書くことができなくなります。コールバックを使用して、あるアニメーションの終了したことを確認して、次のアニメーションを行うという処理を書くとき、ネストが発生してしまいます。いう関数も用意されていますが、こちらも少々力不足なように感じます。アニメーションの合間に、アニメーション以外の処理を挟む際に、ネストが発生してしまいます。アニメーション以外の処理をハンドリングすることが苦手です。複数の要素をアニメーションさせる例を考えます。コールバック内で行う必要があります。コールバックを生やすことが必要であり、そのコードを書くと一気に汚くなります。内の処理が非同期で、その非同期処理の後にアニメーションを続けるといった処理を書くとなると、絶望的な状況になります。ように、第一引数にアニメーションさせるプロパティ、第二引数にアニメーションのオプションを指定することができますが、これらを一つのオブジェクトにまとめて渡すこともできます。これを利用して、共通のアニメーションを別の場所に定義して使い回すという使い方もできます。具体的には以下の様なコードになります。}};$el.velocity(fadeIn);この書き方はコードの見通しが良くなって便利なのですが、ある状況特有の設定をしたい時につらくなります。挙げたように、変数に格納したオプションに新たな値を追加するのはコードをかなり汚くしてしまいます。いう、あるアニメーションを登録して、使い回すという機能があります。使えなかったりします。上記のようなつらさを解消できる設計となっています。上記のようなケースでもネストを発生させることなく、オプションに値を追加することも簡潔な記法で行うことができます。基本的な書き方は以下のとおりです。アニメーションのプロパティとオプションです。引数が二つの場合は、二番目の引数にプロパティとオプションの両方が記載されているとみなします。して渡すこともできます。要素とアニメーションの設定を分けている前に述べたとおり、アニメーションのプロパティとオプションをあらかじめ変数に入れておくことはコードの見通しが良くなるため、複雑なアニメーションを書くときには有効だと思います。要素、プロパティ、オプションをまとめた一つのオブジェクトしか受け付けないため、あらかじめ変数に入れて使い回す書き方がしづらいと感じます。要素は切り出すべきものではないためです。要素は場面によっていろいろと異なるものになると思います。要素と、プロパティ、オプションを別の引数として受け取るため、これらを分離することが容易にできます。同じように、アニメーションを順番に実行する関数です。この関数はアニメーションの実行だけでなく、任意のタイミングで関数を実行することができます。出力する処理を書いています。animation2)]);固有の処理を後で付け加えることが容易ある特定の状況だけ、共通処理とは少し異なる挙動のアニメーションをしたい場合、メソッドチェーンによってそれを行うことができます。具体的な実装について説明します。いう関数は実はアニメーションを実行させているのではなく、アニメーションを実行する関数を返しています。具体的に、以下のようなコードを考えます。}]);このコードは以下のコードと同じと考えて良いです。関数の配列を受け取り、それを端から順番に実行していくだけの関数です。引数に与えられた関数が引数を受け取る形になっている場合、第一引数をコールバック関数とみなし、そのコールバックが呼ばれないかぎり、次の処理には移りません。いうコールバックを持っています。アニメーション終了まで処理を待機させます。生成した関数には、オプションを変更するためのメソッドが生えています。これは単純に、関数を生成する際に、そのメンバとしてメソッドを代入しているだけです。関数もオブジェクトとして扱われるため、通常のオブジェクトと同様に、メンバを追加することができます。生成した関数に、アニメーションのオプションを記録しておき、メソッドが呼ばれた時、オプションの値を変更させています。メソッドチェーンができるように戻り値で元の関数を返すようにしています。いう便利なライブラリがありますが、規模が大きく、複雑なアニメーションを実装するときはかなりつらくなってしまうケースがありました。いうライブラリを作りました。使うと、ネストをすることなく複雑なアニメーションを書くことができます。あるケースの時だけ、共通部品として定義したアニメーションとは異なる挙動をさせたいということも簡潔に書くことができます。現在は並列で実行するようなアニメーションには対応していないため、次はそれに対応したいと考えています。試してみて、フィードバックをいただけたら嬉しいです。コメントをキャンセルメールアドレスが公開されることはありません。本アーカイブ2019年4月2018年12月2018年8月2018年7月2018年6月2018年2月2017年11月2016年6月2016年5月2016年4月2016年3月2016年2月2016年1月2015年11月2015年10月2015年1月2014年7月2014年2月2014年1月Twitter@ktsn。