/Hàm animate trong JQuery API
Các hàm built-in04/10/2023

Hàm animate trong JQuery API

Hàm animate là một trong các hàm hỗ trợ sẵn (built-in fuctions) JQuery API của thư viện jQuery được sử dụng để tạo hiệu ứng chuyển động cho các thuộc tính CSS của các phần tử HTML.

1. Các cú pháp

1.1. Hàm animate(properties[,duration] [,easing] [,complete])

Hàm animate cho phép tạo hiệu ứng chuyển động của các thuộc tính CSS trên các phần tử HTML. Bạn có thể xác định các thuộc tính và giá trị mà animation sẽ di chuyển tới. Thời gian chuyển động, hàm easing, và hàm callback cũng có thể được chỉ định.

Cú pháp:

.animate( properties [, duration ] [, easing ] [, complete ] )

Tham số:

  • properties (Loại: PlainObject): Một đối tượng chứa các thuộc tính CSS và giá trị mà animation sẽ di chuyển tới.
  • duration (Loại: Number hoặc String, mặc định: 400): Số hoặc chuỗi xác định thời gian animation chạy.
  • easing (Loại: String, mặc định: ‘swing’): Chuỗi chỉ định hàm xử lý easing để sử dụng cho chuyển động.
  • complete (Loại: Function, tùy chọn): Một hàm sẽ được gọi khi animation hoàn thành, gọi một lần cho mỗi phần tử phù hợp.

Kết quả trả về:

  • Hàm này không trả về giá trị.

Phiên bản hỗ trợ:

  • Phiên bản được thêm vào: 1.0

1.2. Hàm animate( properties, options )

Hàm animate với tham số tùy chọn (options) của thư viện jQuery được sử dụng để cấu hình các tùy chọn và tham số mở rộng cho hiệu ứng hoạt hình.

1.2.1. Cú pháp

Cú pháp

.animate(properties, options)

Tham số

  • properties (Type: PlainObject): Một đối tượng chứa các thuộc tính CSS và giá trị mà hoạt hình sẽ di chuyển tới.
  • options (Type: PlainObject): Một đối tượng chứa các tùy chọn bổ sung cho phương thức.

Kết quả trả về

  • Hàm này không trả về giá trị.

Phiên bản hỗ trợ

  • Tham số specialEasing được thêm vào phiên bản 1.4 của jQuery.
  • Các tham số progress, complete, start, done, fail, always được thêm vào phiên bản 1.8 của jQuery.

1.2.2. Tham số tùy chọn (options)

  • duration (Type: Number or String, Default: 400): Xác định thời gian hoạt hình sẽ chạy.
  • easing (Type: String, Default: “swing”): Xác định hàm easing để sử dụng cho hoạt hình.
  • queue (Type: Boolean or String, Default: true): Xác định liệu hoạt hình có được đặt vào hàng đợi hiệu ứng hay không.
  • specialEasing (Type: PlainObject): Xác định hàm easing tùy chỉnh cho từng thuộc tính CSS riêng biệt.
  • step (Type: Function): Một hàm được gọi cho mỗi thuộc tính được hoạt hình trên mỗi phần tử hoạt hình.
  • progress (Type: Function): Một hàm được gọi sau mỗi bước của hoạt hình.
  • complete (Type: Function): Một hàm được gọi sau khi hoạt hình hoàn thành trên một phần tử.
  • start (Type: Function): Một hàm được gọi khi hoạt hình bắt đầu trên một phần tử.
  • done (Type: Function): Một hàm được gọi khi hoạt hình hoàn thành trên một phần tử.
  • fail (Type: Function): Một hàm được gọi khi hoạt hình không hoàn thành trên một phần tử.
  • always (Type: Function): Một hàm được gọi khi hoạt hình hoàn thành hoặc dừng mà không hoàn thành trên một phần tử.
Hàm animate trong JQuery API

2. CSS3 Animation

