Animations trong Angular

NgAnimate Làm gì?

Mô-đun ngAnimate thêm và xóa các lớp.

Mô-đun ngAnimate không tạo Animation cho các phần tử HTML. Tuy nhiên, khi ngAnimate nhận thấy các sự kiện nhất định, chẳng hạn như ẩn hoặc hiển thị một phần tử HTML, phần tử sẽ nhận một số lớp được xác định trước có thể được sử dụng để tạo Animation.

Các lệnh trong AngularJS để thêm / bớt các lớp là:

• ng-show
• ng-hide
• ng-class
• ng-view
• ng-include
• ng-repeat
• ng-if
• ng-switch

Lệnh ng-show và ng-hide thêm hoặc bớt giá trị lớp ng-hide.

Các bài viết liên quan:

• Giới thiệu Animation trong Flutter
• Animation trong React
• Http response code
• Các bước xây dựng mô hình Machine learning
• Phân tích Means-Ends Analysis trong Artificial Intelligence

Các lệnh khác thêm một giá trị lớp ng-enter khi nhập DOM và một thuộc tính ng-left khi bị xóa khỏi DOM.

Lệnh ng-repeat cũng thêm giá trị lớp ng-move khi phần tử HTML thay đổi vị trí.

Ngoài ra, phần tử HTML sẽ có một tập hợp các giá trị lớp trong quá trình Animation, các giá trị này sẽ bị loại bỏ khi Animation kết thúc.

Ví dụ: lệnh ng-hide sẽ nối các giá trị lớp này:

• ng-animate
• ng-hide-animate
• ng-hide-add(nếu phần tử sẽ bị ẩn)
• ng-hide-remove (nếu phần tử sẽ được hiển thị)
• ng-hide-add-active (nếu phần tử sẽ bị ẩn)
• ng-hide-remove-active (nếu phần tử sẽ được hiển thị)

Animation sử dụng CSS

Chúng ta có thể sử dụng chuyển tiếp CSS hoặc Animation CSS để tạo Animation cho các phần tử HTML. Hướng dẫn này sẽ cho bạn thấy cả hai.

Chuyển đổi CSS

Chuyển đổi CSS cho phép bạn thay đổi các giá trị thuộc tính CSS một cách trơn tru, từ giá trị này sang giá trị khác, trong một khoảng thời gian nhất định:

Ví dụ:

Khi phần tử DIV nhận được lớp .ng-hide, transition sẽ mất 0,5 giây và chiều cao sẽ thay đổi trơn tru từ 100px thành 0:

<style>  
div {  
  transition: all linear 0.5s;  
  background-color: lightblue;  
  height: 100px;  
}  
  
.ng-hide {  
  height: 0;  
}  
</style>  

Animation CSS

Animation CSS cho phép bạn dễ dàng thay đổi các giá trị thuộc tính CSS từ giá trị này sang giá trị khác trong một khoảng thời gian nhất định:

Ví dụ:

Khi phần tử DIV nhận được lớp .ng-hide, Animation myChange sẽ chạy, điều này chỉ đơn giản là thay đổi chiều cao từ 100px thành 0:

<style>  
@keyframes myChange {  
  from {  
    height: 100px;  
  } to {  
    height: 0;  
  }  
}  
  
div {  
  height: 100px;  
  background-color: lightblue;  
}  
  
div.ng-hide {  
  animation: 0.5s myChange;  
}  
</style>  

Các mô-đun Angular chính cho Animation là @angular/animations và @angular/platform -browser. Khi bạn tạo một dự án mới bằng CLI , những phần phụ thuộc này sẽ tự động được thêm vào dự án của bạn.

Để bắt đầu với việc thêm Animation Angular vào dự án của bạn, hãy nhập các mô-đun dành riêng cho Animation cùng với chức năng Angular tiêu chuẩn.

Bước 1: Bật mô-đun Animation

Nhập BrowserAnimationsModule, giới thiệu khả năng Animation vào mô-đun ứng dụng gốc Angular của bạn.

src/app/app.module.ts  
content_copyimport { NgModule } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';  
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
  
@NgModule({  
  imports: [  
    BrowserModule,  
    BrowserAnimationsModule  
  ],  
  declarations: [ ],  
  bootstrap: [ ]  
})  
export class AppModule { }  

Lưu ý: Khi bạn sử dụng CLI để tạo ứng dụng của mình, mô-đun ứng dụng gốc app.module.ts sẽ được đặt trong thư mục src / app.

Bước 2: Nhập các chức năng Animation vào các tệp thành phần

Nếu bạn định sử dụng các hàm Animation cụ thể trong các tệp thành phần, hãy nhập các hàm đó từ @ angular/animations .

src/app/app.component.ts

