Dạo gần đây khi rộ lên phong trào comment BFF trên facebook xem tài khoản có bị hack không. Cách này thì chắc chắc không thể dùng để kiểm tra bảo mật rồi. Tuy nhiên, hiệu ứng này cũng thú vị phết, áp dụng được vào mấy dự án frontend thì rất cool. ?
Trong bài viết này, mình sẽ hướng dẫn các tạo các hiệu ứng chuyển động (animation) một cách cực kì đơn giản cho các ứng dụng web.

Phân tích vấn đề:

Để có thể tạo được chức năng hiện hiệu ứng animation sau khi comment thì ở phía backend phải có một bước xử lí để tìm từ khóa trong câu. Sau đó trả kết quả về phía frontend để hiện hiệu ứng chuyển động.
Trong bài viết này mình chỉ hướng dẫn cách hiện các animation thôi nhé.

Áp dụng:

Cách làm truyền thống nhất mà ta có thể nghĩ đến đó là dùng ảnh GIF. Ví dụ, ở file HTML chỉ cần đơn giản là dùng thẻ img:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<img src="https://media.giphy.com/media/l0GRk3KHYv2W6hmJG/giphy.gif" />
</body>
</html>

Cách thứ 2 là dùng tập tin json để hiện các animation. Dùng tập tin json à, really? ?

Để có thể tạo animation từ các file json, ta sử dụng một thư viện có tên là lottie-web. Thư viện này hỗ trợ chạy các hiệu ứng  được tạo ra từ phần mềm Adobe After Effect, các file này sẽ ở định dạng json.

Ta có thể cài đặt thư viện này bằng lệnh:

npm install --save lottie-web

Sau khi cài đặt, cách import thư viện sẽ phụ thuộc vào từng loại dự án ( JS thuần, Angular hoặc ReactJS).

Mình sẽ ví dụ các sử dụng thư viện này với dự án Angular.

Áp dụng thư viện lottie-web vào project Angular:

Rất may là đã có thư viện hỗ trợ áp dụng lottie cho project Angular, chúng ta không cần phải import thủ công thư viện vào project nữa. Thư viện này có tên là ng-lottie

Bước 1: Tạo project Angular:

Cách đơn giản nhất để tạo project Angular là sử dụng angular-cli.  Nếu bạn nào chưa cài angular-cli thì dùng các lệnh sau để cài đặt nhé.

Cài đặt angular-cli ở global:

npm install -g angular-cli

Tạo project angular có tên là lottie-web-demo:

ng new lottie-web-demo

Chuyển vào thư mục vừa tạo và khởi động project:

cd lottie-web-demo
ng serve

Bước 2: Cài thư viện ng-lottie:

npm install --save ng-lottie

Import thư viện vào App Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LottieAnimationViewModule } from 'ng-lottie';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LottieAnimationViewModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Bước 3: Tạo hoặc tìm các file json của Lottie

Để tạo các file json của Lottie bạn có thể sử dụng phần mềm Adobe After Effect. Còn nếu bạn không biết cách tạo thì rất may bạn có thể tải về từ trang lottiefiles.com ?

Sau khi tải xong, bạn cho file này vào thư mục src/assets. Trong Angular thì tất cả các file như hình ảnh, âm thanh, video đều phải cho vào thư mục assets thì mới dùng được.

Bước 4: Sử dụng component lottie-animation-view

Ta có thể chỉnh sửa lại file app.component.html như sau:

<lottie-animation-view [options]="lottieConfig" [width]="300" [height]="300" (animCreated)="handleAnimation($event)">
</lottie-animation-view>
<div id="player">
  <p>Speed: x{{animationSpeed}}</p>
  <div class="range-container">
    <input #range type="range" value="1" min="0" max="3" step="0.5" (change)="setSpeed(range.value)">
  </div>
  <button (click)="stop()">stop</button>
  <button (click)="pause()">pause</button>
  <button (click)="play()">play</button>
</div>

Khai báo các biến trong app.component.ts như sau:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public lottieConfig: Object;
  private anim: any;
  private animationSpeed: number = 1;

  constructor() {
      this.lottieConfig = {
          path: 'assets/firework.json',
          autoplay: true,
          loop: true
      };
  }

  handleAnimation(anim: any) {
      this.anim = anim;
  }

  stop() {
      this.anim.stop();
  }

  play() {
      this.anim.play();
  }

  pause() {
      this.anim.pause();
  }

  setSpeed(speed: number) {
      this.animationSpeed = speed;
      this.anim.setSpeed(speed);
  }
}

Trong biến lotiteConfig, nhớ sửa lại path tướng ứng với tập tin json mà bạn đã tải về, ở đây file json của mình tên là firework.json.

Ta có thể cấu hình các thông số như: autoplay (tự động chạy) hoặc loop (có lặp lại hay không) cho animation của mình. Ngoài ra, ta còn có các hàm để play hoặc stop animation. Nếu như sử dụng ảnh GIF sẻ khó lòng mà thực hiện được. Quá tuyệt cho Lottie. ?

Thành quả:

Toàn bộ source code có thể tham khảo tại repository của mình.

Kết:

Việc sử dụng Lottie để load animation có cái lợi hơn so với dùng ảnh GIF là chúng ta có thể cấu hình các thông số và có các hàm để tương tác với animation của mình.


Nhận thấy các bài viết tiếng Việt chuyên về lập trình blockchain còn ít nên tôi quyết định chuyển hướng sang chuyên viết về chủ đề blockchain dành riêng cho lập trình viên. Hi vọng những bài viết này sẽ giúp ích cho các bạn đang muốn theo đuổi lĩnh vực còn khá mới này.

Nếu bạn thấy bài viết hữu ích, bạn có thể ủng hộ tôi vài tách cà phê thông qua MoMo tại đây

Bạn cũng có thể nhờ tôi tư vấn về giải pháp công nghệ thông tin nói chung và blockchain nói riêng (có tính phí) thông qua đây