Cách làm hộp phát triển trong JavaScript

Ví dụ: di chuyển dọc theo một đường dẫn phức tạp, với chức năng định thời gian khác với các đường cong Bezier hoặc hoạt ảnh trên khung vẽ

Sử dụng setInterval

Hoạt ảnh có thể được triển khai dưới dạng một chuỗi các khung – thường là những thay đổi nhỏ đối với thuộc tính HTML/CSS

Chẳng hạn, thay đổi

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

1 từ

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

2 thành

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

3 sẽ di chuyển phần tử. Và nếu chúng ta tăng nó trong

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

4, thay đổi bằng

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

5 với độ trễ nhỏ, chẳng hạn như 50 lần mỗi giây, thì nó sẽ trông mượt mà. Đó là nguyên tắc giống như trong rạp chiếu phim. 24 khung hình mỗi giây là đủ để làm cho nó trông mượt mà

Mã giả có thể trông như thế này

let timer = setInterval(function() {
  if (animation complete) clearInterval(timer);
  else increase style.left by 2px
}, 20); // change by 2px every 20ms, about 50 frames per second

Ví dụ đầy đủ hơn về hoạt hình

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

Nhấp để xem bản trình diễn

Kết quả

mục lục. html

Sử dụng requestAnimationFrame

Hãy tưởng tượng chúng ta có một số hoạt ảnh chạy đồng thời

Nếu chúng ta chạy chúng một cách riêng biệt, thì mặc dù mỗi cái có

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

6, nhưng trình duyệt sẽ phải sơn lại thường xuyên hơn nhiều so với mỗi

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

7

Đó là bởi vì chúng có thời gian bắt đầu khác nhau, vì vậy "cứ sau 20 mili giây" lại khác nhau giữa các hoạt ảnh khác nhau. Các khoảng không được căn chỉnh. Vì vậy, chúng tôi sẽ có một số hoạt động độc lập trong vòng

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

7

Nói cách khác, điều này

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

…Nhẹ hơn ba cuộc gọi độc lập

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

2

Một số bản vẽ lại độc lập này nên được nhóm lại với nhau để giúp trình duyệt vẽ lại dễ dàng hơn và do đó tải ít tải CPU hơn và trông mượt mà hơn

Có một điều nữa cần ghi nhớ. Đôi khi CPU bị quá tải hoặc có những lý do khác để vẽ lại ít thường xuyên hơn (chẳng hạn như khi tab trình duyệt bị ẩn), vì vậy chúng tôi thực sự không nên chạy nó mỗi ________ 07

Nhưng làm thế nào để chúng ta biết về điều đó trong JavaScript? . Nó giải quyết tất cả những vấn đề này và thậm chí nhiều hơn nữa

cú pháp

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

5

Điều đó lên lịch cho chức năng

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

21 chạy trong thời gian gần nhất khi trình duyệt muốn thực hiện hoạt ảnh

Nếu chúng ta thay đổi các phần tử trong

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

21 thì chúng sẽ được nhóm cùng với các hàm gọi lại

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

20 khác và với hoạt ảnh CSS. Vì vậy, sẽ có một tính toán lại hình học và sơn lại thay vì nhiều

Giá trị trả về

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

24 có thể được sử dụng để hủy cuộc gọi

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

0

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

21 có một đối số – thời gian trôi qua kể từ khi bắt đầu tải trang tính bằng mili giây. Thời gian này cũng có thể thu được bằng cách gọi hiệu suất. hiện nay()

Thường thì

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

21 chạy rất sớm, trừ khi CPU quá tải hoặc pin laptop gần hết, hoặc có lý do nào khác

Mã bên dưới hiển thị thời gian giữa 10 lần chạy đầu tiên cho

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

20. Thông thường là 10-20ms

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

4

hoạt hình có cấu trúc

Bây giờ chúng ta có thể tạo một chức năng hoạt hình phổ quát hơn dựa trên

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

20

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

6

Hàm

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

29 chấp nhận 3 tham số mô tả cơ bản hoạt ảnh

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

50

Tổng thời gian hoạt hình. Thích,

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

51

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

52

Hàm tính thời gian, chẳng hạn như thuộc tính CSS

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

53 lấy phần thời gian đã trôi qua (

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

54 khi bắt đầu,

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

55 khi kết thúc) và trả về kết thúc hoạt ảnh (như

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

56 trên đường cong Bezier)

Chẳng hạn, một hàm tuyến tính có nghĩa là hoạt ảnh diễn ra đồng đều với cùng tốc độ

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

5

đồ thị của nó.

Điều đó giống như

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

57. Có nhiều biến thể thú vị hơn được hiển thị bên dưới

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

