Tumultの誇大広告を伴うWebアニメーションの高度なタイミングと緩和

キーテイクアウト

• Tumult Hypeは、アニメーターがキーフレーム（開始ポイントと停止ポイント）を作成できる最新のWebアニメーションツールであり、コンピューターはすべての中間フレームを動的に埋めます。コンピューターがこれらのフレームを生成する方法は、視聴者の注意と感情的なつながりに影響を与える可能性があります。
タイミング関数あなたがアニメーション化している要素を人間化する上で重要な役割を果たします。彼らは、情報をきれいに明確に明確に提示し、直接焦点を合わせ、感情を伝え、楽しませて関与するのを助けることができます。タイミング関数は、「無生物」と「アニメーション」オブジェクトの両方の動きをモデル化することもできます。
• Tumult Hypeは、制御ポイントを操作し、曲線に新しいポイントを追加して独自のカスタムタイミング関数を形成できるカスタムタイミング関数エディターを提供します。これらの関数は、hypeドキュメントで将来使用するために名前を付けて保存できます。また、新しいアニメーションのデフォルトタイミング関数として設定することもできます。 タイミング関数を使用するための実用的なヒントには、アニメーションを数日間「休ませる」ために、戻ってきたときにまだ好きかどうかを確認すること、ピアからフィードバックを得ること、ユーザーアクションによってトリガーされるアニメーションで大幅に緩和することを避けることが含まれます。ゆるみを感じ、自然を観察し、重力/物理学の数学を理解して、アニメーションを構成する方法を知らせる。
• この記事はTumult
• が後援しました。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。 アニメーションは、スムーズな変化の幻想を与えるために、連続した画像またはフレームを表示するものとして大まかに定義できます。 Tumult Hypeなどの最新のWebアニメーションツールにより、すべてのフレームを手作業で生成する代わりに、アニメーターがキーフレーム（一般的に開始ポイントとストップポイント）を作成し、コンピューターがすべてのフレームを動的に埋めます。コンピューターがこれらのフレームを生成することを決定する方法は、視聴者の注意と感情的なつながりに影響を与える可能性があります。この記事では、生成されたアニメーションの重要な部分、タイミング機能、およびアニメーションのTumult Hypeの高度なタイミング機能エディターを最大限に活用する方法について説明します。
読む前に、最初のステップはTumultの誇大広告をダウンロードすることです。この試験は14日間完全に機能しています。 Tumult Hypeには、標準と専門家の2つのフレーバーモードがあります。カスタムタイミング関数を作成する（そしてこの記事とともにフォローしてください！）。

線形および緩和タイミング関数

画面を横切って移動するボックスをアニメーション化したいとしましょう。 2秒の間に、300ピクセルを左に移動できます。アニメーションを生成する際、コンピューターは時間内にボックスの位置を決定する必要があり、これがタイミング機能の役割です。これらの中で最も基本的なのは線形補間であり、距離をフレームの数で均等に分割します。したがって、30フレームあたりのアニメーションでは、各ステップでボックス5ピクセルを300px /（2s * 30fps）= 5pxで移動します。これにより、アニメーションが正常に作成されます：



主観的であるために、このアニメーションは当たり障りのないものです！自然な身体性や重量なしで動きます。視聴者の目は、ボックスが動いている速度に追いつく必要があり、アニメーションが突然終了すると、視線をオーバーシュートする可能性があります。最も一般的な解決策は、ボックスに基本的な加速と減速を適用することです。このタイミング関数は、OUT：

の容易さと呼ばれます



これは見栄えが良く、アニメーションの最も一般的な選択肢です。これは、Tumult Hypeと他のほとんどのアニメーションツールのデフォルトのタイミング関数です。 タイミング関数の表現

より正確に言うと、タイミング関数は時間（x）の値を入力し、アニメーションプロパティ（y）の値を出力します。中学校代数に戻ると、F（x）= yスタイル関数は、2Dグラフで表すことができる形式です。基本的な線形タイミング関数は、予想されるように見えます。

ease in outは、遅い速度でどのように開始および終了するかを示す穏やかな曲線です：

このタイミング関数は、立方体ベジエ曲線の数学で作成されます。曲率に影響する制御ポイントを変更することにより、異なる加速と減速を達成できます。

プロパティ値は、最小値を下回るか、最大値を超えて浸すことができ、予測とオーバーシュートのタイミング関数を作成します。



Tumult Hypeはさらに多くのパワーを提供します。いくつかのベジエ曲線を組み合わせて、マルチカーブパスを形成できます。これらは、バウンスや弾力性などのさまざまな効果に使用できます。



