Trình bảo vệ màn hình nảy tính toán va chạm như thế nào

Trình bảo vệ màn hình nảy thuyết phục là một vấn đề vật lý nhỏ. Vật thể phải di chuyển với tốc độ ổn định, chạm rõ ràng vào các giới hạn có thể nhìn thấy, duy trì chuyển động dư thừa sau va chạm, thích ứng với việc thay đổi kích thước và chỉ tính một góc khi chạm tới các bức tường ngang và dọc. Việc buộc chuyển động vào “pixel trên mỗi khung hình” không thành công ngay khi tốc độ làm mới hoặc khối lượng công việc của trình duyệt thay đổi.

Trạng thái tối thiểu

Đối với vật hình chữ nhật, lưu trữ vị trí (x, y), vận tốc (vx, vy), chiều rộng và chiều cao của đối tượng cũng như chiều rộng và chiều cao của khung nhìn. Nếu góc trên bên trái đại diện cho vị trí, giới hạn hợp lệ là:

0 ≤ x ≤ viewportWidth  - objectWidth
0 ≤ y ≤ viewportHeight - objectHeight

Huy hiệu phải va chạm với nhau ở ô nhìn thấy được chứ không phải ở một điểm chính giữa. Do đó, việc thay đổi kích thước huy hiệu sẽ thay đổi giá trị x và y tối đa.

Sử dụng thời gian đã trôi qua, không phải tốc độ khung hình giả định

Trình duyệt cung cấp dấu thời gian có độ phân giải cao cho requestAnimationFrame gọi lại. Trừ dấu thời gian trước đó để có được mili giây trôi qua và chuyển đổi thành giây:

dt = min((now - previous) / 1000, maximumStep)
x  = x + vx * dt
y  = y + vy * dt

Vận tốc được biểu thị bằng pixel trên giây. Khi đó, màn hình 60 Hz và màn hình 144 Hz sẽ bao phủ khoảng cách gần như nhau trong cùng một thời gian thực. Kẹp dt ngăn chặn bước nhảy lớn nếu quá trình thực thi tiếp tục sau khi gỡ lỗi hoặc khung tiền cảnh bị đình trệ. Trang này cũng hủy vòng lặp của chính nó khi bị ẩn thay vì chỉ dựa vào việc điều tiết trình duyệt.

Phản ánh phần vượt quá vào tường

Một bộ thực hiện đơn giản x đến ranh giới và phủ định vx. Điều đó loại bỏ khoảng cách di chuyển ra ngoài bức tường và làm cho chuyển động hơi không đồng đều. Phản ánh phần vượt quá sẽ bảo tồn nó:

if (x < 0) {
  x = -x
  vx = abs(vx)
}
if (x > maxX) {
  x = maxX - (x - maxX)
  vx = -abs(vx)
}

Áp dụng logic tương đương theo chiều dọc. Với bước thời gian tối đa hợp lý, thông thường một phản xạ trên mỗi trục là đủ. Một động cơ tổng quát hơn có thể lặp lại trong khi độ vọt lố rất lớn vẫn nằm ngoài giới hạn.

Những gì được tính là một quả phạt góc?

Trong một bước mô phỏng, hãy ghi lại các boolean riêng biệt cho va chạm ngang và va chạm dọc. Chỉ tăng bộ đếm góc khi cả hai đều trở thành đúng trong cùng một bước đó. Không kiểm tra đẳng thức dấu phẩy động như x === 0 && y === 0; bước phản ánh đã biết việc vượt qua đã xảy ra.

Xác suất trúng góc phụ thuộc vào vị trí xuất phát, tỷ lệ vận tốc và kích thước. Một đường đi rời rạc lặp lại hoàn hảo có thể bỏ lỡ các góc vô thời hạn. Thay đổi kích thước hoặc thay đổi kích thước đối tượng sẽ làm thay đổi đường dẫn, do đó bộ đếm phải đặt lại hoặc bảo toàn rõ ràng ngữ nghĩa của nó.

