집 > 기사 > 웹 프론트엔드 > Angular4는 3D 효과를 구현합니다

Angular4는 3D 효과를 구현합니다

php中世界最好的语言원래의: 2018-04-16 17:47:021974검색

이번에는 3D 효과를 구현하기 위한 Angular4를 소개하겠습니다. Angular4에서 3D 효과를 구현하기 위한 주의사항은 무엇인가요?

Angular란 무엇입니까

Angular는 휴대전화와 데스크톱 모두에 적합한 크로스 플랫폼 애플리케이션 개발을 위해 Google에서 개발하고 유지관리하는 프레임워크입니다.

Angular의 기능은 무엇인가요

Angular를 기반으로 모든 플랫폼용 애플리케이션을 구축할 수 있습니다. 예: 웹 애플리케이션, 모바일 웹 애플리케이션, 모바일 애플리케이션, 데스크톱 애플리케이션 등

Web Worker와 서버측 렌더링(SSR)을 통해 오늘날의 웹 플랫폼에서 달성할 수 있는 최고의 렌더링 속도를 달성하세요.

Angular를 사용하면 확장성을 효과적으로 제어할 수 있습니다. RxJS, Immutable.js 및 기타 푸시 모델을 기반으로 대규모 데이터 요구 사항에 적응할 수 있습니다.

Angular는 어떤 기능을 제공하나요

동적 HTML
강력한 양식 시스템(템플릿 기반 및 모델 기반)
강력한 뷰 엔진
이벤트 처리
빠른 페이지 렌더링
유연한 라우팅
HTTP 서비스
View encapsulation
AOT, Tree Shaking

Angular와 AngularJS

의 차이점은 무엇인가요? 더 이상 컨트롤러 및 범위 없음
더 나은 구성 요소화 및 코드 재사용
더 나은 모바일 지원
RxJS 및 Observable 도입
Zone.js를 도입하여 더욱 지능적인 변경 감지 기능 제공

스마티산 테크놀로지 공식 홈페이지 디디포털에 올라온 효과입니다. 효과가 조금 아쉽지만 전체적으로 괜찮습니다.

이를 달성하는 데 어떤 어려움이 있는지 말해보세요

Native로 쓰면 누구나 쓸 수 있는데 저처럼 Angular를 처음 접하는 사람들은 Native로 쓸 수는 있는데 Angular로 쓰면 잘 모르겠어요. 어디서부터 시작해야 할까요? . .

이 효과를 명령으로 감싸려면 각도 명령을 사용하십시오. 다음에 사용하고 싶다면 너무 편리하지 않을 것입니다(필요한 곳에 명령을 추가하면 괜찮을 것입니다),

1. 각도 지침에서 마우스 이벤트를 작동하고 매개변수를 전달합니다.

2. 마우스 조작 객체의 이벤트 객체를 구하는 방법은 네이티브와 동일합니다

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!