Bounce.js：複雑なCSSアニメーションを速く作成します

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

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

iPythat

からの画像

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

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

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

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

インターフェイス

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

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

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

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

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

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

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

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

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

手指オリジナルの生産

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

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

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

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

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

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

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

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

ヒント：

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

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

剛性値にも当てはまります。これに最小値を設定しましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

どう思いますか？

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

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

bounce.js

に関するよくある質問

私のプロジェクトに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メソッドを使用して、期間と遅延を設定できます。値はミリ秒単位です。

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

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

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

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

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

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

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

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

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

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

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

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

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