content_copyimport { Component, HostBinding } from '@angular/core';  
import {  
  trigger,  
  state,  
  style,  
  animate,  
  transition,  
  // ...  
} from '@angular/animations';  

Bước 3: Thêm thuộc tính siêu dữ liệu Animation

Trong tệp thành phần, hãy thêm thuộc tính siêu dữ liệu có tên Animation: @Component () trong trình trang trí. Bạn đặt trình kích hoạt xác định Animation trong thuộc tính AnimationMetadata.

src/app/app.component.ts  
content_copy@Component({  
  selector: 'app-root',  
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css'],  
  animations: [  
    // animation triggers go here  
  ]  
})  

Tạo Animation cho transition

Hãy tạo hiệu ứng chuyển đổi thay đổi một phần tử HTML từ trạng thái này sang trạng thái khác. Ví dụ: bạn có thể chỉ định xem một nút hiển thị mở hay đóng dựa trên hAnimation cuối cùng của người dùng. Khi nút ở trạng thái mở, nó có thể nhìn thấy và có màu vàng. Khi nó ở trạng thái đóng, nó có màu trong mờ và có màu xanh lam.

Trong HTML, các thuộc tính này được đặt bằng cách sử dụng các kiểu CSS phổ biến như màu sắc và độ mờ. Trong Angular, sử dụng hàm style () để chỉ định một tập hợp các kiểu CSS để sử dụng với Animation. Thu thập một tập hợp các kiểu trong trạng thái Animation và đặt tên cho trạng thái, chẳng hạn như mở hoặc đóng.

Hãy tạo một thành phần đóng mở mới để tạo Animation với các chuyển đổi đơn giản.

Chạy lệnh sau trong terminal để tạo thành phần:

ng g component open-close  

Nó sẽ tạo thành phần tại src /app/open-close.component.ts.

Trạng thái và kiểu Animation

Sử dụng hàm position () của Angular để xác định các trạng thái khác nhau sẽ được gọi vào cuối mỗi transition. Hàm này nhận hai đối số: một tên duy nhất chẳng hạn như mở hoặc đóng và một hàm style ().

Sử dụng hàm style () để xác định một tập hợp các kiểu để liên kết với một tên trạng thái nhất định. Tốt nhất là sử dụng CamelCase cho các thuộc tính kiểu có chứa dấu gạch ngang, chẳng hạn như màu nền hoặc đặt chúng trong dấu ngoặc kép, chẳng hạn như ‘màu nền’.

Hãy xem hàm state () của Angular hoạt động như thế nào với hàm style? ¬ (?) Để thiết lập các thuộc tính style CSS. Trong đoạn mã này, nhiều thuộc tính kiểu được đặt cùng một lúc cho trạng thái. Ở trạng thái mở, nút có chiều cao 200 pixel, độ mờ là 1 và nền màu vàng.

src/app/open-close.component.ts

content_copy// ...  
state('open', style({  
  height: '200px',  
  opacity: 1,  
  backgroundColor: 'yellow'  
})),  

Ở trạng thái đóng sau, nút có chiều cao 100 pixel, độ mờ là 0,8 và màu nền là xanh lam.

src/app/open-close.component.ts  
content_copystate('closed', style({  
  height: '100px',  
  opacity: 0.8,  
  backgroundColor: 'blue'  
})),      

Chuyển tiếp và thời gian

Trong Angular, bạn có thể đặt nhiều kiểu mà không cần bất kỳ Animation nào. Tuy nhiên, nếu không cần tinh chỉnh thêm, nút sẽ bật ngay lập tức mà không bị mờ, không bị co lại hoặc bất kỳ chỉ báo rõ ràng nào khác cho thấy sự thay đổi đang diễn ra.

Để thực hiện thay đổi ít đột ngột hơn, bạn cần xác định chuyển đổi Animation để chỉ định các thay đổi xảy ra giữa trạng thái này và trạng thái khác tại một thời điểm nào đó. Hàm chuyển đổi () chấp nhận hai đối số: đối số đầu tiên chấp nhận một biểu thức xác định hướng giữa hai trạng thái chuyển tiếp và đối số thứ hai chấp nhận một hoặc một loạt các bước animate ().

Sử dụng hàm animate () để xác định độ dài, độ trễ và độ mượt và chỉ định hàm kiểu để xác định kiểu khi transition xảy ra. Sử dụng hàm animate () để xác định khung hình chính () cho Animation nhiều giai đoạn. Các định nghĩa này được đặt trong đối số thứ hai của hàm animate ().

Siêu dữ liệu Animation: thời lượng, độ trễ và tốc độ

Hàm animate () (đối số thứ hai của hàm chuyển tiếp) chấp nhận thời gian và kiểu của các tham số đầu vào.

