这次给大家带来Angular4实现3d效果,Angular4实现3d效果的注意事项有哪些,下面就是实战案例,一起来看一下。
Angular 是什么
Angular 是由谷歌开发与维护一个开发跨平台应用程序的框架,同时适用于手机与桌面。
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中文网其它相关文章!
推荐阅读: