bounce.js：スムーズなCSSアニメーションを簡単に作成するための強力なツール

Joel Besadaによって作成されたBounce.jsは、開発者がスムーズでエレガントなCSSアニメーションを迅速に生成するのに役立つシンプルで使いやすいツールです。これは、新たなJavaScriptライブラリとジェネレーターの波の一部であり、複雑なアニメーションの作成プロセスを効果的に簡素化します。

iPythat

からの畫像

JavaScript - もともとWebページの動的効果を高めるために設(shè)計された単純なスクリプト言語 - 1995年の設(shè)立以來、大きな進(jìn)歩を遂げました。 Mozillaの共同設(shè)立者であるBrendan Eichが発明したJavaScriptは、過去5年間にAdobe Flashを徐々に置き換え、Webアニメーション、ゲーム、アプリケーションに最適な技術(shù)になりました。

JavaScriptの臺頭により、ライブラリとジェネレーターの新しいバッチが生まれ、開発者がより複雑なアニメーション機能に簡単にアクセスできるようになりました。 Bounce.jsもその1つです。

Bounce.jsを使用すると、シンプルなインターフェイス、プレビュー、共有、エクスポートを介して、スムーズでエレガントなCSSアニメーションを生成できます。その操作は非常に直感的です！ Exquisite Animation Effectsが好きなら、Bounce.jsを試してください。

次に、bounce.jsの機能とアニメーションワークフローを調(diào)査し、カスタムアニメーションを作成します。あなたはそれがとても面白いと思うと思います！

インターフェイス

bounce.jsのインターフェイスは簡潔で明確であるため、アニメーション作成プロセスが非常にシンプルになります。

左側(cè)には、アニメーションチェーンにさまざまなエフェクトを追加して調(diào)整できるコンポーネントリストがあります。また、表示および変更できるアニメーションプリセットの範(fàn)囲を提供し、コンポーネントの追加時に時間を節(jié)約できます。 「ロードランナー」アニメーションプリセットは非常に興味深いものであり、著者の詳細(xì)の処理は驚くべきものです。多くのプリセットは、カスタムアニメーションのミキシングを容易にし、時間を節(jié)約するテンプレートとして利用できます。

畫面の中心はアニメーションプレビュー領(lǐng)域であり、正方形はアニメーションのすべてのアクションを表示するプレースホルダーとして機能します。

プレビュー畫面の下には3つのボタンがあります。アニメーション、ループアニメーション、スローモーションを再生します。

スローモーション機能は、アニメーションモーションの軌跡の詳細(xì)な分析に特に役立ちます。

作成する各アニメーションには一意のURLがあり、[ショートURLを取得]をクリックして短いリンクを取得します。

免責(zé)事項：ほとんどのコードジェネレーターと同様に、よく書かれたコードは、自動的に生成されたコードよりもはるかに優(yōu)れていることがよくあります。ただし、手動でコードを書くことは、より時間がかかり、労働集約的になる可能性があります。後でコードを手動で調(diào)整する予定がない場合は、bounce.jsに依存しすぎないようにすることをお勧めします。 Bounce.jsは、マトリックス変換を大きく使用しますが、これはすべてのアニメーションシーンにとって最良の方法ではありません。

このアニメーションを作りながら個人的にこれを経験しました。ただし、アニメーションはこれほど複雑ではないかもしれません。これは良いことです。覚えておいてください：アニメーションのタイムラインが長くなればなるほど、生成するコードが多いので、使いすぎないでください。

これが基本です。プロセス全體は技術(shù)的に複雑ではありません。殘りはあなたの想像力に依存します。

手指オリジナルの生産

カスタムアニメーションを作成しましょう。以下の例では、パラシュートアニメーションを作成する方法を示します。これは、通常漫畫で見られる誇張されたアニメーションのタイプで、上から下まで見ています。

bounce.jsでは、アニメーションは「コンポーネント」に分割されます。コンポーネントは、ダンスの動きのさまざまな部分と考えることができます。アニメーションの動作のみを設(shè)計するだけでなく、アニメーション化するオブジェクトでも、背景/ステージもデザインすることを忘れないでください。もちろん、アクションが完了したら、あらゆる設(shè)定のオブジェクトに適用するのは簡単です。

アニメーションコンポーネント1

Q：スカイダイバーはスカイダイビング後に何をしますか？

A：もちろん、彼らはパラシュートを開きます。それでは、それをアニメーションに変換しましょう。

パラシュートの開口部をシミュレートする最良の方法は、スケールコンポーネントを使用することです。プレビューの正方形の元のサイズを參照して、ここで0.2の元のサイズを使用し、最終サイズは4です。基本的に、アニメーションの終わりに20倍大きくなります。

パラシュートの幅と長さ（上から見られる高さ）は同じであるため、2つの次元のアスペクト比を同じに保ちます。ニーズに最適なので、 easingの屬性を選択します。期間中、アニメーションがカバーする時間範(fàn)囲を指定します。パラシュートは非常に迅速に開かれているため、ここで2000ミリ秒間設(shè)定します。

アニメーション化されたコンポーネントの順序に関係なく、すべてのコンポーネントはアニメーションの開始時にすぐにアクティブ化されるため、後でコンポーネントを起動したい場合は、遅延フィールドの遅延を指定する必要があります。

ヒント：

複雑なアニメーションを作成する場合、コンポーネントがアクティブ化されているのと同じ順序でコンポーネントを保持して、簡単に混亂しないようにすることが最善です。