Các chi tiết làm cho quá trình triển khai trở nên tinh tế

• Khi thay đổi kích thước, hãy kẹp vị trí vào giới hạn mới mà không dịch chuyển đến một điểm ngẫu nhiên không liên quan.
• Chỉ thay đổi màu va chạm trên một sự kiện tường thực tế, không liên tục từ vị trí x/y.
• Giữ tỷ lệ khung hình của hình ảnh tùy chỉnh và từ chối các tệp vượt quá giới hạn kích thước và loại tài liệu.
• Giữ các điều khiển Tạm dừng và Đặt lại có thể nhìn thấy được và để Escape rời khỏi chế độ toàn màn hình.
• Tôn trọng chuyển động giảm và dừng hiển thị trong tab ẩn.
• Giới hạn tỷ lệ pixel của thiết bị cho Canvas hoạt động để điện thoại có mật độ cao không chiếm quá nhiều diện tích.

Hãy thử hành vi trong Trình bảo vệ màn hình DVD nảy. Dấu mặc định của nó vẫn rõ nét trong khi hình ảnh cục bộ tùy chỉnh không bao giờ rời khỏi thiết bị.

Tài liệu tham khảo kỹ thuật

• MDN: requestAnimationFrame
• MDN: API toàn màn hình
• MDN: Màn hình Wake Lock API

Chọn vectơ vận tốc

Thanh trượt tốc độ thường biểu thị độ lớn, trong khi hướng đến từ một vectơ chuẩn hóa. Đối với một góc θ và tốc độ s:

vx = cos(θ) * s
vy = sin(θ) * s

Hướng chính xác là nằm ngang hoặc thẳng đứng không bao giờ khám phá toàn bộ bề mặt, vì vậy góc ban đầu phải tránh các giá trị quá gần với bội số của 90 độ. Việc ngẫu nhiên hóa vận tốc x và y một cách độc lập cũng có thể tạo ra một đường đi gần như bằng phẳng nếu một thành phần rất nhỏ. Tạo một góc từ phạm vi cho phép, sau đó lấy cả hai thành phần.

Tỷ lệ giữa vận tốc ngang và vận tốc dọc ảnh hưởng đến việc đường đi có lặp lại hay không. Trong hình học liên tục lý tưởng, một góc xảy ra khi thời gian di chuyển đến ranh giới x và ranh giới y trùng nhau. Kích thước hữu hạn và các bước dấu phẩy động làm cho đẳng thức vị trí chính xác không đáng tin cậy, đó là lý do tại sao các sự kiện va chạm, không phải đẳng thức tọa độ, lại điều khiển bộ đếm.

Xử lý các bước thời gian lớn và nhiều phản ánh

Việc kẹp thời gian đã trôi qua sẽ bảo vệ hoạt ảnh thông thường nhưng công cụ có thể tái sử dụng cũng có thể xử lý một vật thể băng qua nhiều bức tường trong một bước lớn. Sau khi di chuyển, liên tục phản ánh bất kỳ tọa độ ngoài phạm vi nào cho đến khi nó nằm trong giới hạn. Vòng lặp cần có giới hạn lặp lại nghiêm ngặt trong trường hợp trạng thái không đúng định dạng tạo ra một phạm vi không thể thực hiện được.

function reflect(position, velocity, maximum) {
  let hits = 0
  while ((position < 0 || position > maximum) && hits < 8) {
    if (position < 0) {
      position = -position
      velocity = Math.abs(velocity)
    } else {
      position = maximum - (position - maximum)
      velocity = -Math.abs(velocity)
    }
    hits++
  }
  return { position: clamp(position, 0, maximum), velocity, hits }
}

Màn hình sản xuất sử dụng bước thời gian tối đa thận trọng và tạm dừng khi bị ẩn, vì vậy việc nhảy qua nhiều bức tường là điều đặc biệt. Việc xử lý phòng thủ vẫn giúp việc đặt lại, tạm dừng trình gỡ lỗi và lập lịch trình duyệt bất thường trở nên an toàn hơn.

