Làm hiệu ứng búng tay bay màu THANOS bằng Javascript

13284
làm hiệu ứng búng tay Thanos

Trước ngày ra mắt ENDGAME không lâu, mình phát hiện Google có bí mật làm một chức năng hết sức thú vị, làm hiệu ứng búng tay Thanos như trong Infinity War và xoá sổ 50% số kết quả tìm thấy.

Mình thấy khá thú vị với trò đó của Google, vậy là cũng thử tìm tòi xem làm 1 cái tương tự. Nhưng lần này, Thanos đã là chuyện cũ rồi, nếu ai đã xem phần 4 rồi đều biết, cuối phim Iron-Man sẽ là người búng tay, cái búng tay không chỉ thổi bay Thanos cùng quân đoàn của hắn mà còn lấy đi cả mạng sống của Tony. Hôm nay mình xin được tái hiện lại kết quả của trận chiến trong Hồi Kết vừa ra mắt ngày 26 tháng 4 vừa qua bằng lập trình Javascript.

Đây là demo của mình LIVE DEMOhttps://trandaison.github.io/

Concept

Nếu inspect code của Google ra xem bạn sẽ dễ dàng nhận thấy Google chuyển đổi các HTML element sang Canvas, tạo ra nhiều lớp canvas chồng lên nhau, cách lớp canvas này sẽ chứa 1 vài phần nhỏ của hình gốc, sau đó kết hợp giữa hiệu ứng xoay (rorate) và transform vị trí cho đến khi chúng bị mờ đi đến mức 0.

Vậy chúng ta cũng sẽ làm với ý tưởng tương tự.

Step 1: Convert HTML Element sang Canvas

Hên là đã có một thư viện hơn 16k sao cho phép làm điều này html2canvas. Bây giờ chỉ cần dựng HTML lên để có được không gian của bãi chiến trường. Trong End Game Tony mang bộ mark 85 bạn nhớ tìm hình cho giống nhé.

Xem thêm thư viện Javascript phổ biến.

Còn đây là the battle field của mình

Với html2canvas bạn chỉ cần pass element cần chuyển vào trong hàm, hàm sẽ return về một promise với đối số là canvas được tạo.

NOTE: Bạn lưu ý element truyền vào phải là HTML element khác thẻ img nhé.

  JavaScript Tip: Đặt tên function để debugging một cách dễ dàng hơn

Step 2: Tạo ra các lớp canvas

Sau bước một chúng ta đã có một mảng các pixel của hình ảnh. Việc còn lại chỉ đơn giản là phân số lượng pixel đó vào vài canvas khác nhau là xong.

Tuy nhiên để cho đẹp và hiệu ứng trông sẽ thật hơn nếu bạn làm nó “bay màu” từ đầu xuống chân, hoặc từ chân lên đầu, thay vì tan biến 1 cách ngẫu nhiên ko có tôn ti trật tự.

Nghĩa là chúng ta không thể chỉ đơn giản quất hàm Math.random được. Cần phải đánh trọng số cho việc phân tán các điểm ảnh.

Về cơ bản thì chúng ta sẽ tăng xác suất xuất hiện các điểm ảnh nằm ở phần đầu vào các canvases nằm trên. Tăng xác suất xuất hiện của các điểm ảnh ở phần thân vào các canvases nằm giữa, và tương tự cho phần chân.

Đồ thị biểu diễn nó đại khái như này

Để làm được điều này thì cũng đã có 1 thư viện hỗ trợ – chance.js. Bạn xem thêm docs của nó nếu có hứng thú nhé, docs cũng dài với nhiều phết đấy.

Đây là hàm trả về mảng các điểm ảnh sau khi đã đánh trọng số.

Tiếp theo là tạo ra các lớp canvas cho Thanos từ mảng trên rồi append vào document (nhớ là chồng lên cái ảnh gốc để ko bị lộ, position: absolute; các thứ vào nhé)

Đây là các lớp canvas theo thứ tự sau khi được tạo ra

  FabricJS (Canvas library) và xây dựng tool chế ảnh - thư viện Javascript

Step 3: Animation

Bước này chỉ cần thêm tí animation cho nó chuyển động các lớp canvas hạt bụi trên kia, như kiểu đang hấp hối bay màu.

Lúc này bạn cần ẩn ảnh gốc đi nhé.

Sau đó lặp từng cái canvas, lần lượt thêm vào 3 animations:

  • Blur: Có blur vào mới tạo ra được sự mượt mà khi chuyển động, để chuyển động ko bị “cứng”.
  • Transform: Transform cả vị trí lẫn xoay ảnh, để đẩy các điểm ảnh ra xa dần.
  • Fade out: Cho điểm ảnh mờ dần đến 0.

jQuery không hỗ trợ hiệu ứng blur, check phần final code mình đính kèm nếu bạn có hứng thú nhé. Xem thêm jQuery là gì?

Nhớ rằng class dust là lớp ảnh chứa các điểm ảnh dùng cho bay màu, phải đặt chồng lên nhau nhé.

Lời kết

Final source code mình đặt ở đây, mình thực hiện trên VueJS, nên nếu bạn có ý định chạy thử thì vào fork repo này về https://github.com/trandaison/fingerSnap

  • Chạy yarn install để cài các package.
  • Chạy yarn serve để chạy server node và vào localhost:8080 để xem.

Một số điểm mong các bạn lưu ý nếu có đọc qua source code.

  • Một số code đã được thay đổi cho phù hợp với cái demo của mình.
  • Code js và css mình cũng làm vội cho có chứ đang lởm lắm, các bạn đừng để bụng.

Tham khảo từ tutorial tại: https://www.youtube.com/watch?v=fM791m4A_Pk

Xem thêm việc làm Javascript Developer mới nhất trên TopDev

TopDev via viblo

  Twitter đã deploy widgets JavaScript của họ như thế nào
  Tìm hiểu về bất đồng bộ trong JavaScript

Hơn 100 Speakers tại Vietnam Mobile Day 2019 sẽ mang đến cộng đồng Tech-lovers những kiến thức không thể tìm kiếm trên sách vở!! Tháng 6 này bạn có hẹn với chúng tôi TẠI ĐÂY!

ĐỘC GIẢ TOPDEV BLOG ĐĂNG KÝ VÉ VỚI MÃ CODE TOPDEVBLOG@VMD19
ƯU ĐÃI GIẢM 30% GIÁ VÉ

SHARE