バウンスフィールドは、アニメーション中に要素が跳ね返る回數(shù)を指定します。この場合、16と入力しましたが、これは比較的高い數(shù)ですが、パラシュートアニメーションにとっては理にかなっています。 同じことが

剛性値にも當(dāng)てはまります。これに最小値を設(shè)定しましょう。

アニメーションコンポーネント2

次に、風(fēng)が微妙でランダムな方法でその経路を変えるのと同じように、パラシュートの動きをシミュレートします。これを行うには、

Translateコンポーネントを使用します。ここでは微妙な動き（右側(cè)に25ユニット、下部に15ユニット）を追加しました。アニメーションの滑らかさのために、バウンスを再度緩和することをお勧めします。

このコンポーネントはアニメーション全體で再生されるため、200mmで再生させます。これは全長をカバーする必要があります。パラシュートはタイムラインの開始から移動するため、ここで遅延は必要ありません。パラシュートスポーツは風(fēng)の影響を受けますが、最初のコンポーネントよりも難しくなるため、22バウンスおよび3剛性を與えました。

アニメーションコンポーネント3

最後に、アニメーションの最後のコンポーネントを追加します。

上からスカイダイバーを観察すると、時間の経過と距離の増加により、彼は明らかに小さくて小さく見えます。

したがって、彼の初期サイズは1になり、アニメーションの最後のサイズは実際には0です。これらの値を幅と高さに挿入しましょう。

アニメーションの期間は、明らかにここで非常に長くなるはずです。 25,000ミリ秒で十分です。

このアニメーションコンポーネントは他のコンポーネントと同時に再生されるため（つまり、遅延なし）、以前のコンポーネントから継承するバウンスまたは剛性効果を追加する必要はありません。したがって、ここのスクリーンショットのように、それらを0にしておきます。

もちろん、結(jié)果を調(diào)整して自由に混ぜることができます。これは大まかなガイドですが、結(jié)果は明らかに手にあります。

ただし、その後も同様の結(jié)果が得られるはずです。

結(jié)果に満足したら、アニメーションをCSSとしてエクスポートし、プロジェクトで使用できます。

githubでbounce.jsのリポジトリも見つけることができます。

どう思いますか？

デザインとアニメーションのウェブサイトへの多くの革新的な新しいアプローチの出現(xiàn)により、bounce.jsのようなジェネレーターは非常に便利です。特に、そのようなアニメーションコードを手動で書くための貴重な時間を節(jié)約できます。

それを試して、コメントセクションに実験を投稿してください。私たちはあなたの結(jié)果を知りたいです！

bounce.js

に関するよくある質(zhì)問

私のプロジェクトにbounce.jsをインストールする方法は？

bounce.jsをインストールするには、npmまたはbowerを使用できます。 npmを使用する場合は、コマンド

を使用してインストールできます。 Bowerには、コマンドを使用してください

。インストールしたら、スクリプトタグを使用してHTMLファイルに含めることができます。 npm install bounce.js bower install bounce.js他のJavaScriptライブラリでbounce.jsを使用できますか？

はい、bounce.jsは他のJavaScriptライブラリと互換性があります。他のライブラリの機能に干渉しません。 JQuery、React、Angular、Vue.JSなどのライブラリで使用できます。

bounce.jsを使用してアニメーションを作成する方法は？

bounce.jsを使用してアニメーションを作成するには、新しいバウンスオブジェクトを作成し、コンポーネントを追加します。ズーム、回転、パン、傾きなどのコンポーネントを追加できます。コンポーネントを追加した後、

メソッドを使用して、要素にアニメーションを適用できます。

bounce.jsのアニメーションの期間と遅延を制御できますか？

はい、bounce.jsを使用すると、アニメーションの期間と遅延を制御できます。それぞれdurationおよびdelayメソッドを使用して、期間と遅延を設(shè)定できます。値はミリ秒?yún)g位です。

bounce.jsでアニメーションをリンクする方法は？

chainメソッドを使用して、bounce.jsのアニメーションをリンクできます。この方法を使用すると、アニメーションを順番に実行できます。一連のバウンスオブジェクトをchainメソッドに渡して、それらをリンクできます。

レスポンシブデザインにbounce.jsを使用できますか？

はい、bounce.jsはレスポンシブデザインに使用できます。 Bounce.jsで作成されたアニメーションはスケーラブルで、さまざまな畫面サイズに適応します。メディアクエリを使用して、さまざまなデバイスでアニメーションの動作を制御することもできます。

bounce.jsでアニメーションを停止するにはどうすればよいですか？

stopメソッドを使用して、bounce.jsでアニメーションを停止できます。このメソッドはアニメーションを停止し、要素を初期狀態(tài)にリセットします。

複雑なアニメーションにbounce.jsを使用できますか？

はい、bounce.jsは複雑なアニメーションを作成できます。複數(shù)のコンポーネントを組み合わせて、アニメーションをリンクして複雑なエフェクトを作成できます。ただし、これにはライブラリとCSSアニメーションを十分に理解する必要があります。

bounce.jsはすべてのブラウザーと互換性がありますか？

bounce.jsは、ほとんどの最新のブラウザーと互換性があります。ただし、一部の機能は古いブラウザでは機能しない場合があります。さまざまなブラウザでアニメーションをテストして、互換性を確保することをお勧めします。

商業(yè)プロジェクトにbounce.jsを使用できますか？

はい、Bounce.jsはオープンソースであり、個人および商業(yè)プロジェクトで無料で利用できます。それを使用して、ウェブサイト、アプリ、ゲーム、その他のプロジェクトのアニメーションを作成できます。

以上がBounce.js：複雑なCSSアニメーションを速く作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。