Sự kiện va chạm có sức mạnh hơn phương hướng

Sau khi công cụ báo cáo các lần truy cập theo chiều ngang và chiều dọc, trình kết xuất có thể thay đổi màu huy hiệu, tăng tổng số lần va chạm, phát âm thanh tùy chọn do người dùng kích hoạt hoặc cập nhật số góc. Những tác dụng phụ này sẽ xảy ra một lần cho mỗi sự kiện. Lấy màu liên tục từ vị trí sẽ tạo ra hiệu ứng chuyển động cầu vồng và không còn truyền đạt va chạm.

Âm thanh vẫn tắt theo mặc định và yêu cầu tương tác vì các hạn chế tự động phát của trình duyệt và sự thoải mái của người dùng là vấn đề quan trọng. Các va chạm nhanh ở tốc độ rất cao phải được giới hạn tốc độ để các thông báo về âm thanh và trạng thái không trở nên quá tải.

Đường nhỏ yêu cầu mô hình dọn dẹp có chủ ý

Một khung hình sắc nét sẽ xóa toàn bộ Canvas và rút ra một huy hiệu. Thay vào đó, một vệt sẽ bao phủ khung trước đó bằng nền mờ trước khi vẽ huy hiệu tiếp theo. Alpha thấp hơn bảo tồn dấu lâu hơn. Bởi vì độ dài vệt được nhận biết cũng phụ thuộc vào tốc độ và tốc độ khung hình, nên hãy xác định nó theo cách vẫn ổn định về mặt hình ảnh và vô hiệu hóa nó khi giảm chuyển động nếu hiệu ứng gây mất tập trung.

Trên hoạt ảnh dựa trên DOM, một vệt có thể là một nhóm giới hạn các phần tử mờ dần. Đừng nối thêm một nút mới mãi mãi; làm rò rỉ bộ nhớ và cuối cùng gây tổn hại đến hiệu suất tương tác.

Văn bản và hình ảnh tùy chỉnh thay đổi giới hạn va chạm

Độ rộng văn bản phụ thuộc vào phông chữ, nội dung, trọng lượng và kết xuất thiết bị. Đo sau khi có phông chữ, thêm phần đệm có chủ ý và tính toán lại x/y tối đa. Giới hạn độ dài văn bản để nó không thể rộng hơn khung nhìn. Nếu huy hiệu lớn hơn một kích thước, hãy thu nhỏ kích thước hoặc căn giữa nó thay vì cho phép giới hạn âm.

Một hình ảnh cục bộ phải được giải mã trước khi kích thước nội tại của nó được tin cậy. ScreenOrbit chỉ chấp nhận PNG, JPEGvà WebP trong phạm vi 5 MB và 4096 pixel mỗi bên, kiểm tra kích thước được giải mã, duy trì tỷ lệ khung hình và giải phóng URL đối tượng tạm thời. Nó từ chối SVG và HTML thay vì cố gắng loại bỏ nội dung cục bộ đang hoạt động hoặc phức tạp bất ngờ.

Thay đổi kích thước mà không làm mất đối tượng

Khi khung nhìn thay đổi, hãy tính toán các giới hạn mới và giữ nguyên vị trí tương đối nếu có thể:

ratioX = oldMaxX > 0 ? x / oldMaxX : 0.5
ratioY = oldMaxY > 0 ? y / oldMaxY : 0.5
x = clamp(ratioX * newMaxX, 0, newMaxX)
y = clamp(ratioY * newMaxY, 0, newMaxY)

Điều này mượt mà hơn so với việc chọn một vị trí ngẫu nhiên sau mỗi sự kiện thay đổi hoặc định hướng trên thanh địa chỉ di động. Thay đổi kích thước không phải là xung đột và không được tăng bộ đếm hoặc thay đổi màu sắc.

Canvas pixel và CSS hình học

