+20

Cách tạo ảnh giống gif bằng javascript không phải ai cũng biết

Chào mọi người, hôm nay mình sẽ giới thiệu với các bạn 1 thủ thuật nho nhỏ bằng javascript làm sao ra được ảnh động giống như em Usagyuuun tăng động xoay xoay như thế kia. Cái gì cũng vậy, mình sẽ đi vào vấn đề mình đã gặp

Vấn đề

Mình thấy thích usagyuuun tăng động này làm ảnh gif loading giống trên facebook nhưng quay đi quẩn lại usagyuuun này trên giphy, tenor... tìm mọt gông không thấy nó đâu. Câu hỏi đặt ra: Tại sao facebook có ảnh gif như thế này hay vậy ? Dân coder như mình sẽ mày mò và chỉ cần ấn F12 mọi chuyện sẽ sáng tỏ.

Quá trình sau khi ấn F12 của mình

Mình chọn vùng thẻ div có chứa em tăng động này xuất hiện thì có 1 background với url chưa hình định dạng png.

Suy đoán

Tức là họ đã code một cách some how nào đó để tạo ra được hình ảnh như kiểu gif thế kia, họ đã ghép từ các hình trên ảnh png gốc sau đó cho chuyển qua chuyển lại tuần tự với bao nhiêu mili giây.

Cách giải quyết

Như trên facebook họ đã giải quyết bằng css background-image và sử dụng code js để thay đổi background-position với tầm khoảng 200ms. Đó là 1 hướng đi hay mọi người có thể tham khảo.

Cách giải quyết khác chỉ bằng html và javascript và có thể hơn thế nữa

Giả dụ bạn muốn xoay xoay thế kia và cộng thêm nó nhảy từ trên xuống dưới, vừa xoay vừa nhảy thì cách trên nếu làm được chắc rất khó 😅

Với cách này chúng ta có thể hoàn toàn làm được điều đó sau khi đọc hết bài viết của mình 😃))

Trước tiên, chúng ta cùng tìm hiểu qua canvas của HTML5. Chúng ta quan tâm tới drawImage dùng để hiển thị hoặc vẽ hình trên canvas. drawImage chấp nhận 9 tham số truyền vào

(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Ý nghĩa của từng tham số tham khảo thêm tại: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

Làm luôn cho nóng

ở file .html Chúng ta chỉ cần

<canvas id="canvas" width="500px" height="500px"></canvas>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
      img.src = './usagyuun.png';
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
      };

Kết quả:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Usagyun variables
const USAGYUN_WIDTH = 79;
const USAGYUN_HEIGHT = 80;
const usagyuun = new Image();
usagyuun.src = './usagyuun.png';
usagyuun.onload = () => {
ctx.drawImage(
    // Image
    usagyuun,
    // ---- Selection ----
    0, // sx
    USAGYUN_HEIGHT * 2, // sy
    USAGYUN_WIDTH, // sWidth
    USAGYUN_HEIGHT, // sHeight
    // ---- Drawing ----
    0, // dx
    0, // dy
    USAGYUN_WIDTH, // dWidth
    USAGYUN_HEIGHT // dHeight
  );
};

Kết quả: Phần USAGYUN_HEIGHT * 2 đây là lấy position: left = 0 và top = 160px và nó ra hình dưới đây

tại sao lại là 79px và 80px, mình có làm 1 số magic đo đạc các khoảng cách các usagyuuun trên các hình.

Bây giờ chúng ta sử dụng chút magic của requestAnimationFrame

Talk is cheap show me the code

Kết luận

Các bạn có thể đọc tại đây hoặc tại đây để hiểu rõ hơn hoặc có thể trở thành master animation js

facebook: https://www.facebook.com/quanghung997


All rights reserved

Bình luận

Đăng nhập để bình luận
Avatar
@QuangPH
thg 9 9, 2019 3:52 SA

Cũng hay 😃) 😃) 😃)

Avatar
@quanghung97
thg 9 9, 2019 3:57 SA

cảm ơn anh đã theo dõi 😃

Avatar

hay quá

Avatar
@quanghung97
thg 9 9, 2019 3:58 SA

cảm ơn bạn 😃

Avatar

😃)) ý bảo con thỏ ấy 61280879_2303045613278707_6262650302885789696_n.jpg

Avatar
@quanghung97
thg 9 9, 2019 3:59 SA

tấu hài coding 😂

Avatar
@Plumpboy
thg 9 9, 2019 3:55 SA

Cái này gọi là Sprite animation.

Avatar
@quanghung97
thg 9 9, 2019 3:59 SA

mình cũng chăng phải dân chuyên về cái này cho lắm, cảm ơn đã chia sẻ

Avatar
@chinn
thg 9 9, 2019 4:19 SA

nice 😃)

Avatar

thú vị nhỉ

Avatar
@quanghung97
thg 9 9, 2019 6:34 SA

😃)) u8kl9gr9gbk31.png

Avatar
@Jesse
thg 9 11, 2019 2:57 SA
Avatar
@quanghung97
thg 9 11, 2019 3:49 SA

nice bro, Css3 awesome👍👍👍

Avatar
+20
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí