Chiến lược dịch một UX 'pan` cử chỉ đặt một giá trị tuyến tính mà không có một giới hạn trên

Question

Tôi đang cố gắng để thiết lập một thanh trượt (thực sự là một bộ đếm thời gian bếp) sử dụng một cử chỉ pan trong ionic2 see: http://ionicframework.com/docs/v2/components/#gestures

Thanh trượt/timer có một giới hạn trên mở có thể được thiết lập bởi một panright, nhưng đi xuống số không trên panleft.

Làm cách nào để dịch tốt nhất sự kiện pan để nhạy cảm với tốc độ để cho phép giới hạn trên gần 36000 nhưng đủ nhạy cảm để đặt số gia tăng nhỏ nhất là 10? Tối đa deltaX sẽ có kích thước khoảng 400px, nhưng tôi cho rằng người dùng có thể sử dụng một vài cử chỉ pan để đạt được giá trị lớn.

Có sẵn một số chức năng easing sẵn có để đạt được điều này không?

Answer 1

Chỉ cần suy nghĩ trừu tượng:

Bạn có thể phát hiện cường độ giữa 2 sự kiện pan liên tiếp. Nếu nó đủ nhỏ, thì bạn có thể cho phép độ chi tiết nhỏ hơn của sự gia tăng. Mặt khác, nếu bạn quyết định đủ lớn, thì bạn có thể cho phép gia tăng lớn hơn. Về lý thuyết, bạn có thể thực hiện việc kiểm tra này liên tục trong suốt các sự kiện pan, thậm chí ảnh hưởng động từ phía trên (mặc dù không chắc chắn tại sao điều này có liên quan).

Tôi không hiểu tại sao bạn cần phải lo lắng về giới hạn trên trong trường hợp này. Bạn có thể giải thích lý do tại sao?

Answer 2

Sử dụng nhận xét của Riron, bạn chỉ có thể nhân số velocityX với số deltaX. Tôi thấy trong một thử nghiệm nhanh chóng rằng tốc độ có thể dễ dàng nhận được cao hơn 8 và thấp hơn 1 (0,5 ví dụ). Đồng bằng có thể ở hàng chục hoặc hàng trăm vì vậy nó cho phép cả hai độ nhạy yêu cầu. Đây là mã cho điều đó:

hammerObj.on("panright panleft", 
    function(ev){ 
     if(ev.type == "panright"){ 
      timer += ev.speedX * ev.deltaX; 
      //timer = Math.min(36000, ev.speedX*ev.deltaX+timer); for an upper bound of 36000 instead of unbound 
     } else if (ev.type == "panleft"){ 
      timer = Math.max(0, timer - (ev.speedX * ev.deltaX)); 
     } 
    }