CSS kích thước xác định giới hạn chuyển động. các Canvas bộ đệm sao lưu có thể lớn hơn để hiển thị mật độ cao: nhân với tỷ lệ pixel của thiết bị được giới hạn và chia tỷ lệ bối cảnh vẽ để tọa độ vẫn ở nguyên CSS đơn vị. Nếu không có tỷ lệ, vật lý và kết xuất sẽ sử dụng các đơn vị khác nhau; không có nắp, số 4× điện thoại có thể phân bổ diện tích pixel gấp mười sáu lần.

Đối với một đối tượng hình ảnh hoặc văn bản có thể được biểu diễn dưới dạng HTML, hoạt ảnh DOM dựa trên chuyển đổi cũng có thể thực hiện được. Canvas cung cấp bố cục cảnh có thể dự đoán được và vẫn xuất, trong khi DOM có thể cung cấp ngữ nghĩa đơn giản hơn. Sự lựa chọn không làm thay đổi nhu cầu di chuyển thời gian đã trôi qua và dọn dẹp vòng đời.

Tạm dừng, hiển thị và vòng đời toàn màn hình

Duy trì một mã định danh vòng lặp hoạt ảnh. Bắt đầu trong khi đang chạy không được lên lịch vòng lặp thứ hai. Tạm dừng hủy cuộc gọi lại đang chờ xử lý và ghi lại trạng thái; sơ yếu lý lịch thiết lập dấu thời gian mới trước đó để thời lượng ẩn không được coi là chuyển động. Trình xử lý khả năng hiển thị tuân theo quy tắc tương tự.

Toàn màn hình là trạng thái trình bày, không phải là yêu cầu về hoạt ảnh. Yêu cầu toàn màn hình bị từ chối hoặc không được hỗ trợ sẽ khiến bản xem trước được nhúng hoạt động. Khi thoát, tính toán lại giới hạn sau khi khung nhìn ổn định. Wake Lock được yêu cầu riêng và được giải phóng khi trang bị ẩn; thất bại không bao giờ chặn hoạt ảnh.

Test động cơ, không chỉ một lần chạy hấp dẫn

• Đánh trực tiếp vào các bức tường bên trái, bên phải, trên và dưới
• Va chạm x/y đồng thời và tăng một góc
• Tác động ở góc gần xảy ra ở các bước liền kề và không được tính
• Phản xạ quá mức bảo toàn khoảng cách và dấu hiệu
• Chuỗi dấu thời gian 60, 120 và 144 Hz tạo ra hành trình bằng nhau trong thời gian bằng nhau
• Một khoảng thời gian tạm dừng dài, sau đó là tiếp tục mà không cần dịch chuyển tức thời
• Thay đổi kích thước để nhỏ hơn vị trí hiện tại và nhỏ hơn đối tượng đã chọn
• Từ chối hình ảnh cục bộ theo loại, kích thước byte, kích thước được giải mã và giải mã không thành công
• Chu kỳ đặt lại/bắt đầu lặp đi lặp lại với một lệnh gọi lại đang hoạt động và không có URL đối tượng được giữ lại
• Giảm chuyển động, tạm dừng bàn phím, từ chối toàn màn hình và hành vi tab ẩn

Các bài kiểm tra tự động bao gồm các chuyển đổi số học và trạng thái; Nhà viết kịch đề cập đến vòng đời của trình duyệt và hình học đáp ứng. Quá trình chạy ổn định thủ công kéo dài 30 phút sẽ kiểm tra xem Canvas kích thước, bộ nhớ và số vòng lặp vẫn ổn định.

Khả năng tiếp cận ngoài chuyển động giảm

Tạm dừng, Đặt lại và Toàn màn hình cần có tiêu điểm bàn phím và nhãn văn bản hiển thị trong chế độ xem trang thông thường. Không nên thông báo số lần va chạm trong mỗi lần truy cập vào trình đọc màn hình; điều đó sẽ tạo ra cuộc trò chuyện không thể sử dụng được. Thông báo trạng thái được dành riêng cho những thay đổi kiểm soát có ý nghĩa. Mục tiêu cảm ứng duy trì ít nhất 44 x 44 CSS pixel và bản xem trước được nhúng không lấy cắp thao tác bàn phím từ các điều khiển xung quanh.