Tham số thời gian nhận một số hoặc một chuỗi được xác định thành ba phần.

animate (duration) or animate (‘duration delay easing’)  

Phần đầu tiên, giai đoạn, rất cần thiết. Thời lượng có thể được biểu thị dưới dạng một số tính bằng mili giây không có dấu ngoặc kép hoặc tính bằng giây có dấu ngoặc kép và dưới dạng bộ định thời gian. Ví dụ, khoảng thời gian một phần mười giây có thể được biểu thị như sau:

• Dưới dạng số đơn giản, tính bằng mili giây: 100
• Trong một chuỗi, dưới dạng mili giây: ‘100ms.’
• Trong một chuỗi, tính bằng giây: ‘0,1 giây.’

Đối số thứ hai, delay, có cùng cú pháp với thời lượng. Ví dụ:

• Chờ 100ms và sau đó chạy trong 200ms: ‘0,2s 100ms’.

Đối số thứ ba, nới lỏng, kiểm soát cách Animation tăng tốc và chậm lại trong thời gian chạy của nó.

Ví dụ: việc nới lỏng làm cho Animation bắt đầu chậm và tăng tốc độ khi nó tiến triển.

• Chờ 100ms, chạy trong 200ms. Sử dụng đường cong giảm tốc để bắt đầu nhanh dần đều và chuyển dần đến điểm dừng: ‘0,2 giây trong số 100 mili giây trơn tru
• Chạy lên đến 200ms mà không có bất kỳ độ trễ nào. Sử dụng đường cong chuẩn để bắt đầu chậm dần, tăng tốc ở giữa và sau đó giảm dần về cuối: ‘0,2 giây vào ra
• Khởi động nhanh, chạy tối đa 200ms. Sử dụng đường cong gia tốc để bắt đầu chậm dần và kết thúc ở vận tốc tối đa: ‘Dễ dàng 0,2 giây’.

Lưu ý: Xem chủ đề trang web Material Design về Đường cong uốn để biết thông tin chung về đường cong nới lỏng tự nhiên.

Ví dụ này cung cấp một transition trạng thái từ mở sang đóng với transition giữa các trạng thái trong 1 giây.

src/app/open-close.component.ts

content_copytransition('open => closed', [  
  animate('1s')  
]),  

Trong đoạn mã trước, toán tử => cho biết chuyển đổi một chiều và <=> là hai chiều. Trong transition, animate () chỉ định thời gian chuyển đổi diễn ra. Trong trường hợp này, trạng thái thay đổi từ mở sang đóng mất 1 giây, được biểu thị ở đây là 1 giây.

Ví dụ này bổ sung một chuyển đổi trạng thái từ trạng thái đóng sang trạng thái mở với một cung Animation chuyển tiếp 0,5 giây.

src/app/open-close.component.ts

content_copytransition('closed => open', [  
  animate('0.5s')  
]),  

Lưu ý: Một số lưu ý bổ sung về việc sử dụng các kiểu trong trạng thái và các chức năng chuyển tiếp.

• Sử dụng state () để xác định các kiểu được áp dụng ở cuối mỗi transition; chúng vẫn tồn tại sau khi Animation hoàn thành.
• Sử dụng chuyển đổi () để xác định các kiểu trung gian, tạo ra ảo giác về chuyển động trong Animation.
• Khi Animation bị tắt, các kiểu transition () có thể bị bỏ qua, nhưng không thể bỏ qua kiểu trạng thái ().

Bao gồm nhiều cặp trạng thái trong cùng một đối số chuyển đổi ():

chuyển tiếp ( ‘on => off, off => void’ ).

Kích hoạt Animation

Animation cần một trình kích hoạt để nó biết khi nào bắt đầu. Hàm trigger () thu thập các trạng thái và chuyển tiếp và đặt tên cho Animation để bạn có thể đính kèm nó vào phần tử kích hoạt trong mẫu HTML.

Hàm trigger () mô tả tên của thuộc tính để theo dõi các thay đổi. Khi một thay đổi xảy ra, trình kích hoạt bắt đầu các hAnimation được bao gồm trong định nghĩa của nó. Những hAnimation này có thể là chuyển tiếp hoặc các hAnimation khác, như chúng ta sẽ thấy ở phần sau.

Chúng tôi sẽ đặt tên cho trình kích hoạt đóng-mở trong ví dụ này và gắn nó vào phần tử nút. Trình kích hoạt mô tả trạng thái mở và đóng và thời gian của hai transition.

Lưu ý: Trong mỗi lệnh gọi hàm trigger (), một phần tử chỉ có thể ở một vị trí bất kỳ lúc nào. Tuy nhiên, nhiều trình kích hoạt có thể được kích hoạt đồng thời.

Xác định Animation và đính kèm chúng vào mẫu HTML

