Cuộn một hoạt ảnh jQuery về phía sau và tiến tới

Question

Tôi đang thực hiện ứng dụng huấn luyện futsal (bóng đá trong nhà) cho phép huấn luyện viên thêm người chơi trên màn hình, thiết lập hướng di chuyển của họ (bằng cách vẽ mũi tên bằng canvas HTML5) và sau đó nhấn 'play 'để di chuyển tất cả người chơi trên màn hình. Một người chơi được tạo thành từ một div với một hình nền của một người chơi.

Hoạt ảnh đang được thực hiện bằng cách sử dụng chức năng jquery .animate().

Tất cả những gì tôi làm là thay đổi người chơi div'sleft và top thuộc tính vị trí css.

Tôi muốn làm hai việc và không chắc chắn về cách mà có thể được thực hiện:

1. Tôi muốn tạo một thanh trượt jQuery và di chuyển nó incremently như các hình ảnh động diễn ra. Tôi đoán tôi sẽ làm điều này bằng cách tính toán tổng chiều dài của một hình ảnh động trước khi bắt đầu nó?

2. Tôi muốn di chuyển thanh trượt jQuery lên trên và lùi - để đảo ngược hoạt ảnh và tạm dừng khi được yêu cầu. là có thể ở tất cả cho rằng chúng tôi đang di chuyển divs cho hoạt hình, và không làm một frame-by-frame hoạt hình chuỗi.

Answer 1

Trước khi bắt đầu hoạt hình, làm thế nào về tiết kiệm vị trí bắt đầu?

startpostion = $(playerdiv).position(); //Or offset, I keep forgetting which 
$(playerdiv).data("startTop",startposition.top); 
$(playerdiv).data("startLeft",startposition.left); 

Sau đó bạn có thể lấy nó bằng cách sử

left = $(playerdiv).data("startTop") 

, vv

Bạn có thể cung cấp gọi lại cho hoạt ảnh bằng cách sử dụng tùy chọn bước, theo cách này bạn có thể cập nhật thanh trượt của mình cho phù hợp.

$(playerdiv).animate({ 
    top : targetTop, 
    left : targetLeft, 
    step, function(){ magic happens here 
}) 

Answer 2

tôi sẽ làm điều đó theo cách này:

1. Nếu người dùng nhấp chuột "Play", bắt đầu hoạt cảnh divs từ vị trí hiện tại của họ đến đích của họ. Bạn có thể dễ dàng tính toán thời gian còn lại và vị trí div tùy thuộc vào vị trí của thanh trượt:

   • startingDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition;
   • startingDivLeft = initialDivLeft + (finalDivLeft - initialDivLeft) * sliderPosition;
   • startingTime = totalDuration * sliderPosition;

   (hoặc một cái gì đó như thế, nơi sliderPosition là một cái gì đó giữa 0 và 1)

2. Nếu người dùng nhấp chuột một lần nữa trên thanh trượt, gọi phương thức .stop() trên tất cả các div: cách mà họ sẽ ngừng hoạt ảnh và bạn sẽ có thể đặt chúng tĩnh: tính toán vị trí các div nên ở và di chuyển chúng tĩnh đến điểm đó.

3. Nếu người dùng "thả" thanh trượt và "Phát" vẫn được kích hoạt, thì hoạt ảnh sẽ tiếp tục chuyển tiếp từ điểm thanh trượt bị bỏ.

Nghe có vẻ giống như một dự án tốt đẹp bạn đang làm việc trên :)