Hàm nới lỏng cho phép bạn nội suy các giá trị từ giá trị này sang giá trị khác trong một khoảng nhất định bằng cách sử dụng một thứ gọi là "hàm nới lỏng". Đây là các hàm được thiết kế để lấy một giá trị và tại bất kỳ điểm nào trong khoảng thời gian, xuất giá trị tại một thời điểm nhất định.
Điều này có thể được giải thích tốt nhất bằng cách xem một đoạn mã:
// simple linear tweening - no easing, no acceleration
Math.linearTween = function (t, b, c, d) {
return c*t/d + b;
};
@t là thời gian hiện tại (hoặc vị trí) của tween. Đây có thể là giây hoặc khung, bước, giây, ms, bất cứ điều gì - miễn là đơn vị giống như được sử dụng trong tổng thời gian
@b là giá trị bắt đầu của tài sản.
@c là sự thay đổi giữa giá trị đầu và đích của tài sản.
@d là tổng thời gian của tween.
Cảm ơn, http://upshots.org/ilitiescript/jsas-under Hiểu-ease
Đây là định nghĩa của một chức năng nới lỏng tuyến tính. Vẽ đồ thị này theo thời gian theo 't' chúng ta có một đồ thị tuyến tính đơn thuần.
Được, tuyệt đấy. Chúng ta có thể sử dụng chúng để làm gì?
Bất cứ khi nào bạn có một khởi đầu và kết thúc trong tâm trí và muốn làm động chúng, bạn có thể sử dụng "chức năng tween" hoặc "nới lỏng".
Ví dụ: đây là một GIF tôi vừa chụp Angry Birds:
Chú ý menu trượt ra đến điểm trên màn hình, nhưng nó dừng chậm? Điều này là do một chức năng nới lỏng mà dễ dàng vào vị trí. Bạn có thể thấy những thứ đó trên web. Nếu đây là một sự dễ dàng tuyến tính, nó sẽ giống nhau trong suốt.
Âm nhạc?
Chắc chắn rồi! Nếu chúng tôi lấy giá trị của giá trị nhạc phim hiện tại của chúng tôi và nội suy nó giữa đó và 0 trên tổng số t nói, 1 giây thì âm lượng của chúng tôi sẽ dần dần biến mất trong khoảng thời gian một giây.
Đối tượng giới hạn
Ngoài ra còn có các chức năng cho phép nảy (xem: http://easings.net/#easeOutBounce ) có thể tạo ra các hiệu ứng như thế này trên một sprite mà không cần bất kỳ hệ thống vật lý nào:
Bạn có thể tìm thêm thông tin trên web bằng cách tìm kiếm tweening.
