Angular7 - Hoạt ảnh

Hình ảnh động thêm rất nhiều tương tác giữa các phần tử html. Hoạt ảnh đã có sẵn với Angular 2, từ Angular 4 trở đi hoạt ảnh không còn là một phần của thư viện @ angle / core nữa, mà là một gói riêng biệt cần được nhập vào app.module.ts.

Để bắt đầu, chúng ta cần nhập thư viện với dòng mã bên dưới:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Các BrowserAnimationsModule cần được thêm vào mảng nhập trong app.module.ts như hình dưới đây -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Trong app.component.html, chúng tôi đã thêm các phần tử html, sẽ được làm động.

<div> 
   <button (click) = "animate()">Click Me</button> 
   <div [@myanimation] = "state" class = "rotate"> 
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div> 
</div>

Đối với div chính, chúng tôi đã thêm một nút và một div có hình ảnh. Có một sự kiện nhấp chuột mà hàm hoạt ảnh được gọi. Và đối với div, chỉ thị @myanimation được thêm vào và có giá trị là trạng thái.

Bây giờ chúng ta hãy xem app.component.ts nơi hoạt ảnh được xác định.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div {
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate {
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})
export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

Chúng ta phải nhập hàm hoạt ảnh sẽ được sử dụng trong tệp .ts như được hiển thị ở trên.

import { trigger, state, style, transition, animate } from '@angular/animations';

Ở đây chúng tôi đã nhập kích hoạt, trạng thái, kiểu, chuyển tiếp và hoạt ảnh từ @ angle / animations.

Bây giờ, chúng ta sẽ thêm thuộc tính hoạt ảnh vào trình trang trí @Component () -

animations: [ 
   trigger('myanimation',[
      state('smaller',style({ 
         transform : 'translateY(100px)' })), 
      state('larger',style({
         transform : 'translateY(0px)' })), 
         transition('smaller <=> larger',animate('300ms ease-in')) 
   ]) 
]

Trình kích hoạt xác định thời điểm bắt đầu hoạt ảnh. Tham số đầu tiên của nó là tên của hoạt ảnh được cấp cho thẻ html mà hoạt ảnh cần được áp dụng. Tham số thứ hai là các chức năng chúng ta đã nhập - trạng thái, chuyển tiếp, v.v.

Hàm trạng thái liên quan đến các bước hoạt ảnh, mà phần tử sẽ chuyển tiếp giữa. Ngay bây giờ chúng tôi đã xác định hai trạng thái, nhỏ hơn và lớn hơn. Đối với trạng thái nhỏ hơn, chúng tôi đã đưa ra kiểutransform:translateY(100px) và transform:translateY(100px).

Chức năng chuyển tiếp thêm hoạt ảnh vào phần tử html. Đối số đầu tiên nhận trạng thái bắt đầu và kết thúc, đối số thứ hai chấp nhận hàm animate. Chức năng tạo hiệu ứng cho phép bạn xác định độ dài, độ trễ và mức độ dễ dàng của quá trình chuyển đổi.

Bây giờ chúng ta hãy xem tệp .html để xem chức năng chuyển đổi hoạt động như thế nào -

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class = "rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

Có một thuộc tính style được thêm vào chỉ thị @component, điều này sẽ căn chỉnh trung tâm div. Chúng ta hãy xem xét ví dụ sau để hiểu giống nhau -

styles:[` 
   div{  
      margin: 0 auto; 
      text-align: center; 
      width:200px; 
   } 
   .rotate{ 
      width:100px; 
      height:100px; 
      border:solid 1px red;
   } 
`],

Ở đây, một ký tự đặc biệt [``] được sử dụng để thêm kiểu vào phần tử html, nếu có. Đối với div, chúng tôi đã cung cấp tên hoạt ảnh được xác định trongapp.component.ts tập tin.

Khi nhấp vào một nút, nó gọi hàm tạo hoạt ảnh, được định nghĩa trong app.component.ts tập tin như sau -

export class AppComponent {
   state: string = "smaller"; 
   animate() { 
      this.state = this.state == ‘larger’? 'smaller' : 'larger'; 
   } 
}

Biến trạng thái được xác định và có giá trị mặc định là nhỏ hơn. Chức năng hoạt ảnh thay đổi trạng thái khi nhấp chuột. Nếu trạng thái lớn hơn, nó sẽ chuyển đổi thành nhỏ hơn; và nếu nhỏ hơn, nó sẽ chuyển đổi thành lớn hơn.

Đây là cách đầu ra trong trình duyệt (http://localhost:4200/) sẽ giống như -

Khi nhấp vào Click Me , vị trí của hình ảnh được thay đổi như trong ảnh chụp màn hình sau -

Hàm biến đổi được áp dụng theo hướng y, được thay đổi từ 0 đến 100px khi chúng ta nhấp vào nút Click Me. Hình ảnh được lưu trữ trongassets/images thư mục.