2.1. Thông tin chung về CSS3 Animation

CSS3 Animation là một tính năng trong CSS3 cho phép tạo hiệu ứng hoạt hình và chuyển động trên các phần tử trang web mà không cần sử dụng JavaScript hoặc các công cụ khác. Điều này giúp tạo ra trải nghiệm người dùng tốt hơn, thu hút và tăng tính tương tác của trang web.

Các tính năng chính của CSS3 Animation bao gồm:

  • Tính linh hoạt: Cung cấp khả năng kiểm soát tốc độ, thời gian và hiệu ứng của hoạt ảnh.
  • Chuyển động mịn: Tạo chuyển động mượt mà và tương tự như thực tế.
  • Tự động kết thúc: Điều chỉnh cách hiệu ứng hoạt động khi kết thúc.
  • Tính tương thích: Hoạt ảnh CSS3 hoạt động trên hầu hết các trình duyệt hiện đại.

Việc hỗ trợ CSS3 Animation đã bắt đầu từ những phiên bản trình duyệt khác nhau, với các phiên bản mới hỗ trợ các tính năng mạnh mẽ hơn và tuân thủ nghiêm ngặt hơn với chuẩn CSS3. Dưới đây là một số thông tin về việc hỗ trợ CSS3 Animation từ các trình duyệt chính:

  1. Internet Explorer:
    • IE 10+ hỗ trợ CSS3 Animation.
  2. Mozilla Firefox:
    • Firefox 4+ hỗ trợ CSS3 Animation.
  3. Google Chrome:
    • Chrome 4+ hỗ trợ CSS3 Animation.
  4. Safari:
    • Safari 4+ hỗ trợ CSS3 Animation.
  5. Microsoft Edge:
    • Hỗ trợ CSS3 Animation từ phiên bản đầu tiên.
  6. Opera:
    • Opera 10.5+ hỗ trợ CSS3 Animation.

Tuy nhiên, việc kiểm tra và đảm bảo tính tương thích với trình duyệt cụ thể cần thiết khi triển khai các tính năng CSS3 Animation trong dự án của bạn.

2.2. Cách CSS3 hỗ trợ Animation

CSS3 hỗ trợ hoạt ảnh (Animation) thông qua các quy tắc và thuộc tính CSS, cung cấp khả năng tạo hiệu ứng hoạt ảnh trực tiếp trên các phần tử HTML.

Dưới đây là một tóm tắt về cách CSS3 hỗ trợ hoạt ảnh:

@keyframes:

  • @keyframes là một cú pháp cho phép bạn xác định các trạng thái hoạt ảnh (keyframes) và các quy tắc áp dụng cho mỗi trạng thái.
  • Ví dụ: @keyframes slide-in { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } }

animation thuộc tính:

  • Thuộc tính animation kết hợp với @keyframes để tạo hiệu ứng hoạt ảnh.
  • Ví dụ: .element { animation: slide-in 1s ease-in-out; }

transition thuộc tính:

  • Thuộc tính transition cho phép xác định các hiệu ứng chuyển động mịn hơn khi thay đổi các thuộc tính.
  • Ví dụ: .element { transition: width 0.3s ease-in-out; }

transform thuộc tính:

  • Thuộc tính transform được sử dụng để áp dụng biến đổi (scale, rotate, translate, etc.) lên phần tử.
  • Ví dụ:cssCopy code.element { transform: rotate(45deg); }

transition-timing-function thuộc tính:

  • Xác định cách mà hiệu ứng chuyển động sẽ tiến hành qua thời gian.
  • Ví dụ:.element { transition-timing-function: ease-in-out; }

2.3. Ví dụ dùng CSS3 tạo Animation

Các quy tắc CSS được đặt trong thẻ <style> bên trong phần <head> của tài liệu HTML. Hiệu ứng xoay được áp dụng khi người dùng di chuột qua hình vuông, sử dụng transition và transform trong CSS3.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .square {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: transform 0.3s ease-in-out;
    }

    .square:hover {
      transform: rotate(360deg);
    }
  </style>
  <title>CSS3 Animation Example</title>
</head>
<body>
  <div class="container">
    <div class="square"></div>
  </div>
</body>
</html>

Trong ví dụ này:

  • Chúng tôi có một hình vuông (.square) có kích thước và màu sắc cơ bản.
  • Khi người dùng di chuột qua hình vuông, nó sẽ xoay 360 độ theo chiều kim đồng hồ trong 0,3 giây.
  • Hiệu ứng xoay được thực hiện bằng cách sử dụng transition và transform trong CSS3.

2.4. Hàm animate trong jQuery và CSS3 Animation

Hàm animate trong thư viện jQuery và CSS3 Animation đều hỗ trợ tạo hiệu ứng hoạt hình và chuyển động trên phần tử HTML, nhưng có cách tiếp cận và đặc điểm khác nhau.

Dưới đây là sự giống và khác nhau chính giữa hai phương thức này:

2.4.1. Sự giống nhau

Tạo Hiệu Ứng Hoạt Hình:

  • Cả hàm animate trong jQuery và CSS3 Animation cho phép tạo hiệu ứng chuyển động và hoạt hình trên phần tử HTML.

Làm Mịn Chuyển Động:

  • Cả hai cung cấp khả năng làm mịn chuyển động thông qua các hàm easing (trong jQuery) hoặc thuộc tính ease-in, ease-out (trong CSS3 Animation).

Kiểm Soát Thời Gian:

  • Cả hai cho phép kiểm soát thời gian của hoạt hình và chuyển động.

2.4.2. Sự khác nhau

Cách Tiếp Cận:

  • hàm animatesử dụng JavaScript để điều khiển hoạt ảnh, trong khi CSS3 Animation sử dụng CSS để thiết lập hiệu ứng.

Hiệu Suất và Tương Tác:

  • CSS3 Animation thường mang lại hiệu suất và tương tác tốt hơn do được tối ưu hóa sâu trong trình duyệt. Trong khi đó, jQuery animate() dựa vào JavaScript và có thể gây hiệu suất kém hơn, đặc biệt cho các hoạt ảnh phức tạp.

Tiện Ích:

  • CSS3 Animation phù hợp cho các hiệu ứng cơ bản và mịn hơn, trong khi jQuery animate() hữu ích khi cần kiểm soát hoạt hình một cách linh hoạt và tương tác với các phần tử DOM.

Hỗ Trợ Trình Duyệt:

  • CSS3 Animation được tích hợp sẵn trong các trình duyệt mới và được tối ưu hóa tốt hơn. jQuery animate() cần phụ thuộc vào thư viện jQuery và có thể đòi hỏi nhiều công sức hơn để đảm bảo tính tương thích với các trình duyệt.

2.5. Các đặc điểm hỗ trợ của hàm animate

2.5.1. Quy tắc của thuộc tính và giá trị

Các Thuộc Tính và Giá Trị: Tất cả các thuộc tính cần được hoạt ảnh đều phải được định dạng thành một giá trị số học đơn (numeric value). Có một số ngoại lệ, ví dụ, các thuộc tính không phải số học (non-numeric) không thể được hoạt hình thông qua chức năng cơ bản của jQuery.

Giá Trị Mặc Định: Trong phần lớn các trường hợp, giá trị của các thuộc tính được xem như số lượng pixel, trừ khi có chỉ định khác.

Các Đặc Điểm Không Hỗ Trợ: Các thuộc tính viết tắt (shorthand CSS properties) không được hỗ trợ một cách đầy đủ. Ví dụ, để làm cho viền (border) hiển thị được hoạt hình, cần phải thiết lập trước ít nhất một kiểu viền và chiều rộng viền.