58

Hàm lấy trạng thái hoàn thành hoạt ảnh và vẽ nó. Giá trị

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

59 biểu thị trạng thái hoạt hình bắt đầu và

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

00 – trạng thái kết thúc

Đây là chức năng thực sự tạo ra hình ảnh động

Nó có thể di chuyển phần tử

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

0

…Hoặc làm bất cứ điều gì khác, chúng ta có thể tạo hoạt ảnh cho mọi thứ, theo bất kỳ cách nào

Hãy tạo hoạt ảnh cho phần tử

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

01 từ

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

54 đến

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

03 bằng chức năng của chúng ta

Nhấp vào phần tử cho bản demo

Kết quả

sinh động. js

mục lục. html

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

1

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

2

Mã cho nó

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

3

Không giống như hoạt hình CSS, chúng ta có thể tạo bất kỳ chức năng định thời gian và bất kỳ chức năng vẽ nào tại đây. Chức năng thời gian không bị giới hạn bởi các đường cong Bezier. Và

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

04 có thể vượt ra ngoài các thuộc tính, tạo các yếu tố mới như hoạt hình pháo hoa hoặc thứ gì đó

chức năng thời gian

Chúng tôi đã thấy chức năng thời gian tuyến tính, đơn giản nhất ở trên

Hãy xem thêm về chúng. Chúng tôi sẽ thử hoạt hình chuyển động với các chức năng thời gian khác nhau để xem chúng hoạt động như thế nào

sức mạnh của n

Nếu chúng ta muốn tăng tốc hoạt ảnh, chúng ta có thể sử dụng ________ 205 trong hàm ________ 206

Ví dụ, một đường cong parabol

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

4

Đồ thị

Xem trong hành động (bấm để kích hoạt)

…Hoặc đường cong lập phương hoặc thậm chí lớn hơn

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

06. Tăng sức mạnh làm cho nó tăng tốc nhanh hơn

Đây là biểu đồ cho

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

05 trong lũy ​​thừa

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

09

trong hành động

Vòng cung

Chức năng

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

5

Đồ thị

Trở lại. bắn cung

Chức năng này thực hiện việc “bắn cung”. Đầu tiên chúng tôi "kéo dây cung", sau đó "bắn"

Không giống như các chức năng trước đó, nó phụ thuộc vào một tham số bổ sung

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

40, “hệ số co giãn”. Khoảng cách “kéo dây cung” được xác định bởi nó

Mật mã

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

6

Biểu đồ cho

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

41

Đối với hoạt ảnh, chúng tôi sử dụng nó với giá trị cụ thể là

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

40. Ví dụ cho

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

41

Nảy

Hãy tưởng tượng chúng ta đang thả một quả bóng. Nó rơi xuống, sau đó bật trở lại một vài lần và dừng lại

Hàm

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

44 cũng làm như vậy, nhưng theo thứ tự ngược lại. "nảy" bắt đầu ngay lập tức. Nó sử dụng vài hệ số đặc biệt cho điều đó

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

7

trong hành động

Hoạt hình đàn hồi

Thêm một hàm “co giãn” chấp nhận tham số bổ sung

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

40 cho “phạm vi ban đầu”

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

8

Biểu đồ cho

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

46.

Đang hành động cho

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

46

đảo chiều. xoa dịu*

Vì vậy, chúng tôi có một bộ sưu tập các chức năng thời gian. Ứng dụng trực tiếp của họ được gọi là “easeIn”

Đôi khi chúng ta cần hiển thị hoạt ảnh theo thứ tự ngược lại. Điều đó đã được thực hiện với biến đổi “EASYOut”

dễ dàng

Trong chế độ “EASYOut”, chức năng

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

48 được đưa vào một trình bao bọc

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

49

let start = Date.now(); // remember start time

let timer = setInterval(function() {
  // how much time passed from the start?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // finish the animation after 2 seconds
    return;
  }

  // draw the animation at the moment timePassed
  draw(timePassed);

}, 20);

// as timePassed goes from 0 to 2000
// left gets values from 0px to 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

9

Nói cách khác, chúng ta có một hàm “biến đổi”

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

60 nhận một hàm thời gian “thông thường” và trả về trình bao bọc xung quanh nó

0

Chẳng hạn, chúng ta có thể lấy hàm

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

44 được mô tả ở trên và áp dụng nó

1

Sau đó, độ nảy sẽ không ở phần đầu mà ở phần cuối của hoạt ảnh. Trông thậm chí còn tốt hơn

Kết quả

Phong cách. css

mục lục. html

2

3

Ở đây chúng ta có thể thấy cách biến đổi thay đổi hành vi của hàm