Tại sao một góc có thể mất nhiều thời gian như vậy

Trong một hình chữ nhật xác định hoàn hảo, vị trí và vận tốc có thể tạo ra một quỹ đạo lặp lại. Tùy thuộc vào tỷ lệ giữa chiều rộng di chuyển hiệu quả với các thành phần chiều cao và vận tốc, quỹ đạo đó có thể nhanh chóng gặp góc cua, chỉ sau nhiều lần nảy hoặc hoàn toàn không gặp trong thời gian thực tế. Làm tròn pixel, thay đổi kích thước, thay đổi kích thước huy hiệu và điều chỉnh tốc độ sẽ làm thay đổi đường dẫn.

Sự hiếm có là một phần của sự hấp dẫn. Bộ đếm là một bản ghi sự kiện trung thực, không phải là bộ đếm thời gian được thiết kế để sản xuất một góc. Đặt lại làm cho trạng thái bắt đầu được biết đến; nó không hứa hẹn thành công.

Sử dụng trang này cho một nhiệm vụ rõ ràng

Giải thích các quy tắc về thời gian khung hình, va chạm với tường, thay đổi kích thước và va chạm vào góc đằng sau cảnh nảy. Các nhà phát triển web, sinh viên, người truyền phát và những người dùng tò mò sử dụng hướng dẫn này để xác minh hành vi hoạt ảnh hiển thị. Viết ra kết quả bạn cần trước khi nhấp vào liên kết hoặc thay đổi cài đặt. Mục tiêu hẹp giúp tiết kiệm thời gian và giữ cho quyết định cuối cùng gắn liền với bằng chứng.

Đọc toàn bộ trang một lần trước khi hành động khi nhiệm vụ liên quan đến kiểm tra hiển thị, bước làm sạch, mô phỏng, quyền tệp, yêu cầu quyền riêng tư hoặc báo cáo hỗ trợ. Sau đó quay lại phần chính xác cần thiết cho công việc. Luôn hiển thị các giới hạn đã nêu trong khi bạn quyết định bước tiếp theo. Lộ trình này tập trung vào: Giải thích các quy tắc về thời gian khung hình, va chạm với tường, thay đổi kích thước và va chạm vào góc đằng sau cảnh nảy.

Chuẩn bị điểm xuất phát ổn định

Chọn một khung nhìn cố định, kích thước huy hiệu, tốc độ và điểm xuất phát trước khi so sánh các lần chạy. Ghi lại trạng thái bắt đầu trước khi bạn thay đổi điều khiển, di chuyển thiết bị, gửi biểu mẫu hoặc dựa vào tuyên bố chính sách. Sử dụng tài liệu nguồn hiện tại và phiên bản trang hiện tại cho bất kỳ đánh giá chính thức nào.

Giữ một vấn đề cho mỗi phiên hoặc tin nhắn. Tách triệu chứng trực quan khỏi yêu cầu về phần cứng. Tách mô phỏng trình duyệt khỏi sự kiện hệ thống. Tách tệp được tạo khỏi tài liệu của bên thứ ba được đặt bên trong tệp. Những ranh giới này làm cho bằng chứng dễ dàng hơn để đánh giá. Rủi ro tuyến đường chính là: Chuyển động đếm khung hình chạy ở tốc độ khác nhau trên màn hình 60 Hz và 120 Hz.

Thực hiện theo quy trình bốn phần thực tế

