TẠO ẢNH GIF “HAY HO” BẰNG JAVASCRIPT

Chào các bạn, hôm nay mình sẽ chia sẻ cùng các bạn một thủ thuật nho nhỏ để tạo nên ảnh gif siêu ngộ nghĩnh, siêu đáng yêu như thế này nhé

Ảnh minh họa

Đặt vấn đề: trên nhiều trang web, ứng dụng hiện nay xuất hiện rất nhiều các ảnh gif phổ biến và rất được ưa chuộng sử dụng, thật vậy tự hỏi người ta đã làm như thế nào để tạo ra được những ảnh gif ngộ nghĩnh như thế :v
Thật sự tò mò đúng không nào!!!

Đề xuất cách giải quyết: và thât nóng lòng đúng không nào, chúng mình cùng đề xuất cách giải quyết nhé
– Cách 1: sử dụng CSS background-image và Code JavaScript để thay đổi background-position với tầm khoảng 200-300ms
Đây là 1 cách khá dễ thực hiện, dễ hiểu và dễ nhớ để thực hành, các bạn có thể thử ngay cho nóng nhé 😀
– Cách 2: Đối với các ảnh gif phức tạp, nhiều chuyển động thì cách trên là hơi khó khăn đúng không nào, vậy có cách nào hay hơn chăng, đi thẳng vào vấn đề nhé 😀
Trước tiên chúng ta cần tìm hiểu qua CANVAS của HTML5 chúng ta quan tâm đến phương thức drawImage() dùng để hiển thị hoặc vẽ hình trên CANVAS, phương thức drawImage() chấp nhận 9 tham số truyền vào:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Các bạn có thể tham khảo ý nghĩa của từng tham số tại link sau:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

Demo luôn cho nóng nhỉ
Chúng ta cùng demo em “usagyuuun” tăng động này nhé

usagyuuun

Đầu tiên chúng ta tạo 1 file HTML và 1 file JS, trong các file này chúng ta chỉ cần thêm:

Và đây là kết quả

Chúng ta có thể vẽ từng chuyển động cho gif, ta có ví dụ sau

kết quả sẽ là như này

Bây giờ chúng ta sẽ sử dụng 1 chút về requestAnimationFrame để tạo gif như sau:

(function () {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  const USAGYUN_WIDTH = 79;  // chiều rộng gif
  const USAGYUN_HEIGHT = 80; // chiều cao gif

  const usagyuun = new Image();
  usagyuun.src = 'https://scontent.fhan2-1.fna.fbcdn.net/v/t39.1997- 
  6/s851x315/56348823_2379835892041148_1253302075794653184_n.png? 
  _nc_cat=106&_nc_oc=AQnTtRi40UFTIK6NNdS9Ar-g05YJGfwS0XK8z5Ghwjag7P- 
  ktmfpf_NtKoR-caM-uWA&_nc_ht=scontent.fhan2- 
  1.fna&oh=b43a798e53eeb8b05b4acf08c3233517&oe=5DFF706C';  // url ảnh
  usagyuun.onload = () => {
    ctx.drawImage(
      usagyuun,
      0,
      USAGYUN_HEIGHT * 2,
      USAGYUN_WIDTH,
      USAGYUN_HEIGHT,
      0,
      0,
      USAGYUN_WIDTH,
      USAGYUN_HEIGHT
    );
  };

  let currentFrame = 0;

  const update = () => {
    ctx.clearRect(0, 0, 80, 79);
    ctx.drawImage(
      usagyuun,
      (USAGYUN_WIDTH * (Math.floor(currentFrame) % 8)),
      USAGYUN_HEIGHT * 2,
      USAGYUN_WIDTH,
      USAGYUN_HEIGHT,       
      0,
      0,
      USAGYUN_WIDTH,
      USAGYUN_HEIGHT
    );

    currentFrame += 0.2;
    requestAnimationFrame(update);
  };
  update();
})();

Kết quả

Thật thú vị đúng không nào 😀
Các bạn cũng hãy thử tự tạo cho mình một chú gif thật đáng yêu theo ý thích của mình nhé, từ chính ảnh của bạn hoặc bất kì ảnh nào mà bạn muốn…
Ngại ngần gì mà không thử 😀 chúc các bạn sẽ được “sướng” từ “chiến tích nhỏ” mà mình tạo ra nhé!!!

Lời kết: Cám ơn mọi người đã theo dõi bài viết, tạm biệt và không quên gặp lại trong những chia sẻ tiếp theo của mình nhé <3

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *