這次帶給大家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中文網其它相關文章！
推薦閱讀：
##以上是Angular4實現3d效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
