Angular4 realizes 3d effect

This time I will bring you Angular4 to achieve 3d effects. What are the precautions for Angular4 to achieve 3d effects? The following is a practical case, let’s take a look.

What is Angular

Angular is a framework developed and maintained by Google for developing cross-platform applications, suitable for both mobile phones and desktops.

What are the characteristics of Angular

Based on Angular we can build applications for all platforms. For example: Web applications, mobile Web applications, mobile applications and desktop applications, etc.

Through Web Workers and server-side rendering (SSR), achieve the highest rendering speed achievable on today's web platforms.

Angular gives you effective control over scalability. Based on RxJS, Immutable.js and other push models, it can adapt to massive data needs.

What functions does Angular provide

Dynamic HTML

Powerful form system (template driven and model driven)
Powerful view engine

Event processingFast page rendering
Flexible routing
HTTP service
View encapsulation
AOT, Tree Shaking

What is the difference between

Angular and AngularJS

No more Controller and Scope

Better componentization and code reuse
Better mobile support
Introduced RxJS and Observable
Introduced Zone.js to provide more intelligent change detection

This effect is the one on the official website of Smartisan Technology, Didi Portal. The effect is a little off, but overall it’s okay.

Tell me, what is the difficulty in achieving this

If you write in native, everyone can write, but for people who are new to Angular, like me, I was completely confused when I decided to write. I can write in native, but if I write in Angular, I don’t know where to start. rise. . .

Use the angular command to wrap this effect in a command. It will not be too convenient if you want to use it next time (add a command where needed and it will be OK),

1. Operate mouse events and pass parameters in angular instructions,

2. How to get the event object of the mouse operation object, the same as the native one

3. How to obtain and operate various

attributes of objects

I didn't know that when I made this. . . Check out the blog for information. . Only then did I know this was written

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

After understanding the basic structure above, you can achieve this effect. After all, the logic is the same.

Post the code directly

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to implement select secondary linkage drop-down menu in AngularJS

How JS calculates the acquisition of objects Length

Bootstrap and Vue operations to add and delete user information

The above is the detailed content of Angular4 realizes 3d effect. For more information, please follow other related articles on the PHP Chinese website!