Nếu có hiệu ứng hoạt hình ở phần đầu, chẳng hạn như nảy – nó sẽ hiển thị ở phần cuối

Trong biểu đồ phía trên số thoát bình thường có màu đỏ và số thoát nhẹ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . is blue.

• Độ nảy thường xuyên – đối tượng nảy ở dưới cùng, sau đó ở cuối nhảy mạnh lên trên cùng
• Sau

  setInterval(function() {
    animate1();
    animate2();
    animate3();
  }, 20)

  62 – lần đầu tiên nó nhảy lên trên cùng, sau đó bật lại ở đó

dễ dàngInOut

Chúng tôi cũng có thể hiển thị hiệu ứng ở cả phần đầu và phần cuối của hoạt ảnh. Biến đổi được gọi là “EASInOut”

Đưa ra chức năng thời gian, chúng tôi tính toán trạng thái hoạt hình như thế này

4

Mã bao bọc

5

Trong hành động,

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

63

Kết quả

Phong cách. css

mục lục. html

2

7

Phép biến đổi “easeInOut” nối hai biểu đồ thành một.

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

64 (thông thường) cho nửa đầu của hoạt hình và

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

62 (đảo ngược) – cho phần thứ hai

Hiệu quả được thấy rõ nếu chúng ta so sánh các đồ thị của

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

64,

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

62 và

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

68 của hàm thời gian

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

69

• Đỏ là biến thể thông thường của

  setInterval(function() {
    animate1();
    animate2();
    animate3();
  }, 20)

  69 (

  setInterval(function() {
    animate1();
    animate2();
    animate3();
  }, 20)

  64).
• Xanh lục –

  setInterval(function() {
    animate1();
    animate2();
    animate3();
  }, 20)

  62.
• Xanh dương –

  setInterval(function() {
    animate1();
    animate2();
    animate3();
  }, 20)

  68.

Như chúng ta có thể thấy, biểu đồ của nửa đầu của hoạt ảnh là

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

64 được thu nhỏ lại và nửa sau là

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

62 được thu nhỏ lại. Kết quả là hoạt ảnh bắt đầu và kết thúc với cùng một hiệu ứng

Thú vị hơn "vẽ"

Thay vì di chuyển phần tử, chúng ta có thể làm điều gì đó khác. Tất cả những gì chúng ta cần là viết đúng

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

04

Đây là kiểu gõ văn bản "nảy" hoạt hình

Kết quả

Phong cách. css

mục lục. html

8

9

Tóm lược

Đối với các hoạt ảnh mà CSS không thể xử lý tốt hoặc những hoạt ảnh cần kiểm soát chặt chẽ, JavaScript có thể trợ giúp. Hoạt ảnh JavaScript nên được triển khai thông qua

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

20. Phương thức tích hợp đó cho phép thiết lập chức năng gọi lại để chạy khi trình duyệt chuẩn bị sơn lại. Thông thường sẽ rất sớm, nhưng thời gian chính xác phụ thuộc vào trình duyệt

Khi một trang ở chế độ nền, sẽ không có thao tác vẽ lại nào cả, vì vậy lệnh gọi lại sẽ không chạy. hoạt ảnh sẽ bị treo và sẽ không tiêu tốn tài nguyên. Thật tuyệt

Đây là hàm trợ giúp

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

29 để thiết lập hầu hết các hoạt ảnh

setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)

0

Tùy chọn

• setInterval(function() {
    animate1();
    animate2();
    animate3();
  }, 20)

  50 – tổng thời gian hoạt ảnh tính bằng ms

• setInterval(function() {
    animate1();
    animate2();
    animate3();
  }, 20)

  48 – chức năng tính toán tiến độ hoạt ảnh. Nhận phân số thời gian từ 0 đến 1, trả về tiến trình hoạt hình, thường là từ 0 đến 1

• setInterval(function() {
    animate1();
    animate2();
    animate3();
  }, 20)

  04 – chức năng vẽ hoạt hình

Chắc chắn chúng tôi có thể cải thiện nó, thêm nhiều chuông và còi hơn, nhưng hoạt ảnh JavaScript không được áp dụng hàng ngày. Chúng được sử dụng để làm điều gì đó thú vị và không chuẩn. Vì vậy, bạn muốn thêm các tính năng mà bạn cần khi bạn cần chúng

Hoạt hình JavaScript có thể sử dụng bất kỳ chức năng thời gian nào. Chúng tôi đã đề cập đến rất nhiều ví dụ và phép biến đổi để làm cho chúng linh hoạt hơn nữa. Không giống như CSS, chúng tôi không giới hạn các đường cong Bezier ở đây