アニメーションのタイミング関数に焦点を当てるための一般的な理由

自然は、上記の線形タイミング関数のように機械的に動きません。したがって、タイミング機能は、アニメーション化している要素を人間化する上で重要な役割を果たします。これにより、情報をきれいかつ明確に提示することができます。フォーカスを指示します。

良いタイミングは、アニメーションに意味を与えるのに役立ちます。それは活気のない形を現実に変えます。ブランディングにとって重要な感情を伝えるのに役立つ人もいます。 その他のタイミングは楽しませたり、関与したりできます

「無生物」オブジェクトの動きは、物理学によってより支配されています。 「アニメーション」オブジェクトは、自分の考えや感情によって支配されています。どちらのスタイルもタイミング関数でモデル化できます。
Tumult Hype

にタイミング関数を適用します

Tumult Hypeのアニメーションのタイミング機能を編集するのは簡単です。 ステップゼロはアニメーションを作成しているので、馴染みがない場合は、チュートリアルとドキュメントをチェックしてください。

単一のアニメーションのタイミング関数を調整するには、プロパティ領域のキーフレーム間のアニメーションインジケーターバーをダブルクリックすることができます。

複数のアニメーションが選択されている場合、タイムラインインターフェイスの右側にあるタイミング関数ポップアップボタンを使用できます。

アニメーションが選択されていない場合、デフォルトのタイミング関数はタイミング関数ポップアップボタンのタイトルとして表示されます。

誇大広告の専門家では、このインターフェイスを使用すると、制御ポイントを操作し、曲線に新しいポイントを追加して独自のカスタムタイミング関数を形成できます。 タイミング関数は名前が付けられているため、誇大広告ドキュメントで将来使用するために保存されます。また、新しいアニメーションのデフォルトタイミング関数として設定することもできます。