Các Giá Trị Phi Số Học: Có một số giá trị không phải số học (non-numeric) có thể được sử dụng, chẳng hạn 'show', 'hide', và 'toggle', để tạo hiệu ứng hiển thị và ẩn tùy thuộc vào kiểu hiển thị hiện tại của phần tử.

Giá trị của thuộc tính được cung cấp dưới dạng một chuỗi bắt đầu với += hoặc -=. Điều này liên quan đến việc làm cho giá trị của thuộc tính trở nên tương đối (relative) đối với giá trị hiện tại của thuộc tính đó.

Cụ thể:

  • Nếu bạn cung cấp +=X (với X là một số), thì giá trị mục tiêu mới của thuộc tính sẽ được tính bằng cách cộng X vào giá trị hiện tại của thuộc tính.
  • Nếu bạn cung cấp -=X, thì giá trị mục tiêu mới của thuộc tính sẽ được tính bằng cách trừ X từ giá trị hiện tại của thuộc tính.

2.5.2. Thời Gian (Duration)

Thời gian được xác định bằng đơn vị mili giây (milliseconds); giá trị lớn hơn cho thấy hiệu ứng chậm hơn, chứ không phải nhanh hơn. Thời gian mặc định là 400 mili giây. Chuỗi ‘fast’ và ‘slow’ có thể được sử dụng để chỉ định thời gian lần lượt là 200 và 600 mili giây.

2.5.3. Hàm Gọi Lại (Callback Functions)

Nếu được cung cấp, các hàm gọi lại start, step, progress, complete, done, fail, và always sẽ được gọi dựa trên từng phần tử; điều này được thiết lập đối với phần tử DOM đang được thực hiện hoạt hình.

  • Nếu không có phần tử nào trong tập hợp, không có hàm gọi lại nào được kích hoạt.
  • Nếu có nhiều phần tử được hoạt hình, hàm gọi lại được thực thi một lần cho mỗi phần tử khớp, chứ không phải một lần cho toàn bộ hoạt hình.

Sử dụng phương thức .promise() để nhận một đối tượng promise mà bạn có thể gắn các hàm gọi lại, chúng sẽ được kích hoạt một lần cho một tập hợp có hoạt hình, bao gồm cả trường hợp không có phần tử nào.

3. Một số ví dụ

3.1. Hàm animate(properties[,duration] [,easing] [,complete]) với 1 tham số

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ 1</title>
  <style>
    .element {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.element').click(function() {
        $(this).animate({
          width: '200px'
        });
      });
    });
  </script>
</head>
<body>
  <div class="element"></div>
</body>
</html>

Giải thích:

  • Trong ví dụ này, chúng ta sử dụng 1 tham số là một đối tượng chứa các thuộc tính và giá trị mà chúng ta muốn hoạt hóa. Chỉ có thuộc tính width được thay đổi.
  • Khi click vào phần tử, chiều rộng của phần tử có class “element” sẽ được thay đổi thành 200px.

3.2. Hàm animate(properties[,duration] [,easing] [,complete]) với 2 tham số

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ 2</title>
  <style>
    .element {
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.element').click(function() {
        $(this).animate({
          width: '200px'
        }, 1000);
      });
    });
  </script>
</head>
<body>
  <div class="element"></div>
</body>
</html>

Giải thích:

  • Trong ví dụ này, chúng ta sử dụng 2 tham số. Tham số thứ hai là thời gian (duration) trong mili giây, được đặt là 1000 mili giây (tức là 1 giây).
  • Khi click vào phần tử, chiều rộng của phần tử có class “element” sẽ được thay đổi thành 200px trong thời gian 1 giây.

3.3. Hàm animate(properties[,duration] [,easing] [,complete]) với 3 tham số

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ 3</title>
  <style>
    .element {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.element').click(function() {
        $(this).animate({
          width: '200px'
        }, 1000, 'easeInOutQuad');
      });
    });
  </script>
</head>
<body>
  <div class="element"></div>
</body>
</html>

