Angular4 réalise un effet 3D

Cette fois, je vais vous présenter Angular4 pour obtenir des effets 3D. Quelles sont les précautions pour Angular4 pour obtenir des effets 3D. Ce qui suit est un cas pratique, jetons un coup d'œil.

Qu'est-ce qu'Angular

Angular est un framework développé et maintenu par Google pour développer des applications multiplateformes, adaptées aussi bien aux téléphones mobiles qu'aux ordinateurs de bureau.

Quelles sont les fonctionnalités d'Angular

Basé sur Angular, nous pouvons créer des applications pour toutes les plateformes. Par exemple : applications Web, applications Web mobiles, applications mobiles et applications de bureau, etc.

Grâce aux Web Workers et au rendu côté serveur (SSR), obtenez la vitesse de rendu la plus élevée possible sur les plateformes Web actuelles.

Angular vous donne un contrôle efficace sur l'évolutivité. Basé sur RxJS, Immutable.js et d’autres modèles push, il peut s’adapter à des besoins massifs en données.

Quelles fonctionnalités Angular fournit-il

HTML dynamique
Système de formulaire puissant (piloté par modèle et piloté par modèle)
Moteur d'affichage puissant
Gestion des événements
Rendu de page rapide
Routage flexible
Service HTTP
Voir l'encapsulation
AOT, Tree Shaking

Quelle est la différence entre Angular et AngularJS

Plus de contrôleur et de portée
Meilleure composantisation et réutilisation du code
Meilleure prise en charge mobile
Introduit de RxJS et Observable
Introduction de Zone.js pour fournir une détection plus intelligente des changements

Cet effet est celui du site officiel de Smartisan Technology, Didi Portal. L'effet est un peu décalé, mais dans l'ensemble ça va.

Dites-moi quelle est la difficulté pour y parvenir

Si vous écrivez en natif, tout le monde peut écrire, mais pour les nouveaux venus dans Angular, comme moi, j'étais complètement confus lorsque j'ai décidé d'écrire en natif, mais si j'écris en Angular, je ne sais pas. par où commencer. . .

Utilisez la commande angulaire pour envelopper cet effet dans une commande. Ce ne sera pas très pratique si vous souhaitez l'utiliser la prochaine fois (ajoutez une commande si nécessaire et tout ira bien),

1. Gérez les événements de la souris et transmettez les paramètres dans les instructions angulaires,

2. Comment obtenir l'objet événement de l'objet opération de la souris, le même que celui natif

3. Comment obtenir et exploiter divers attributs d'objets

Je ne le savais pas quand j'ai fait ça. . . Consultez le blog pour plus d'informations. . C'est seulement à ce moment-là que j'ai su que c'était écrit

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

Après avoir compris la structure de base ci-dessus, vous pouvez obtenir cet effet. Après tout, la logique est la même.

Collez le code directement

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'+ ')';
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le menu déroulant de sélection de liaison secondaire dans AngularJS

Comment JS calcule-t-il la longueur de l'objet obtenu

Ajout et suppression des informations utilisateur sur les opérations Bootstrap et Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!