共感的なアニメーション

多くの場合、Webアニメーションは議論の源です。不十分なアニメーションは驚くほど明白ですが、よくできたアニメーションはユーザーエクスペリエンスにシームレスに融合します。効果的なアニメーションは、ウェブサイトを強化し、性格を追加したり、認知負荷を減らすための視覚的な手がかりを提供したりします。ただし、一般的な誤解は、アニメーションに対してアクセシビリティをピットします。これは不要です。思慮深いデザインは両方を可能にします。

アニメーションを設計する際には、これらの重要な質問を検討してください。

アニメーションは目的に役立ちますか？

遊び心のあるアニメーションは個人のポートフォリオに適していますが、税務申告サービスなどのタスク指向のサイトには不適切です。ただし、進行状況バーは貴重な視覚的フィードバックを提供します。

アニメーションは気を散らしていますか？

重要な情報を損なう過度に忙しいアニメーションを避けてください。コンテンツに近いアニメーション化されたテキストまたはループアニメーションは、ADDまたはADHDを使用してユーザーにとって特に気を散らすことができます。優れたアニメーションはフォーカスを強化し、それを混乱させません。

したがって、アニメーションは初期テストに合格します。次は何ですか？

ユーザーオプトアウトオプション

アニメーションは、モーション感度を持つユーザーに配慮する必要があります。前庭障害は、めまいや吐き気を引き起こす可能性があります。

prefers-reduced-motionメディアクエリは、最小限のアニメーションのユーザー設定を検出します。このコードスニペットは、すべてのCSSアニメーションとトランジションを無効にします。

 <code>@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }</code>

これは広いアプローチです。より洗練されたソリューションテーラーは、おそらく複雑な遷移の代わりに単純な不透明なフェードを使用して、モーション効果を減らしました。

JavaScriptの考慮事項

prefers-reduced-motionメディアクエリは、javascriptでも機能します。

 let motionQuery = matchmedia（ '（recreter-reduced-motion）'）;

const handlereducemotion =（）=> {
  if（motionquery.matches）{
    //モーションオプションの削減
  }
}

MotionQuery.AddListener（ハンドラードゥクモーション）;
Handlereducemotion（）

ただし、システムの設定のみに依存することは、絶対確実ではありません。 UIトグルは、ユーザーが直接制御を提供します。

アニメーションをスクロールします

スクロールトリガーアニメーションは創造的な可能性を提供しますが、ユーザーエクスペリエンスに悪影響を与える可能性があります。調査によると、ユーザーは遅い負荷時間を入学アニメーションと混同し、遅延が認識されます。

GreensockのScrolltriggerプラグインは、これに対処するためのfastScrollEndを提供します。高いスクロール速度を検出し、アニメーションをスキップして、応答性の高いエクスペリエンスを確保します。 ScrolltriggerのmatchMedia()は、削減されたモーションに優しいスクロールアニメーションの作成も簡素化します。

包括的で楽しいユーザーエクスペリエンスの目的、共感、責任あるアニメーションの実践を優先します。

以上が共感的なアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。