Giải thích:

  • Trong ví dụ này, chúng ta sử dụng 3 tham số. Tham số thứ ba là easing (dễ dàng), trong trường hợp này sử dụng easing ‘easeInOutQuad’.
  • Khi click vào phần tử, chiều rộng của phần tử có class “element” sẽ được thay đổi thành 200px trong thời gian 1 giây, với hiệu ứng easing ‘easeInOutQuad’.

3.4. Hàm animate(properties[,duration] [,easing] [,complete]) với 4 tham số

Dưới đây là ví dụ dùng hàm animate với 4 tham số – Thuộc tính (Properties), Thời gian (Duration), Easing và hàm hoàn thành (Complete Callback)

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ 4</title>
  <style>
    .element {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.element').click(function() {
        $(this).animate({
          width: '200px'
        }, 1000, 'easeInOutQuad', function() {
          alert('Hoàn thành hoạt hình!');
        });
      });
    });
  </script>
</head>
<body>
  <div class="element"></div>
</body>
</html>

Giải thích:

  • Trong ví dụ này, chúng ta sử dụng 4 tham số. Tham số thứ tư là hàm hoàn thành (complete callback).
  • Khi click vào phần tử, chiều rộng của phần tử có class “element” sẽ được thay đổi thành 200px trong thời gian 1 giây, với

3.5. Hàm animate( properties, options ) với duration và complete

Dưới đây hàm animate( properties, options ) sử dung các tham số duration và complete của options,trong đó complete là hàm được gọi sau khi hoạt hình hoàn thành trên một phần tử. Dưới đây là một ví dụ về dùng hàm animate( properties, options ) để di chuyển các hình ảnh

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Trò chơi 6: Di chuyển các hình ảnh</title>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 200px;
      border: 1px solid black;
      margin: 10px auto;
    }
    .image {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.image').click(function() {
        $(this).animate({
          left: '+=50',
          top: '+=50'
        }, {
          duration: 1000,
          complete: function () {
            console.log('Hoàn thành hoạt hình!');
          }
        });
      });
    });
  </script>
</head>
<body>
  <div class="container">
    <div class="image"></div>
  </div>
</body>
</html>

Giải thích:

  • Trò chơi này di chuyển hình ảnh khi được click vào.
  • Sử dụng animate() để thay đổi thuộc tính left và top.
  • Hình ảnh sẽ di chuyển sang phải và xuống dưới mỗi khi click.

3.6. Hàm animate( properties, options) được gọi trong tham số options

Dưới đây là cách sử dụng hàm animate( properties, options ) để tạo trò chơi rung lắc hình ảnh với hàm animate( properties, options) được gọi trong cấu hình complete của tham số options.

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Trò chơi 7: Rung lắc nhiều hình ảnh</title>
  <style>
    .container {
      width: 400px;
      height: 200px;
      border: 1px solid black;
      margin: 10px auto;
    }
    .image {
      width: 50px;
      height: 50px;
      background-color: green;
      display: inline-block;
      margin: 10px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.image').click(function() {
        $(this).animate({
          marginLeft: '+=10',
          marginRight: '+=10'
        }, {
          duration: 100,
          complete: function () {
            $(this).animate({
              marginLeft: '-=10',
              marginRight: '-=10'
            }, {
              duration: 100,
              complete: function () {
                console.log('Hoàn thành hoạt hình!');
              }
            });
          }
        });
      });
    });
  </script>
</head>
<body>
  <div class="container">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
  </div>
</body>
</html>

Giải thích:

  • Trò chơi này làm hình ảnh rung lắc khi được click vào.
  • Sử dụng animate() để thay đổi thuộc tính marginLeft và marginRight.
  • Hình ảnh sẽ chuyển động lên và xuống khi click.

3.7. Hàm animate( properties, options) để điều khiển đối tượng bằng phím