このエディターは、他のベクトル編集アプリに似ています。コントロールポイントを操作するためのチートシートは次のとおりです
• [曲線]をクリックします：新しいポイントを追加
• 削除キー：コントロールポイントを削除
• オプションクリック：角度のあるVertex
に変換します
• option-drag：新しいコントロールポイントをドラッグアウト
• オプション（コントロールポイントのドラッグ中）：ミラーリング
• コマンド（コントロールポイントのドラッグ中）：切断された
• none（コントロールポイントをドラッグするだけです）：非対称
• シフト（コントロールポイントのドラッグ中）：45°の角度を維持します
タイミング関数を使用するための実用的なヒント
クラフトとタイミング関数の選択はスキルであり、経験はより良いものになります。
• アニメーションを見ずに数日間行って「休ませて」し、戻ってきたときにまだ好きかどうかを確認してください。または、ピアからフィードバックを取得します。
• ループアニメーションは、通常、線形タイミング関数を使用する必要があります。容易なタイミング関数は、ループサイクルの開始時にストップポイントを作成するか、ジャンプします。
ユーザーアクションによってトリガーされたアニメーションで（遅い加速）で大幅に緩和されないようにしてください。
• オーバーシュート（背面）と予想（逆）は、栄光に見える可能性のある効果ですが、多くの場合、これは視聴者の関連アクションを支援するアニメーションの目的に反します。さらに、これらはより時間がかかる傾向があるため、ユーザーの時間を無駄にする可能性があります。控えめに使用してください。
• 同じアニメーション期間とさまざまなタイミング関数を使用して、より視覚的な陰謀のために、または異なる重量/慣性を表現することを実験することをお勧めします。とはいえ、自然なモデルやキャラクターからアニメーション化しない限り、あまりにも多くの異なるタイミング機能を搭載していない方が良いです。驚異的なアニメーションの開始時間や、代わりにわずかに変化する期間を試すことも忘れないでください。
• ビジュアルにはしばしば、スペック制御ラインの重みとカラーパレットがあるように、使用された期間やタイミング関数などのアニメーションのデザイン言語を考え出すのは良いことです。 >
自然を観察し、重力/物理学の数学を理解することは、アニメーションを構成する方法を知らせるのに役立つためです。たとえば、バウンスオブジェクトを作成するには、y値はバウンスタイミング関数を使用する必要があります。 x値には、その軸に作用する力がないため、線形タイミング関数が必要です。よく理解されていても、物理エンジンを使用する方が簡単な場合があります。
• 自然やマスターアニメーターからインスピレーションを得る：
ジョン・ハラスとハロルド・ウィテカーによるアニメーションのタイミング
• 結論
  タイミング関数の操作は、意味のあるアニメーションを作成する上で高度なステップです。 物理学、感情をモデル化するのに役立つか、単にキーフレームの構築を減らすことができます。 Tumult Hypeのカスタムタイミング機能エディターは、最高のアニメーションを作るためのパワーと柔軟性を提供します。

  誇大広告を試してみたい場合は、SitePointユーザーとして今すぐ$ 24.99 USDで50％オフで誇大広告標準を取得できます。

  またはすべての鐘とホイッスルを備えたバージョンの後は、74.99米ドルで誇大広告の専門家に25％の割引を提供しています。

  高度なタイミング関数とWebアニメーションの緩和に関するよくある質問
  CSSとWebアニメーションのJavaScriptの重要な違いは何ですか？

  ​​

  CSSとJavaScriptはどちらもWebアニメーションを作成するための強力なツールですが、いくつかの重要な違いがあります。 CSSは通常、よりシンプルで使いやすいため、シンプルなアニメーションに適しています。また、ほとんどの場合、JavaScriptよりも優れたパフォーマンスは、ブラウザのレンダリングエンジンにアニメーションタスクをオフロードできるためです。ただし、JavaScriptはより多くの制御と柔軟性を提供し、複雑なアニメーションとインタラクションを可能にします。また、古いブラウザーとの互換性が向上します。
  Web Animations APIを使用するにはどうすればよいですか？
  Web Animations APIは、HTML、SVG、およびCSSのアニメーションの統一モデルを提供します。 JavaScriptから直接要素を作成、制御、およびアニメーション化することができます。それを使用するには、最初にelement.animate（）メソッドを使用してアニメーションオブジェクトを作成し、キーフレームとタイミングオプションを引数として渡す必要があります。その後、play（）、pause（）、reverse（）などのメソッドを使用してアニメーションを制御できます。時間の経過とともにアニメーションの速度を制御します。彼らは、現実の世界で物事が動く方法を模倣することで、アニメーションをより自然に感じることができます。たとえば、通常、オブジェクトはゆっくりと動き始め、スピードアップしてから、停止する前に再び減速します。緩和関数は、とりわけ線形、容易さ、容易さ、または容易さを可能にすることができます。 Tumult Hypeは、HTML5アニメーションとインタラクティブコンテンツを作成するための強力なツールです。コードを作成せずに要素を設計およびアニメーション化できるユーザーフレンドリーなインターフェイスがあります。ただし、より高度な機能のためにJavaScriptもサポートしています。 Tumult Hypeの重要な機能には、タイムラインベースのアニメーション、シーン管理、レスポンシブレイアウトが含まれます。パフォーマンス。まず、JavaScriptよりもパフォーマンスが発生するため、可能な限りシンプルなアニメーションにCSSを使用してみてください。次に、ブラウザがアニメーションループを最適化できるようにするため、JavaScriptアニメーションのrequestAnimationFrame（）メソッドを使用します。第三に、パフォーマンスの面でより高価であるため、レイアウトや絵画をトリガーするプロパティのアニメーションを避けてください。

  Webアニメーションのキーフレームは何ですか？

  キーフレームは、要素の外観を定義するアニメーションの特定の時点です。それらは、CSSアニメーションシーケンスの中間ステップを制御するために使用されます。必要な数のキーフレームを指定でき、ブラウザはそれらの間のアニメーションを補間します。さまざまな画面サイズと向きに適応するようにします。これは、ピクセルなどの絶対ユニットの代わりにパーセンテージなどの相対ユニットを使用し、メディアクエリを使用してビューポートのサイズに基づいてアニメーションパラメーターを調整することによって達成できます。 >

  Webアニメーションのベストプラクティスには、アニメーションをシンプルで微妙に保つこと、緩和関数を使用してアニメーションをより自然に感じさせること、パフォーマンスのアニメーションを最適化し、アニメーションを応答するようにすることが含まれます。また、アニメーションが気を散らすのではなく、ユーザーエクスペリエンスを強化することも重要です。 Webアニメーションのテストとデバッグに使用します。これらのツールを使用すると、アニメーションプロパティを検査し、アニメーション再生を制御し、アニメーションのタイムラインを視覚化できます。 javaScriptを使用してアニメーションイベントや状態を記録することもできます。

  Webアニメーションを使用してアクセシビリティを向上させることはできますか？インタラクションを通じてユーザーを導き、ユーザーエクスペリエンス全体を強化します。ただし、アニメーションがモーション感度やその他のアクセシビリティニーズを持つユーザーに問題を引き起こさないようにすることが重要です。これらのユーザーのアニメーションを調整または無効にするために、好みの還元モーションメディアクエリを使用できます。

以上がTumultの誇大広告を伴うWebアニメーションの高度なタイミングと緩和の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。