アニメーションライブラリ用のCSSライブラリとJavaScriptライブラリの両方が豊富にあります。 実際、非常に多くのプロジェクトに適切なものを選択することは不可能に思えるかもしれません。 それは私が構築することを決めたときに私が直面した状況です オンラインソリティアゲーム。 アニメーションライブラリが必要だとわかっていましたが、どちらを選択するのが適切でしたか？
この記事では、私が行った考慮事項、注意すべき点、および利用可能な最も人気のあるライブラリのいくつかを紹介します。 私のポイントを説明するために、実際の例をいくつか見ていきます。最終的には、アニメーションライブラリを最初に選択しなければならなかったとき、あなたが私よりも優れた装備を備えていることを願っています。
もちろん、このアドバイスでのマイレージは異なる場合があります。 ここで共有しているものはすべて、私が構築したかったものに固有のものです。 プロジェクトの要件と優先順位がまったく異なる場合がありますが、それで問題ありません。 ここで重要なのは、 フロントエンド開発者のように考える 特定の目標を持っています。
そういえば、私は自分自身をフロントエンド開発者だと思っていますが、私のバックグラウンドはデザインが非常に重いです。 だから私はコードを知っていますが、JavaScriptエンジニアである人ほどではありません。 経験は確かに最終決定に影響を与える可能性があるため、それを明確にしたかっただけです。
これが目標です
意思決定に入る前に、このCSS-Tricks化されたバージョンのゲームで作成する必要のあるアニメーションの種類を見てみましょう。
@media（最大幅：800px）{
#solitaire_embed> div {
パディングボトム：90％！重要; /*モバイルでアスペクト比を変更します*/
}
}
@media（最大幅：568px）{
#solitaire_embed> div {
パディングボトム：100％！重要; /*モバイルでアスペクト比を変更します*/
}
}
@media（最大幅：414px）{
#solitaire_embed> div {
パディングボトム：120％！重要; /*モバイルでアスペクト比を変更します*/
}
}
かなり甘いですよね？ これらのアニメーションについては、ささいなことは何もありません。 多くのことが（時には同時に）進行しており、オーケストレーションすることもたくさんあります。 さらに、アニメーションの大部分はユーザーの操作によってトリガーされます。 だから、それは私の決定に向かういくつかの優先順位を私に残しました：
- スムーズなアニメーション： アニメーションの適用方法は、アニメーションがスムーズに実行されるか、少し途切れが表示されるかどうかに大きな影響を与える可能性があります。
- パフォーマンス： ライブラリを採用するとプロジェクトに重みが加わり、ゲームをできるだけスリムにしたかったのです。
- 利便性： アニメーションの作成と管理を簡単にする、すてきでクリーンな構文が必要でした。 より良い、より保守しやすいコードを書くことができれば、少し余分な利便性を小さなパフォーマンスコストと交換することさえできます。 繰り返しになりますが、これはデザイナーから開発者に転向した人にとって良い兆候です。
- ブラウザのサポート： もちろん、レガシーブラウザーが完全に中断するのを防ぐために、何らかのプログレッシブエンハンスメントを使用して、最新のブラウザーでゲームを動作させたいと思っていました。 さらに、将来を見据えたものが絶対に必要でした。
それは私がこの特定の仕事のための適切なツールを探しに行ったときに私が持っていたものです。
CSSまたはJavaScriptのどちらかを選択する アニメーションライブラリ
アニメーションライブラリを選択するときに最初に考慮したのは、CSSベースのライブラリとJavaScriptベースのライブラリのどちらを使用するかということでした。 たくさんある 素晴らしいCSSライブラリ、それらの多くは私にとって最優先事項であった優れたパフォーマンスを備えています。 アニメーションをシーケンス処理したり、アニメーションの完了時にコールバックを取得したりする機能など、いくつかの頑丈なアニメーションを作成しようとしていました。 それはすべて純粋なCSSで完全に可能ですが、それでも、ほとんどのJavaScriptライブラリが提供するものよりもはるかにスムーズではありません。
単純なシーケンスアニメーションがCSSでどのように表示されるかを確認し、アニメーションヘルパーが多数組み込まれているjQueryと比較してみましょう。
アニメーションは同じように見えますが、作成方法が異なります。 CSSアニメーションを作成するには、まず、CSSでキーフレームアニメーションを定義し、それをクラスにアタッチする必要があります。
.card.move {
animation : move 2s;
}
@keyframes move {
0% { left: 0 }
50% { left: 100px }
100% { left: 0 }
}次に、JavaScriptを使用してアニメーションを実行し、要素でCSSコールバックをリッスンします。
var cardElement = document.getElementsByClassName("card")[0];
var statusElement = document.getElementsByClassName("status")[0];
cardElement.classList.add("move");
statusElement.innerHTML = "Animating"
var animationEndCallback = function() {
cardElement.classList.remove("move");
statusElement.innerHTML = "Inactive"
}
cardElement.addEventListener("webkitAnimationEnd", animationEndCallback);
cardElement.addEventListener("oAnimationEnd", animationEndCallback);
cardElement.addEventListener("antionend", animationEndCallback);このような単純な例では、さまざまな場所で物事が発生することは問題ないかもしれませんが、物事が少し複雑になると、非常に混乱する可能性があります。
これをjQueryでアニメーションが行われる方法と比較してください。
$(".status").text("Animating")
$( ".card" ).animate({
left: "100px"
}, 1000);
$( ".card" ).animate({
left: 0
}, 1000, function() {
$(".status").text("Inactive")
});ここでは、すべてが同じ場所で行われるため、将来アニメーションがより複雑になった場合に備えて、作業が簡素化されます。
JavaScriptライブラリが正しい方法であることは明らかでしたが、私のソリティアゲームに選択するのに正しい方法はどれでしたか？ つまり、jQueryは素晴らしく、 今日でも広く使われています、しかしそれは私が私の帽子を掛けたいものではありません。 JavaScriptアニメーションライブラリはたくさんあるので、私が考えていた種類の重いアニメーションを処理するために特別に構築されたものを検討したいと思いました。
JavaScriptアニメーションライブラリの選択
JavaScriptアニメーションライブラリが不足していないことがすぐにわかりました。 新しいエキサイティングなテクノロジー。 それらにはすべて長所と短所があるので、私が検討したもののいくつかとその理由を見ていきましょう。
WebアニメーションAPI 将来的に多くのJavaScriptアニメーションライブラリを置き換える可能性のあるそのようなケースのXNUMXつです。 これを使用すると、外部ライブラリをロードせずに、CSSアニメーションと同じパフォーマンスで複雑な千鳥アニメーションを作成できます。 唯一の欠点は すべてのブラウザがまだそれをサポートしているわけではありません.
<canvas> 要素は別のエキサイティングな機会を提供します。 その中で、DOMの場合と同じようにJavaScriptを使用してアニメーションを作成できますが、アニメーションはラスターとしてレンダリングされるため、高性能のアニメーションを作成できます。 唯一の欠点は、canvas要素が基本的にDOMで画像としてレンダリングされることです。そのため、ピクセルの完全性を探している場合は、運が悪い可能性があります。 デザインと鋭く調和している人として、これは私にとって大きな問題でした。
試してテストしたものが必要だったので、おそらく多くのJavaScriptライブラリのXNUMXつを使用する必要があることはわかっていました。 私は図書館を見始め、選択肢を次のように絞り込みました アニメ.js & GSAP。 どちらも複雑なアニメーションをうまく処理しているようで、パフォーマンスに関する優れたメモがありました。 アニメはGitHubに42.000を超える星があり、手入れの行き届いたライブラリです。GSAPは、コミュニティが盛んな、非常に人気のある、バトルテスト済みのライブラリです。
助けを求める場所が必要だったので、活発なコミュニティは私にとって非常に重要でした。また、後で放棄される可能性のある図書館を使いたくありませんでした。 私はこれを私の利便性要件の一部と見なしました。
アニメーションとコールバックのシーケンス
選択肢を絞り込んだら、次のステップはXNUMXつのライブラリを使用して複雑なアニメーションを実装することでした。 ソリティアゲームで繰り返されるアニメーションは、カードがどこかに移動してから裏返されるアニメーションです。そのため、それがどのように見えるかを見てみましょう。
どちらのアニメーションも見栄えがします。 それらはスムーズで、両方の実装は非常に簡単でした。 両方のライブラリには タイムライン機能 これにより、シーケンスの作成が簡単になりました。 AnimeJSでの実装は次のようになります。
var timeline = anime.timeline({
begin: function() {
$(".status").text("Animating")
},
complete: function() {
$(".status").text("Inactive")
}
});
timeline.add({
targets: '.card',
left: [0, 300],
easing: 'easeInOutSine',
duration: 500
}).add({
targets: '.card .back',
rotateY: [0, 90],
easing: 'easeInSine',
duration: 200
}).add({
targets: '.card .front',
rotateY: [-90, 0],
easing: 'easeOutSine',
duration: 200
})アニメの timeline() function アニメーションの開始時と終了時のコールバックが組み込まれており、シーケンスの作成は、連続するアニメーションを追加するのと同じくらい簡単です。 まず、カードを動かしてから、後ろの画像を90度回転させて見えなくなり、次に前の画像を90度回転させて見えます。
GSAPを使用した同じ実装 timeline() function 非常によく似ています：
var timeline = gsap.timeline({
onStart: function() {
$(".status").text("Animating")
},
onComplete: function() {
$(".status").text("Inactive")
}
});
timeline.fromTo(".card", {
left: 0
}, {
duration: 0.5,
left: 300
}).fromTo(".card .back", {
rotationY: 0
}, {
rotationY: 90,
ease: "power1.easeIn",
duration: 0.2
}).fromTo(".card .front", {
rotationY: -90
}, {
rotationY: 0,
ease: "power1.easeOut",
duration: 0.2
})意思決定時間
アニメとGSAPの主な違いは構文にあるようですが、GSAPはもう少し複雑かもしれません。 私は、非常によく似た機能を持ち、複雑なアニメーションを処理でき、コミュニティが繁栄しているXNUMXつの優れたライブラリに悩まされていました。 タイレースのようでした！
| 優先 | アニメ | GSAP |
| 滑らかなアニメーション | ✅ | ✅ |
| 性能 | ✅ | ✅ |
| 利便性 | ✅ | ✅ |
| ブラウザサポート | ✅ | ✅ |
では、なぜ私が一方のライブラリを他方よりも選択したのでしょうか。
私は図書館が圧力の下でどのように行動するかについて非常に心配していました。 ソリティアのようなゲームでアニメーションが遅れると、ゲームをプレイする楽しみに大きな影響を与える可能性があります。 ゲームを作成する前は、ライブラリのパフォーマンスを完全に確認することはできませんでした。 幸いなことに、GSAPは ストレステスト アニメを含むさまざまなアニメーションライブラリを相互に比較しました。
それを見ると、GSAPは確かに複雑なアニメーションの負荷を処理するための優れたライブラリであるように見えました。 GSAPは、アニメが26でしかトップアウトできなかった重いアニメーションで、毎秒19フレーム以上を私に与えていました。GSAPをさらに読み、フォーラムを調べた後、パフォーマンスが男性にとって最優先事項であることが明らかになりました。 GSAPの背後にあります。
そして、GSAPとアニメの両方がしばらくの間存在していても、アニメのレポは、GSAPが過去数ヶ月でコミットを行っている間、数年はやや休眠状態にあります。
私はGSAPを使用することになり、私の決定を後悔していません！
君はどうでしょう？ フロントエンドツールを評価および比較する方法とこの正方形のいずれかがありますか？ このようなプロジェクトで考慮した可能性のある他の優先事項（アクセシビリティなど）はありますか？ それとも、さまざまなオプションから選択肢を絞り込まなければならないプロジェクトがありますか？ 知りたいのでコメントでシェアしてください！
ああ、カードのデッキ全体をアニメーション化したときにどのように見えるかを確認したい場合は、私のサイトにアクセスして、 ソリティアのゲームをプレイする。 楽しむ！