Dưới đây là một ví dụ dùng hàm animate( properties, options) tạo một thẻ div di chuyển liên tục từ bên trái sang bên phải màn hình và có khả năng di chuyển lên và xuống khi nhấn mũi tên lên và mũi tên xuống:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Div Di Chuyển</title>
  <style>
    #box {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      let positionX = 0; // Vị trí ban đầu của hộp
      let positionY = window.innerHeight / 2; // Vị trí y ban đầu ở giữa màn hình
      const box = $('#box');

      // Hàm di chuyển hộp sang phải
      function moveRight() {
        positionX += 10;
        box.animate({ left: positionX }, 100);
      }

      // Hàm di chuyển hộp sang trái
      function moveLeft() {
        positionX -= 10;
        box.animate({ left: positionX }, 100);
      }

      // Hàm di chuyển hộp lên
      function moveUp() {
        positionY -= 10;
        box.animate({ top: positionY }, 100);
      }

      // Hàm di chuyển hộp xuống
      function moveDown() {
        positionY += 10;
        box.animate({ top: positionY }, 100);
      }

      // Bắt sự kiện khi nhấn mũi tên lên
      $(document).keydown(function(e) {
        if (e.keyCode == 38) { // Mũi tên lên
          moveUp();
        }
      });

      // Bắt sự kiện khi nhấn mũi tên xuống
      $(document).keydown(function(e) {
        if (e.keyCode == 40) { // Mũi tên xuống
          moveDown();
        }
      });

      // Hàm di chuyển liên tục từ bên trái sang bên phải màn hình
      function moveContinuous() {
        positionX += 2;
        if (positionX > window.innerWidth) {
          positionX = 0;
        }
        box.css('left', positionX);
        requestAnimationFrame(moveContinuous);
      }

      // Gọi hàm di chuyển liên tục
      moveContinuous();
    });
  </script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

Giải thích:

  • Thẻ div sẽ di chuyển liên tục từ bên trái sang bên phải màn hình dựa trên kỹ thuật requestAnimationFrame().
  • Bằng cách nhấn mũi tên lên và mũi tên xuống, người dùng có thể điều khiển thẻ div di chuyển lên hoặc xuống.
  • Đã thêm thuộc tính transform: translateY(-50%) vào CSS để đặt vị trí y ban đầu ở giữa màn hình.

3.8. Hàm animate( properties, options) để tạo trò chơi Flappy Bird

Dưới đây là ví dụ sử dụng hàm animate( properties, options) để tạo trò chơi Flappy Bird đơn giản bằng cách tạo ra một con chim là thẻ div mày đỏ liên tục từ bên trái sang bên phải và thêm các đối tượng cản trở xuất hiện ngẫu nhiên.

Người dùng điều khiển chim bằng 2 phím mũi tên lên/xuống, hãy xem ví dụ dưới đây:

