🖥 4アニメーション技術を使用して良い角度UXを取得する

⌨️ ユーザーアニメーションエクスペリエンス(UX)の角度アニメーション、CSSアニメーション、およびWebアニメーションAPIを使用してアニメーションを実装することによってアプリケーションを改善します.

開発者は、彼らのアプリケーションのユーザーエクスペリエンス(UX)を大幅に改善する意味のある非邪魔な方法でアニメーションを使用することができます.このブログのポストは、人気のユースケースをカバーする、アプリケーションのユーザーインターフェイスをアニメーション化する4つの効果的なテクニックについて説明します.あなたはどのようにあなたのユーザーのための記憶に残るものにブランドの経験を変換する方法を学びます.

早く始める
私はあなたが角にアニメーションを追加するに焦点を当てるためにデモアプリケーションを作成しました.あなたはこのチュートリアルを介して進行状況としてスターターアプリにアニメーションを追加します.スターターアプリケーションは、そのスタイルとレイアウトの世話をするためにTarwindを使用していますが、ここで議論したアニメーションのどれもそれに依存しています.
このチュートリアルに従って任意のレポをクローニングせずに、右側のブラウザを使用してStackblitz or CodeSandbox .
IDEでローカルに動作するようにするには、デモアプリケーションをクローンし、スターター分岐をチェックします.

git clone -b starter [email protected]:auth0-blog/angular-animations-storefront.git

レポをクローンしたら、makeangular-animations-storefront カレントディレクトリ:

cd angular-animations-storefront

プロジェクトの依存関係をインストールします

npm i

ローカルでプロジェクトを実行します

npm run start

角度アニメーションの概要
角度はすぐにあなたのアプリケーションにモーションを追加できる強力なアニメーションモジュールが付属しています:BrowserAnimationsModule . フードの下では、このモジュールは、WebアニメーションAPI(WAAPI)を使用してモーションと双方向性を作成します.WAAPIが利用できないときはいつでも、BrowserAnimationsModule CSSのキーフレームを使用してください.角度アニメーションでは、Webの位置、サイズ、色、および多くのようなアニメーションを考慮して任意のプロパティをアニメーション化するために、その抽象化層を使用するオプションを与えます.
Read more...