Một lựa chọn không tồi cho animation

Đây là thời đại mà khi tạo một site, điều đương nhiên và đầu tiên chúng ta nghĩ đến là có sử dụng animation. Cá nhân mình thấy việc thiết kế nó bằng CSS3 đang ngày càng được ứng dụng rộng rãi hơn là sử dụng những Javascript phức tạp. Và ngày nay để có thể tạo ra những animation theo đúng ý muốn, giảm bớt nhiều thời gian và công sức thì người ta sử dụng Lottie, các nhà phát triển có thể dễ dàng render hình động mà không cần phải viết dòng và dòng mã. Bạn có thể chụp ảnh động từ Adobe After Effects và sử dụng chúng trực tiếp trong dự án Xcode của bạn. Nó thực sự tuyệt vời và giúp bạn tiết kiệm rất nhiều thời gian từ việc triển khai hoạt ảnh.

Trong hướng dẫn này mình sẽ chỉ ra Lottie là gì và làm sao để sử dụng được nó.

Lotie là gì? Lottie là thư viện iOS, macOS, Android và React Native, kết xuất hoạt ảnh After Effects trong bất kỳ ứng dụng gốc nào. Ảnh động được xuất dưới dạng tệp JSON thông qua phần mở rộng After Effects nguồn mở được gọi là Bodymovin . Lottie tải dữ liệu hoạt ảnh ở định dạng JSON và hiển thị hoạt ảnh theo thời gian thực. Trên https://lottiefiles.com/ có rất nhiều animaton đã được tạo ra và công khai trên đó, bạn có thể dowload mà sử dụng miễn phí chúng.

Cách sử dụng Bạn có thể lấy nó về từ đây: https://github.com/airbnb/lottie-web

Input lottie.min.js để sử dụng <script src="lottie.min.js"></script>

Nó cũng xử lý cả npm và bower,nên ở đây mình sử dụng npm. npm install lottie-web

Sau khi đọc file đối tượng, file Json đã đượt xuất từ Adobe After Effects cũng được xử lý và chạy.

let lottieObj = lottie.loadAnimation({
  container: document.getElementById('sample'), 
  renderer: 'svg', 
  loop: true,
  autoplay: true, 
  path: 'data.json' 
});

Thế nào rồi? các bạn đã thấy các hoạt cảnh được lặp lại chưa?

Sử dụng trên Web

Nếu muốn hình ảnh được lặp đi lặp lại thì chỉ cần đến đây là được, nhưng muốn làm nhiều hơn nữa ở thời điểm tùy ý thì bạn làm như sau: Thêm biến số Instance

let lottieObj = lottie.loadAnimation({
  container: document.getElementById('sample'), 
  renderer: 'svg', 
  loop: false, 
  autoplay: false, 
  path: 'data.json' 
});

Và bạn chỉ cần chạy nó ở thời điểm tùy ý là ok Click và phát lại như sau:

document.getElementById('test-link').addEventListener("click" , function(){
   lottieObj.play();
});

Một số hàm mà chúng ta sẽ thường xuyên dùng đến:

lottieObj.stop(); 

lottieObj.setDirection(-1); 
lottieObj.setDirection(0);

lottieObj.destroy();

Chỉ bằng vài bước đơn giản là đã có thể hoàn thành nó rồi đúng không ạ? Thực tế thì file JSON có kích thước khá lớn nên bị phát sinh về vấn đề thời gian. Nếu chạy nhiều thứ một lúc bạn cần để ý đến vấn đề về performance. Vậy nên mặc dù cần điều kiện là người dùng phải biết về After Effects nhưng chỉ cần thế là đã cso thể tạo ra rất nhiều animation phong phú và đặc sắc rồi.

Dịch và tham khảo: https://liginc.co.jp/445055