jQuery.easing - easeOutCubic - nhấn mạnh vào sự dễ dàng

Question

Tôi đang sử dụng plugin giảm giá jQuery của Robert (http://gsgd.co.uk/sandbox/jquery/easing/) và tôi cần nhấn mạnh hoặc kéo hiệu ứng dễ dàng.

Về cơ bản, tôi muốn hiệu ứng dễ dàng thực sự nhanh chóng nhưng sau đó làm chậm rất nhiều trong quá trình dễ dàng.

Tôi tin rằng tôi có thể thực hiện việc này bằng cách sử dụng jQuery.easing.easeOutCubic(null, current_time, start_value, end_value, total_time) nhưng tôi không thể tìm ra cách sử dụng đúng cách.

Làm cách nào để đạt được điều này?

Answer 1

Bạn không cần plugin giảm bớt để thực hiện tùy chỉnh easing với jQuery. Bạn chỉ cần mã nguồn JavaScript của hàm nới lỏng mà bạn sẽ sử dụng.

Đây là hàm easeOutCubic thu được từ mã nguồn giao diện người dùng jQuery. Xem this thread for more.

$.easing.easeOutCubic = function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t + 1) + b; 
} 

Bây giờ bạn có thể chỉnh sửa các chức năng và/hoặc đổi tên nó ...

$.easing.myEasing = function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t + 1) + b; 
} 

(Tất cả các ví dụ sau đây sử dụng một hình vuông màu xanh 375 pixel với một slideToggle() của 3 thời gian thứ hai. Bạn có thể thay đổi thời lượng 3 giây (3000 mili giây) để chứng minh hiệu ứng theo ý thích của bạn. Tôi đã chọn 3 giây để làm cho nó đủ chậm để thấy sự khác biệt.)

Sau đó bạn chỉ cần đặt nó vào trong jQuery có lẽ ...

$(document).ready(function(){ 

     $.easing.myEasing = function (x, t, b, c, d) { 
      return c*((t=t/d-1)*t*t + 1) + b; 
     } 

     $("#button").click(function() { 
      $('#myDiv').slideToggle(
       3000, // <-- Animation Duration (3000 ms) 
       'myEasing' // <-- the Name of your easing function 
      ); 
     }); 

}); 

Đây là một bản demo của đoạn mã trên, trong đó có các easeOutCubic chức năng đổi tên thành myEasing và áp dụng cho một khối slideToggle() có thời hạn 3 giây.

http://jsfiddle.net/kJZxQ/

Ok, bây giờ đối với vấn đề của bạn: "... ảnh hưởng một cách dễ dàng để được thực sự nhanh chóng nhưng sau đó chậm lại đáng kể trong sự dễ dàng ra" Bạn nói rằng bạn muốn

Đây là một đồ thị của easeOutCubic:

Bạn có hai lựa chọn, bạn có thể thao tác các phương trình nới lỏng định bản thân hoặc chúng ta có thể xem một số chức năng giảm bớt kia có một đường cong tương tự, nhưng dốc hơn (nhanh hơn) cho đến khi phần dễ dàng.

trang demo này trực quan cho bạn thấy tất cả các đường cong giảm bớt ...

http://api.jqueryui.com/easings/

Như bạn thấy, một vài đường cong có hình dạng tương tự như (7) - easeOutCubic chưa là dốc trên kết thúc trước. Dưới đây là một vài ví dụ ...

---

(10) - easeOutQuart easeOutQuart Demo

---

(13) - easeOutQuint easeOutQuint Demo

---

(16) - easeOutExpo easeOutExpo Demo

---

Nó có vẻ như cuối cùng, easeOutExpo là mạnh nhất chức năng cổ phiếu có sẵn. Bằng cách so sánh sự khác biệt trong các phương trình có ở trên, chúng ta cũng có thể thao tác các phương trình easeOutExpo để dốc thêm đường cong hơn nữa.

phương trình tùy chỉnh này là ridiculously nhanh và sau đó chậm lại rất nhiều ...

http://jsfiddle.net/kJZxQ/11/

Thậm chí nhiều hơn cùng cực so với trước ...

http://jsfiddle.net/kJZxQ/12/

Thời gian tăng trên bản demo mới nhất đến 6 giây để phóng đại hiệu ứng ...

http://jsfiddle.net/kJZxQ/13/

Bằng cách so sánh các phương trình toán học của các cuộc biểu tình ở trên, bạn có thể thấy biến nào đang được điều khiển để nâng cao hiệu ứng và thực hiện các điều chỉnh tinh chỉnh cho phù hợp.

Tôi thực sự nghĩ rằng easeOutExpo giống với những gì bạn mô tả. Về cơ bản, đó là phương trình easeOutCubic của bạn nhưng chỉ nhanh hơn ở phía trước và chậm hơn vào cuối.