Làm thế nào để dừng (để đảo ngược) một hoạt hình fabricjs

Question

Tôi muốn tạo hiệu ứng di chuột qua, như chúng ta thường thấy trong các trang web flash - khi con chuột cuộn qua một phần tử, nó bắt đầu hoạt hình, nhưng nếu ở giữa của hình ảnh động, con lăn cuộn ra các hình ảnh động sẽ dừng lại và chạy trở lại.

Tôi muốn đạt được hiệu quả tương tự với vải, nhưng tôi có vẻ như tìm cách ngăn chặn hoạt ảnh. Ví dụ:

rect.animate('top', '200', { 
    duration: 1000, 
    onChange: canvas.renderAll.bind(canvas), 
    onComplete: function() { 
     //callback code goes here 
    } 
    }); 

này sẽ động đến khi giá trị top của rect sẽ trở thành 200. Có cách nào để ngừng hoạt hình trước đó không?

Answer 1

Bạn cần chỉ định chức năng abort.

rect.animate('top', '200', { 
    duration: 1000, 
    onChange: canvas.renderAll.bind(canvas), 
    onComplete: function() { 
     //callback code goes here 
    }, 
    abort: function(){ 
     return someConditionWhichAbortsAnimationWhenItsTrue; 
    } 
}); 

Vấn đề duy nhất là abort đã không được thông qua vào cơ bản fabric.util.animate, which I just fixed, vì vậy bạn sẽ cần phải sử dụng phiên bản mới nhất :)