<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird Game</title>
  <style>
    body {
      overflow: hidden;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    #gameCanvas {
      width: 100%;
      height: 100vh;
      position: relative;
    }

    .bird {
      width: 40px;
      height: 40px;
      background-color: red;
      position: absolute;
      left: 50px;
    }

    .obstacle {
      width: 20px;
      height: 100px;
      background-color: green;
      position: absolute;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="gameCanvas">
    <div class="bird"></div>
  </div>

  <script>
const canvasWidth = $('#gameCanvas').width();
const canvasHeight = $('#gameCanvas').height();
let birdY = canvasHeight / 2 - 20;
let gameInterval;
let isGameOver = false;

function drawBird() {
  $('.bird').css('top', birdY);
}

function createObstacle() {
  const obstacleHeight = Math.random() * (canvasHeight - 100); // Random obstacle height
  const obstacle = $('<div class="obstacle"></div>');
  obstacle.css({ left: '100%', height: obstacleHeight });
  $('#gameCanvas').append(obstacle);

  obstacle.animate({ left: '-20px' }, 3000, 'linear', function() {
    obstacle.remove();
  });
}

function handleCollision() {
  if (birdY < 0 || birdY > canvasHeight - 40) {
    gameOver();
  }

  const bird = $('.bird')[0];
  const obstacles = $('.obstacle');
  for (let i = 0; i < obstacles.length; i++) {
    const obstacle = obstacles[i];
    if (isColliding(bird, obstacle)) {
      gameOver();
      break;
    }
  }
}

function isColliding(bird, obstacle) {
  const birdRect = bird.getBoundingClientRect();
  const obstacleRect = obstacle.getBoundingClientRect();
  return !(
    birdRect.top > obstacleRect.bottom ||
    birdRect.right < obstacleRect.left ||
    birdRect.bottom < obstacleRect.top ||
    birdRect.left > obstacleRect.right
  );
}

function gameOver() {
  isGameOver = true;
  clearInterval(gameInterval);
  alert('Game over! You hit an obstacle.');
}

$(document).ready(function() {
  gameInterval = setInterval(function() {
    if (!isGameOver) {
      birdY += 2; // Bird falls down by 2 pixels/frame, adjust as needed
      drawBird();
      handleCollision();
    }
  }, 30);

  // Create obstacles at regular intervals
  setInterval(createObstacle, 2000);

  // Handle key presses
  $(document).keydown(function(e) {
    if (e.keyCode === 38) { // Up arrow key
      birdY -= 40; // Move bird up by 40 pixels
    } else if (e.keyCode === 40) { // Down arrow key
      birdY += 40; // Move bird down by 40 pixels
    }
  });
});

  </script>
</body>
</html>

Trong ví dụ này, chim di chuyển lên và xuống khi người dùng nhấn mũi tên lên và mũi tên xuống. Đồng thời, mỗi 2 giây sẽ tạo một đối tượng cản trở di chuyển từ bên phải sang bên trái.

Nếu chim va chạm với đối tượng cản trở, trò chơi kết thúc và hiển thị thông báo. Lưu ý rằng đây chỉ là một phiên bản đơn giản và bạn có thể mở rộng và tùy chỉnh theo ý muốn.

3.9. Hàm animate( properties, options) với Easing và specialEasing

Cả hai cấu hình easing và specialEasing trong tham số options của hàm animate của thư viện jQuery liên quan đến cách hoạt động của hiệu ứng hoạt hình

Easing: Tham số easing trong phương thức .animate() xác định cách hiệu ứng hoạt hình sẽ thay đổi theo thời gian. Nó là một hàm hoặc chuỗi xác định cách giá trị nên thay đổi theo thời gian, tạo ra hiệu ứng chuyển động mượt mà.

Có một số easing functions có sẵn như "linear", "swing" (mặc định), "easeIn", "easeOut", "easeInOut", và nhiều hơn nữa. Bạn cũng có thể tự định nghĩa easing function tùy chỉnh.

SpecialEasing: Tham số specialEasing trong phương thức .animate() cho phép bạn xác định các easing functions riêng cho từng thuộc tính của hiệu ứng.

Bạn có thể cung cấp một đối tượng với các thuộc tính là tên của thuộc tính và giá trị easing function tương ứng cho từng thuộc tính.

Dưới đây là một ví dụ chỉnh sửa để sử dụng các easing function tùy chỉnh:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Per-property Easing Example without External Library</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      margin-top: 20px;
      position: relative;
    }

    #box1 {
      background-color: blue;
    }

    #box2 {
      background-color: red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // Custom easing functions
    jQuery.easing['customEaseInCubic'] = function (x, t, b, c, d) {
      return c*(t/=d)*t*t + b;
    };

    jQuery.easing['customEaseOutBounce'] = function (x, t, b, c, d) {
      if ((t/=d) < (1/2.75)) {
        return c*(7.5625*t*t) + b;
      } else if (t < (2/2.75)) {
        return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
      } else if (t < (2.5/2.75)) {
        return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
      } else {
        return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
      }
    };

    $(document).ready(function() {
      // Easing function applied to all properties for box1
      $('#box1').animate({
        width: '200px',
        height: '200px',
        opacity: 0.5
      }, {
        duration: 1000,
        easing: 'customEaseOutBounce' //  Dùng tham số easing với hàm tự định nghĩa
      });

      // Per-property easing functions for box2
      $('#box2').animate({
        width: '200px',
        height: '200px',
        opacity: 0.5
      }, {
        duration: 1000,
        // Easing functions for each property
        specialEasing: {
          width: 'linear', // Linear easing for width
          height: 'customEaseOutBounce', // Custom easing for height
          opacity: 'customEaseInCubic' // Custom easing for opacity
        }
      });
    });
  </script>