1. Xác định mục tiêu. Giải thích các quy tắc về thời gian khung hình, va chạm với tường, thay đổi kích thước và va chạm vào góc đằng sau cảnh nảy. Dừng lại nếu nhiệm vụ chuyển sang một vấn đề khác.
2. Nắm bắt đường cơ sở. Ghi lại kích thước khung nhìn, tỷ lệ pixel của thiết bị, thời gian đã trôi qua, vị trí, vận tốc, số lần va chạm và thay đổi kích thước sự kiện. Sử dụng các giá trị và tên chính xác ở nơi chúng tồn tại.
3. Kiểm tra rủi ro chính. Chuyển động đếm khung hình chạy ở tốc độ khác nhau trên màn hình 60 Hz và 120 Hz. Sửa lại thiết lập trước khi lặp lại bước này.
4. Chọn hành động tiếp theo. Mở Trình bảo vệ màn hình DVD, thay đổi một điều khiển và so sánh bộ đếm trực tiếp với các công thức trong hướng dẫn. Giữ hồ sơ gốc để đối chiếu.

Xây dựng bằng chứng mà người khác hiểu

Ghi lại kích thước khung nhìn, tỷ lệ pixel của thiết bị, thời gian đã trôi qua, vị trí, vận tốc, số lần va chạm và thay đổi kích thước sự kiện. Thêm ngày và URL trang. Xóa mật khẩu, địa chỉ, số sê-ri, dữ liệu thanh toán, tin nhắn riêng tư và nhật ký bí mật trước khi chia sẻ ảnh chụp màn hình hoặc báo cáo. Một chuỗi văn bản ngắn thường mang nhiều giá trị hơn một bức ảnh cận cảnh.

Để so sánh, hãy lặp lại thứ tự tương tự và giữ ổn định mọi biến không liên quan. Đối với câu hỏi về chính sách hoặc quyền, hãy trích dẫn chính xác tệp hoặc mệnh đề bằng từ ngữ của bạn và liên kết nguồn. Đối với một lỗi, hãy bao gồm hành vi dự kiến, hành vi được quan sát và đường dẫn tái tạo đáng tin cậy nhỏ nhất. Tuyến đường này yêu cầu bạn ghi lại: Ghi kích thước khung nhìn, tỷ lệ pixel của thiết bị, thời gian đã trôi qua, vị trí, vận tốc, số lần va chạm và thay đổi kích thước sự kiện.

Tránh bằng chứng yếu kém và tuyên bố không rõ ràng

• Chuyển động đếm khung hình chạy ở tốc độ khác nhau trên màn hình 60 Hz và 120 Hz.
• Hoạt ảnh trình duyệt thể hiện hình học và thời gian. Trang này không mô hình ma sát hoặc tác động vật lý.
• Tránh một số thay đổi cài đặt giữa đường cơ sở và kết quả. Chuẩn bị cho lộ trình này: Chọn một khung nhìn cố định, kích thước huy hiệu, tốc độ và điểm xuất phát trước khi so sánh các lần chạy.
• Tránh xác nhận quyền sở hữu riêng tư hoặc dành riêng cho từng mô hình mà không có nguồn chính hiện tại. Giới hạn trang là: Hoạt ảnh trình duyệt thể hiện hình học và thời gian. Trang này không mô hình ma sát hoặc tác động vật lý.
• Tránh đưa dữ liệu riêng tư vào ảnh chụp màn hình, liên kết, ví dụ và tin nhắn hỗ trợ công khai. Bằng chứng hữu ích là: Ghi lại kích thước khung nhìn, tỷ lệ pixel của thiết bị, thời gian đã trôi qua, vị trí, vận tốc, số lần va chạm và thay đổi kích thước sự kiện.
• Tránh coi kết quả tìm kiếm, hình ảnh camera hoặc nhận xét trên diễn đàn là bằng chứng cuối cùng. Rủi ro chính là: Chuyển động đếm khung hình chạy ở tốc độ khác nhau trên màn hình 60 Hz và 120 Hz.

Chuyển sang hành động hữu ích tiếp theo

Mở Trình bảo vệ màn hình DVD, thay đổi một điều khiển và so sánh bộ đếm trực tiếp với các công thức trong hướng dẫn. Giữ đường cơ sở và giới hạn trang bên cạnh kết quả. Liên hệ với nhà sản xuất, người bán, nền tảng, chuyên gia, chủ bản quyền có liên quan hoặc ScreenOrbit editor khi quyết định nằm ngoài phạm vi trang.