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
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
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]
7Nó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]
2Mộ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 ảnhNế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ềuGiá trị trả về
setInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
24 có thể được sử dụng để hủy cuộc gọisetInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
0setInterval[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ácMã 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-20mssetInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
4hoạ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]
20setInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
6Hàm
setInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
29 chấp nhận 3 tham số mô tả cơ bản hoạt ảnhsetInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
50Tổng thời gian hoạt hình. Thích,
setInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
51setInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
52Hà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ướisetInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
58Hà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 taNhấ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';
}
1let 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';
}
2Mã 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';
}
3Khô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]
09trong 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';
}
6Biể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]
41Nả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';
}
7trong 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';
}
8Biể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]
49let 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';
}
9Nó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ó
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
0Chẳ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ó
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
1Sau đó, độ 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
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
2
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
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
62 – lần đầu tiên nó nhảy lên trên cùng, sau đó bật lại ở đósetInterval[function[] { animate1[]; animate2[]; animate3[]; }, 20]
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
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
4Mã bao bọc
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
5Trong hành động,
setInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
63Kết quả
Phong cách. css
mục lục. html
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
2
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
7Phé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ứ haiHiệ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
69 [setInterval[function[] { animate1[]; animate2[]; animate3[]; }, 20]
64].setInterval[function[] { animate1[]; animate2[]; animate3[]; }, 20]
- Xanh lục –
62.setInterval[function[] { animate1[]; animate2[]; animate3[]; }, 20]
- Xanh dương –
68.setInterval[function[] { animate1[]; animate2[]; animate3[]; }, 20]
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 ứngThú 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
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
8
#train {
position: relative;
cursor: pointer;
}
train. title = function[] {
let start = Date.now[];
let timer = setInterval[function[] {
let timePassed = Date.now[] - start;
train.style.left = timePassed / 5 + 'px';
if [timePassed > 2000] clearInterval[timer];
}, 20];
}
9Tó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ệtKhi 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 ảnhsetInterval[function[] {
animate1[];
animate2[];
animate3[];
}, 20]
0Tùy chọn
50 – tổng thời gian hoạt ảnh tính bằng mssetInterval[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 1setInterval[function[] { animate1[]; animate2[]; animate3[]; }, 20]
04 – chức năng vẽ hoạt hìnhsetInterval[function[] { animate1[]; animate2[]; animate3[]; }, 20]
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