Hướng dẫn is javascript good for animations? - javascript có tốt cho hình ảnh động không?

Hoạt hình JavaScript có thể xử lý những thứ mà CSS có thể.

Chẳng hạn, di chuyển dọc theo một đường dẫn phức tạp, với chức năng thời gian khác với các đường cong bezier hoặc một hình ảnh động trên khung vẽ.

Sử dụng setinterval

Một hình ảnh động có thể được thực hiện dưới dạng một chuỗi các khung - thường là những thay đổi nhỏ đối với các 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 sang

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

3 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ỏ, như 50 lần mỗi giây, thì nó trông trơn tru. Đó là nguyên tắc tương tự 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ề hình ảnh độ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';
}

Nhấp vào cho bản demo:

Sử dụng requestAnimationFrame

Hãy để tưởng tượng chúng ta có một số hình ảnh động 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 người có

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

6, thì 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.

Điều đó bởi vì họ có thời gian bắt đầu khác nhau, vì vậy, cứ sau 20ms khác nhau giữa các hoạt hì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ố lần chạy độc lập trong

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

7.

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

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

Lọ nhẹ hơn ba cuộc gọi độc lập:

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

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

Có một điều nữa để 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 (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

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

7.

Nhưng làm thế nào để chúng ta biết về điều đó trong JavaScript? Có một thời gian hoạt hình đặc điểm kỹ thuật cung cấp chức năng

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

0. Nó giải quyết tất cả các vấn đề này và thậm chí nhiều hơn.

Cú pháp:

let requestId = requestAnimationFrame(callback)

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

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

1 để chạy trong thời gian gần nhất khi trình duyệt muốn thực hiện hoạt hình.

Nếu chúng ta thay đổi các yếu tố trong

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

1 thì chúng sẽ được nhóm cùng với các cuộc gọi lại

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

0 khác và với hình ảnh động 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(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

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

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

1 nhận được một đối số - thời gian trôi qua từ đầu tải trang tính bằng mili giây. Thời gian này cũng có thể có được bằng cách gọi hiệu suất.

Thông thường

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

1 chạy rất sớm, trừ khi CPU bị quá tải hoặc pin máy tính xách tay gần như được xả, hoặc có một lý do khác.

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

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

0. Thông thường, nó có 10-20ms:

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(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

0:

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

Hàm

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

9 Chấp nhận 3 tham số mô tả về cơ bản là hình ảnh động:

let requestId = requestAnimationFrame(callback)

0

Tổng thời gian hoạt hình. Giống như,

let requestId = requestAnimationFrame(callback)

1.

let requestId = requestAnimationFrame(callback)

2

Hàm thời gian, như CSS-PROPERTY

let requestId = requestAnimationFrame(callback)

3 có phần thời gian trôi qua (

let requestId = requestAnimationFrame(callback)

4 khi bắt đầu,

let requestId = requestAnimationFrame(callback)

5 ở cuối) và trả về hoàn thành hoạt hình (như

let requestId = requestAnimationFrame(callback)

6 trên đường cong Bezier).

Chẳng hạn, một hàm tuyến tính có nghĩa là hình ảnh động đi trên đồng đều với cùng tốc độ:

function linear(timeFraction) {
  return timeFraction;
}

Biểu đồ của nó:

Rằng giống như

let requestId = requestAnimationFrame(callback)

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

let requestId = requestAnimationFrame(callback)

8

Chức năng lấy trạng thái hoàn thành hoạt hình và vẽ nó. Giá trị

let requestId = requestAnimationFrame(callback)

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

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

0 - trạng thái kết thúc.

Đây là chức năng thực sự rút 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

Bằng mọi cách hoặc làm bất cứ điều gì khác, chúng ta có thể làm động bất cứ điều gì, bằng mọi cách.

Hãy để kích hoạt phần tử

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

1 từ

let requestId = requestAnimationFrame(callback)

4 đến

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

3 bằng cách sử dụng chức năng của chúng tôi.

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

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 thời gian nào và bất kỳ chức năng vẽ nào ở đây. Hàm thời gian không bị giới hạn bởi các đường cong bezier. Và

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

4 có thể vượt xa các thuộc tính, tạo các yếu tố mới cho hoạt hình pháo hoa hoặc một cái gì đó.

Chức năng thời gian

Chúng tôi đã thấy hàm thời gian tuyến tính đơn giản nhất ở trên.

Hãy cùng xem nhiều hơn trong số họ. 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 cách chúng hoạt động.

Sức mạnh của n

Nếu chúng ta muốn tăng tốc hoạt hình, chúng ta có thể sử dụng

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

5 trong nguồn

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

6.

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):

Đường cong hoặc đường cong khối hoặc thậm chí lớn hơn

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

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

Tại đây, biểu đồ cho

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

5 trong Power

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

9:

Trong hành động:

Vòng cung

Function:

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ị:

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

Chức năng này thực hiện các trò chơi Bow Bow. Đầu tiên, chúng tôi đã kéo dây cung, và sau đó là bắn súng.

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

0, hệ số đàn hồi của Cameron. Khoảng cách của dây kéo kéo dài đượ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

1:

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

0. Ví dụ cho

1:

Nảy

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

Hàm

4 hoạt động giống nhau, nhưng theo thứ tự ngược lại: Bouncing Bouncing bắt đầu ngay lập tức. Nó sử dụng một 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 chức năng đàn hồi của người Viking, chấp nhận một tham số bổ sung

0 cho phạm vi ban đầu của Cameron.

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

6:

Trong hành động cho

6:

Đảo ngược: dễ dàng*

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à dễ dàng.

Đôi khi chúng ta cần hiển thị hoạt hình theo thứ tự ngược lại. Điều đó đã được thực hiện với biến đổi dễ dàng của người Viking.

dễ dàng

Trong chế độ của dễ dàng, chức năng

8 được đặt vào trình bao bọc

9:

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 tôi có một chức năng biến đổi trên mạng

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

0 có chức năng thời gian thường xuyên của người Viking và trả về trình bao bọc xung quanh nó:

0

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

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

1

Sau đó, độ nảy sẽ không ở đầu, nhưng vào cuối hình ảnh động. Trông thậm chí còn tốt hơn:

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ó một hiệu ứng hoạt hình ngay từ đầu, như nảy - nó sẽ được hiển thị ở cuối.

Trong biểu đồ phía trên độ nảy thông thường có màu đỏ và độ nảy dễ dàng màu xanh lam.regular bounce has the red color, and the easeOut bounce is blue.

• Bounce thông thường - đối tượng nảy ở phía dưới, sau đó ở cuối nhảy mạnh lên đỉnh.
• Sau

  function animate({timing, draw, duration}) {
  
    let start = performance.now();
  
    requestAnimationFrame(function animate(time) {
      // timeFraction goes from 0 to 1
      let timeFraction = (time - start) / duration;
      if (timeFraction > 1) timeFraction = 1;
  
      // calculate the current animation state
      let progress = timing(timeFraction)
  
      draw(progress); // draw it
  
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
  
    });
  }

  2 - lần đầu tiên nó nhảy lên đỉnh, sau đó nảy ở đó.

dễ dàng

Chúng tôi cũng có thể hiển thị hiệu ứng cả ở đầu và kết thúc hoạt hình. Biến đổi được gọi là dễ dàng.

Với 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ã trình bao bọc:

5

Trong hành động,

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

3:

2

7

Biến đổi của EasyInout, kết hợp hai biểu đồ thành một:

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

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

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

2 (đảo ngược) - cho phần thứ hai.

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

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

4,

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

2 và

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

8 của hàm thời gian

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

9:

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

  function animate({timing, draw, duration}) {
  
    let start = performance.now();
  
    requestAnimationFrame(function animate(time) {
      // timeFraction goes from 0 to 1
      let timeFraction = (time - start) / duration;
      if (timeFraction > 1) timeFraction = 1;
  
      // calculate the current animation state
      let progress = timing(timeFraction)
  
      draw(progress); // draw it
  
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
  
    });
  }

  9 (

  function animate({timing, draw, duration}) {
  
    let start = performance.now();
  
    requestAnimationFrame(function animate(time) {
      // timeFraction goes from 0 to 1
      let timeFraction = (time - start) / duration;
      if (timeFraction > 1) timeFraction = 1;
  
      // calculate the current animation state
      let progress = timing(timeFraction)
  
      draw(progress); // draw it
  
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
  
    });
  }

  4). is the regular variant of

  function animate({timing, draw, duration}) {
  
    let start = performance.now();
  
    requestAnimationFrame(function animate(time) {
      // timeFraction goes from 0 to 1
      let timeFraction = (time - start) / duration;
      if (timeFraction > 1) timeFraction = 1;
  
      // calculate the current animation state
      let progress = timing(timeFraction)
  
      draw(progress); // draw it
  
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
  
    });
  }

  9 (

  function animate({timing, draw, duration}) {
  
    let start = performance.now();
  
    requestAnimationFrame(function animate(time) {
      // timeFraction goes from 0 to 1
      let timeFraction = (time - start) / duration;
      if (timeFraction > 1) timeFraction = 1;
  
      // calculate the current animation state
      let progress = timing(timeFraction)
  
      draw(progress); // draw it
  
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
  
    });
  }

  4).
• Màu xanh lá cây -

  function animate({timing, draw, duration}) {
  
    let start = performance.now();
  
    requestAnimationFrame(function animate(time) {
      // timeFraction goes from 0 to 1
      let timeFraction = (time - start) / duration;
      if (timeFraction > 1) timeFraction = 1;
  
      // calculate the current animation state
      let progress = timing(timeFraction)
  
      draw(progress); // draw it
  
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
  
    });
  }

  2. –

  function animate({timing, draw, duration}) {
  
    let start = performance.now();
  
    requestAnimationFrame(function animate(time) {
      // timeFraction goes from 0 to 1
      let timeFraction = (time - start) / duration;
      if (timeFraction > 1) timeFraction = 1;
  
      // calculate the current animation state
      let progress = timing(timeFraction)
  
      draw(progress); // draw it
  
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
  
    });
  }

  2.
• Màu xanh -

  function animate({timing, draw, duration}) {
  
    let start = performance.now();
  
    requestAnimationFrame(function animate(time) {
      // timeFraction goes from 0 to 1
      let timeFraction = (time - start) / duration;
      if (timeFraction > 1) timeFraction = 1;
  
      // calculate the current animation state
      let progress = timing(timeFraction)
  
      draw(progress); // draw it
  
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
  
    });
  }

  8. –

  function animate({timing, draw, duration}) {
  
    let start = performance.now();
  
    requestAnimationFrame(function animate(time) {
      // timeFraction goes from 0 to 1
      let timeFraction = (time - start) / duration;
      if (timeFraction > 1) timeFraction = 1;
  
      // calculate the current animation state
      let progress = timing(timeFraction)
  
      draw(progress); // draw it
  
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
  
    });
  }

  8.

Như chúng ta có thể thấy, biểu đồ của nửa đầu của hình ảnh động là tỷ lệ xuống

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

4 và nửa sau là tỷ lệ xuống

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

2. Kết quả là, hình ảnh động bắt đầu và kết thúc với hiệu ứng tương tự.

Thú vị hơn "vẽ"

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

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

4 thích hợp.

Tại đây, các bản gõ văn bản của hình ảnh nổi bật trên mạng.

8

9

Bản tóm tắt

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

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

0. 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 sẽ chuẩn bị một bản sửa lỗi. Thông thường mà 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 nằm trong nền, không có sự lặp lại nào cả, vì vậy cuộc gọi lại đã giành được chạy: hoạt hình sẽ bị đình chỉ và giành được tài nguyên tiêu thụ. Thật tuyệt.

Tại đây, hàm trợ giúp

setInterval(animate1, 20); // independent animations
setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);

9 để thiết lập hầu hết các hình ảnh động:

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

0

Options:

• let requestId = requestAnimationFrame(callback)

  0 - Tổng thời gian hoạt hình trong MS.

• 8 - Hàm để tính tiến trình hoạt hình. Nhận một phần thời gian từ 0 đến 1, trả về tiến trình hoạt hình, thường là từ 0 đến 1.

• // cancel the scheduled execution of callback
  cancelAnimationFrame(requestId);

  4 - Hàm để vẽ hình ảnh động.

Chắc chắn chúng ta có thể cải thiện nó, thêm nhiều chuông và còi, nhưng hình ảnh động JavaScript không được áp dụng hàng ngày. Chúng được sử dụng để làm một cái 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.

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 đã trình bày rất nhiều ví dụ và biến đổi để làm cho chúng thậm chí còn linh hoạt hơn. Không giống như CSS, chúng tôi không giới hạn ở các đường cong Bezier ở đây.

Điều tương tự là về

// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);

4: chúng ta có thể làm động bất cứ điều gì, không chỉ các thuộc tính CSS.

Có phải tốt hơn để sinh động với CSS hoặc JavaScript?

Khung nào là tốt nhất cho hoạt hình?

Làm thế nào để bạn làm động trong JavaScript?

CSS hay JavaScript nhanh hơn là gì?