Angular4實現3d效果

這次帶給大家Angular4實現3d效果，Angular4實現3d效果的注意事項有哪些，下面就是實戰案例，一起來看一下。

Angular 是什麼

# Angular 是由Google開發與維護一個開發跨平台應用程式的框架，同時適用於手機與桌面。

Angular 有什麼特點

# 基於 Angular 我們可以建立適用於所有平台的應用。例如：Web 應用、行動 Web 應用、行動應用程式和桌面應用程式等。

透過 Web Worker和服務端渲染 (SSR)，達到在現今Web平台上所能達到的最高渲染速度。

Angular 讓你能夠有效掌控可擴充性。基於 RxJS、Immutable.js 和其它推送模型，能適應海量資料需求。

Angular 提供了哪些功能

動態HTML
強大的表單系統(模板驅動與模型驅動)
強大的視圖引擎
#事件處理
快速的頁面渲染
靈活的路由
HTTP 服務
檢視封裝
AOT、Tree Shaking

# Angular 與 AngularJS 有什麼區別

不再有Controller和Scope
更好的組件化及程式碼復用
更好的行動端支援
引入了RxJS 與Observable
引入了Zone.js，提供更聰明的變化檢測

這個效果就是錘子科技官網的那個效果，滴滴滴傳送門，效果有一點偏差，整體還行。

說一下，實現這個的難點在哪

用原生寫的話，大家都會寫，但是對於初學angular的人來說，比如我，決定寫的時候我整個人是懵的，原生我會寫，可是讓我用angular寫，我不知道從何寫起。 。 。

運用angular的指令，把這個效果包裝在一個指令裡，下次想用簡直不要太方便凹（在需要的地方添個指令就ok拉），

1.在angular指令裡操作滑鼠事件、傳遞參數，

2.怎樣取得滑鼠操作物件的event物件呢，和原生一樣

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

了解了上面的基本結構，就可以完成這個效果了，畢竟邏輯什麼的都是一樣的。

直接貼程式碼

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

AngularJS實作select二級連動下拉選單步奏詳解

JS怎麼計算取得物件的長度

Bootstrap與Vue操作使用者資訊的新增與刪除

##

以上是Angular4實現3d效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！