Animation được xác định trong siêu dữ liệu của thành phần điều khiển phần tử HTML được tạo Animation. Đặt mã xác định Animation của bạn dưới Animation: thuộc tính @Component () trong trình trang trí.

src/app/open-close.component.ts

content_copy@Component({  
  selector: 'app-open-close',  
  animations: [  
    trigger('openClose', [  
      // ...  
      state('open', style({  
        height: '200px',  
        opacity: 1,  
        backgroundColor: 'yellow'  
      })),  
      state('closed', style({  
        height: '100px',  
        opacity: 0.8,  
        backgroundColor: 'blue'  
      })),  
      transition('open => closed', [  
        animate('1s')  
      ]),  
      transition('closed => open', [  
        animate('0.5s')  
      ]),  
    ]),  
  ],  
  templateUrl: 'open-close.component.html',  
  styleUrls: ['open-close.component.css']  
})  
export class OpenCloseComponent {  
  isOpen = true;  
  
  toggle() {  
    this.isOpen = !this.isOpen;  
  }  
  
}  

Khi bạn đã xác định trình kích hoạt Animation cho một thành phần, vui lòng đính kèm nó vào một phần tử trong mẫu của thành phần đó bằng cách đặt tên trình kích hoạt trong dấu ngoặc đơn và dấu @ bên cạnh nó. Sau đó, bạn có thể liên kết trình kích hoạt với một biểu thức mẫu bằng cách sử dụng cú pháp liên kết thuộc tính Angular tiêu chuẩn, như được hiển thị bên dưới, trong đó triggerName là tên của trình kích hoạt và biểu thức đánh giá trạng thái Animation xác định.

content_copy<div [@triggerName]=”expression”>…</div>;  

Animation được thực thi hoặc được kích hoạt khi giá trị biểu thức thay đổi sang trạng thái mới.

Đoạn mã sau liên kết trình kích hoạt với giá trị của thuộc tính isOpen.

src/app /open-close.component.html

content_copy<nav>  
  <button type="button" (click)="toggle()">Toggle Open/Close</button>  
</nav>  
<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">  
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>  
</div>  

Trong ví dụ này, khi biểu thức isOpen đánh giá trạng thái mở hoặc đóng đã xác định, nó thông báo kích hoạt thay đổi trạng thái thành mở-đóng. Sau đó, tùy thuộc vào mã đóng mở để xử lý thay đổi trạng thái và bắt đầu Animation thay đổi trạng thái.

Bạn có thể tạo Animation có điều kiện cho các phần tử vào hoặc rời trang (được chèn hoặc xóa khỏi DOM). Ví dụ: sử dụng * ngIf với trình kích hoạt Animation trong các mẫu HTML.

Lưu ý: Trong tệp thành phần, hãy đặt trình kích hoạt xác định Animation làm giá trị của thuộc tính Animation: @Component () trong trình trang trí.

Trong tệp mẫu HTML, hãy sử dụng tên trình kích hoạt để đính kèm các Animation được xác định cho phần tử HTML sẽ được tạo Animation.

Đánh giá mã

Đây là các tệp mã được thảo luận trong ví dụ transition.

src/app/open-close.component.ts
src/app/open-close.component.html
src/app/open-close.component.css
content_copy@Component({  
  selector: 'app-open-close',  
  animations: [  
    trigger('openClose', [  
      // ...  
      state('open', style({  
        height: '200px',  
        opacity: 1,  
        backgroundColor: 'yellow'  
      })),  
      state('closed', style({  
        height: '100px',  
        opacity: 0.8,  
        backgroundColor: 'blue'  
      })),  
      transition('open => closed', [  
        animate('1s')  
      ]),  
      transition('closed => open', [  
        animate('0.5s')  
      ]),  
    ]),  
  ],  
  templateUrl: 'open-close.component.html',  
  styleUrls: ['open-close.component.css']  
})  
export class OpenCloseComponent {  
  isOpen = true;  
  
  toggle() {  
    this.isOpen = !this.isOpen;  
  }  
}  

Bạn đã học cách thêm Animation vào transition giữa hai trạng thái, sử dụng animate () cũng như style () và state () để định thời gian.

Tìm hiểu thêm về các tính năng nâng cao trong Angular Animation trong phần Animations, bắt đầu với các kỹ thuật nâng cao trong chuyển đổi và trình kích hoạt.

Tóm tắt API hoạt hình

API chức năng được cung cấp bởi mô-đun @anglular/animations cung cấp domain-specific language (DSL) để tạo và điều khiển Animation trong các ứng dụng Angular. Xem tham chiếu API để biết danh sách đầy đủ các chức năng chính và cấu trúc dữ liệu liên quan và chi tiết cú pháp.