Angular4 realisiert einen 3D-Effekt

Dieses Mal werde ich Ihnen Angular4 vorstellen, um 3D-Effekte zu erzielen. Was sind die Vorsichtsmaßnahmen für Angular4, um 3D-Effekte zu erzielen? Das Folgende ist ein praktischer Fall.

Was ist Angular?

Angular ist ein von Google entwickeltes und gepflegtes Framework zur Entwicklung plattformübergreifender Anwendungen, die sowohl für Mobiltelefone als auch für Desktops geeignet sind.

Was sind die Merkmale von Angular?

Basierend auf Angular können wir Anwendungen für alle Plattformen erstellen. Zum Beispiel: Webanwendungen, mobile Webanwendungen, mobile Anwendungen und Desktopanwendungen usw.

Erreichen Sie durch Web Worker und serverseitiges Rendering (SSR) die höchste Rendering-Geschwindigkeit, die auf heutigen Webplattformen erreichbar ist.

Mit Angular haben Sie eine effektive Kontrolle über die Skalierbarkeit. Basierend auf RxJS, Immutable.js und anderen Push-Modellen kann es sich an massive Datenanforderungen anpassen.

Welche Funktionen bietet Angular?

Dynamisches HTML
Leistungsstarkes Formularsystem (vorlagengesteuert und modellgesteuert)
Leistungsstarke Ansichts-Engine
Ereignisverarbeitung
Schnelle Seitenwiedergabe
Flexibles Routing
HTTP-Dienst
Kapselung anzeigen
AOT, Tree Shaking

Was ist der Unterschied zwischen Angular und AngularJS

Kein Controller und Scope mehr
Bessere Komponentisierung und Code-Wiederverwendung
Bessere mobile Unterstützung
RxJS und Observable eingeführt
Zone.js eingeführt, um eine intelligentere Änderungserkennung zu ermöglichen

Dieser Effekt ist der auf der offiziellen Website von Smartisan Technology, Didi Portal. Der Effekt ist etwas abweichend, aber insgesamt ist er in Ordnung.

Sagen Sie mir, was die Schwierigkeit ist, dies zu erreichen

Wenn man nativ schreibt, kann jeder schreiben, aber Leute wie ich, die neu bei Angular sind, waren völlig verwirrt, als ich mich entschied, nativ zu schreiben, aber ob ich in Angular schreibe, weiß ich nicht wo man anfangen soll. . .

Verwenden Sie den Winkelbefehl, um diesen Effekt in einen Befehl einzuschließen. Dies ist nicht besonders praktisch, wenn Sie ihn das nächste Mal verwenden möchten (fügen Sie bei Bedarf einen Befehl hinzu, und es ist in Ordnung),

1. Betreiben Sie Mausereignisse und übergeben Sie Parameter in Winkelanweisungen,

2. So erhalten Sie das Ereignisobjekt des Mausbedienungsobjekts, genau wie das native

3. Wie man verschiedene Attribute von Objekten

erhält und verwaltet Das wusste ich nicht, als ich das gemacht habe. . . Weitere Informationen finden Sie im Blog. . Erst dann wusste ich, dass dies geschrieben wurde

 @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;
 ...
 }
}

Nachdem Sie die Grundstruktur oben verstanden haben, können Sie diesen Effekt erzielen. Schließlich ist die Logik dieselbe.

Fügen Sie den Code direkt ein

import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
 selector: '[appDirectives]'
})
export class DirectivesDirective {
// public el;
 private distance = 50;
 private rotationMultiple = 0.1
 constructor(private el: ElementRef) {
 this.distance = 50;
 this.rotationMultiple = 0.1
 }
 @HostListener('mousemove') onMouseMove(para) {
 let e= para ||window.event;
 let pTop = this.el.nativeElement.offsetTop;
 let pLeft = this.el.nativeElement.offsetLeft;
 let pWidth = this.el.nativeElement.offsetWidth;
 let pHeight =this.el.nativeElement.offsetHeight;
 if(e.clientX < pWidth/2 && e.clientY > pHeight/2 || e.clientX > pWidth/2 && e.clientY > pHeight/2) {
 // 3.4
 let pctX =(((e.clientX - pLeft)/ pWidth) - 0.5);
 let pctY = -(((e.clientY - pTop)/ pHeight) - 0.3);
 this.animate(pctX, pctY, this.rotationMultiple, this.distance);
 }
 if(e.clientX < pWidth/2 && e.clientY < pHeight/2 || e.clientX > pWidth/2 && e.clientY < pHeight/2) {
 // 1.2
 let pctX =((e.clientX - pLeft)/ pWidth) - 0.7;
 let pctY = ((e.clientY - pTop)/ pHeight) - 0.5;
 this.animate(pctX, pctY, this.rotationMultiple, this.distance);
 }
 }
 private animate(pctX: number, pctY: number, rotationMultiple: number, distance: number) {
 let rotateX = pctY * rotationMultiple * -180;
 let rotateY = pctX * rotationMultiple * 180;
 this.el.nativeElement.style.transform = ' rotateX(' + rotateX + 'deg' + ')' + ' rotateY(' + rotateY + 'deg'+ ')';
 }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Implementieren des Dropdown-Menüs „Ausgewählte sekundäre Verknüpfung“ mit AngularJS

Wie Berechnet JS die Länge des Erfassungsobjekts?

Das obige ist der detaillierte Inhalt vonAngular4 realisiert einen 3D-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!