Angular4で3D効果を実現

今回は Angular4 で 3D 効果を実現するための 注意事項 について、実際の事例を見てみましょう。

Angularとは

Angular は、携帯電話とデスクトップの両方に適したクロスプラットフォーム アプリケーションを開発するために Google によって開発および保守されているフレームワークです。

Angularの特徴は何ですか

Angular に基づいて、すべてのプラットフォーム向けのアプリケーションを構築できます。例: Web アプリケーション、モバイル Web アプリケーション、モバイル アプリケーションとデスクトップ アプリケーションなど。

Web ワーカーとサーバーサイド レンダリング (SSR) を通じて、今日の Web プラットフォームで達成可能な最高のレンダリング速度を実現します。

Angular を使用すると、スケーラビリティを効果的に制御できます。 RxJS、Immutable.js、その他のプッシュ モデルに基づいており、大量のデータ要件に適応できます。

Angularが提供する機能

動的HTML
強力なフォームシステム(テンプレート駆動およびモデル駆動)
強力なビューエンジン
イベント処理
高速ページレンダリング
柔軟なルーティング
HTTPサービス
ビューのカプセル化
AOT、ツリーシェイク

Angular と AngularJS の違いは何ですか

コントローラーとスコープは不要
コンポーネント化とコードの再利用が向上
モバイルサポートが向上
RxJSとObservableが導入されました
よりインテリジェントな変更検出を提供するZone.jsが導入されました

このエフェクトは、Smartisan Technology の公式 Web サイト、Didi ポータルにあるものです。エフェクトは少し異なりますが、全体的には問題ありません。

これを達成するのに何が難しいか教えてください

ネイティブで書けば誰でも書けますが、私のようにAngularを初めて使う人にとっては、ネイティブで書けるけどAngularで書こうと思ったときは全く分かりませんでした。どこから始めるか。 。 。

この効果をコマンドでラップするには、angular コマンドを使用します。これは、次回使用する場合にはあまり便利ではありません (必要な場所にコマンドを追加すれば問題ありません)。 1. マウスイベントを操作し、Angular 命令でパラメータを渡します。

2. マウス操作オブジェクトのイベントオブジェクトの取得方法はネイティブと同じです

3. オブジェクトのさまざまな

を取得して操作する方法 これを作ったときは知りませんでした。 。 。情報についてはブログをご覧ください。 。そのとき初めて、これが書かれていることを知りました

 @HostListener('mousemove') onMouseMove(para) {}
 @HostListener('mousemove') onMouseMove(para) {
 let e= para ||window.event;
 }

上記の基本構造を理解した後、この効果を実現できます。結局のところ、ロジックは同じです。

コードを直接貼り付けてください

 export class DirectivesDirective {
 constructor(private el: ElementRef) {
 }
 @HostListener('mousemove') onMouseMove(para) {
 let e= para ||window.event;
 let pTop = this.el.nativeElement.offsetTop;
 ...
 }
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がAngular4で3D効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。