</head>
<body>
  <div id="box1" class="box"></div>
  <div id="box2" class="box" style="margin-top: 150px;"></div>
</body>
</html>

Trong ví dụ này, chúng ta đã tự định nghĩa các easing function tùy chỉnh và sử dụng chúng cho width, height, và opacity thông qua specialEasing.

3.10. Hàm animate( properties, options) được gọi liên tiếp nhiều lần

Bạn có khả năng tắt toàn bộ các hiệu ứng hoạt ảnh do hàm animate tạo ra của thư viện jQuery thông qua việc đặt jQuery.fx.off = true.

Khi jQuery.fx.off được thiết lập thành true, thì mọi hiệu ứng của jQuery sẽ không hoạt động và thời gian thực hiện (duration) sẽ là 0.

Dưới đây là ví dụ đã cho phép bạn tùy chọn thiết lập để xem sự tác động của jQuery.fx.off

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Chained Animations without jQuery UI</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 20px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
	  
	  // Trạng thái ban đầu của đối tượng div
	   var originalState = {
        width: '100px',
        height: '100px',
        backgroundColor: 'blue',
		margin: '20px'
      };
	  
      // Custom easing functions for color transitions
      $.easing.customEaseIn = function (x, t, b, c, d) {
        return c * (t /= d) * t + b;
      };

      $.easing.customEaseOut = function (x, t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b;
      };

      $('#toggleEffects').change(function() {
        if (this.checked) {
          jQuery.fx.off = true;  // Turn off jQuery effects globally
        } else {
          jQuery.fx.off = false;  // Turn on jQuery effects globally
        }
      });

      $('#animateButton').click(function() {
        var box = $('#box');

        box.animate({
          width: '200px',
          height: '200px'
        }, {
          duration: 1000,
          step: function (now, fx) {
            var colorValue = Math.round(now);
            box.css('backgroundColor', 'rgb(' + colorValue + ', 0, 0)');
          }
        }).animate({
          width: '100px',
          height: '100px'
        }, {
          duration: 2000,
          step: function (now, fx) {
            var colorValue = Math.round(255 - now);
            box.css('backgroundColor', 'rgb(0, ' + colorValue + ', 0)');
          }
        }).animate({
          width: '150px',
          height: '150px'
        }, {
          duration: 3000,
          step: function (now, fx) {
            var colorValue = Math.round(now);
            box.css('backgroundColor', 'rgb(0, 0, ' + colorValue + ')');
          },
          complete: function() {
		    
			// lấy lại trạng thái ban đầu
			$(this).css(originalState);
          }
        });
      });
    });
  </script>
</head>
<body>
  <div>
    <h4>Hãy thay đổi checkbox để xem việc bật tắt hiệu cứng của jQuery.fx.off</h4>
    <input type="checkbox" id="toggleEffects" /> Toggle jQuery.fx.off
  </div>
  <div id="box" class="box"></div>
  <button id="animateButton">Animate</button>
</body>
</html>

Trong ví dụ này, chúng ta đã thêm một checkbox để cho phép người dùng chọn có tắt hiệu ứng jQuery (jQuery.fx.off = true) hoặc không. Nếu checkbox được chọn, hiệu ứng sẽ bị tắt. Có một nút “Animate” để khởi động các hiệu ứng khi được nhấp.

Related posts