Nội suy sử dụng các đường cong Bezier hình khối

Tôi đang cố gắng tạo một hàm nội suy cho một thư viện hoạt hình để đạt được hiệu ứng tweening giữa các khung.

Tôi muốn nó hoạt động với các đường cong Bezier. Tôi đã tạo ra một jsFiddle ( ở đây ) về sự tiến bộ của tôi cho đến nay.

Tôi đang cố gắng tạo một tween tuyến tính bằng cách sử dụng định nghĩa bezier này:

{
    p0: new Vector(0,0), //Start point
    p1: new Vector(0,0), //Control point 1
    p2: new Vector(1,1), //Control point 2
    p3: new Vector(1,1)  //End point
}

Tôi đã thực hiện chức năng nội suy từ hướng dẫn này .

var u = 1 - t;
var tt = t*t;
var uu = u*u;
var uuu = uu * u;
var ttt = tt * t;

var p = p0.multiply(uuu);
p = p.add(p1.multiply(3 * uu * t));
p = p.add(p2.multiply(3 * u * tt));
p = p.add(p3.multiply(ttt));

Vấn đề tôi gặp phải là khi tôi chạy chức năng, hình ảnh động dường như không phải là tuyến tính, mà giống như 'dễ dàng thoát ra'.

Lý tưởng nhất là tôi muốn hoạt hình tuyến tính hoạt động giống như quá trình chuyển đổi CSS này .

Bất cứ ai cũng có thể thấy tại sao nó không hoạt hình theo kiểu tuyến tính?

Sau khi chơi với chức năng này nhiều hơn. Tôi nhận ra rằng các điểm điều khiển bezier đang hoạt động tương tự như nam châm.

Nếu tôi trải các điểm điều khiển sao cho chúng được định vị dọc theo một đường thẳng với khoảng cách bằng nhau, thì hoạt ảnh sẽ hoạt động như mong đợi

{
    p0: new Vector(0,0), //Start point
    p1: new Vector(.333,.333), //Control point 1
    p2: new Vector(.666,.666), //Control point 2
    p3: new Vector(1,1)  //End point
}

Tôi thường giải quyết điều này bằng cách sử dụng spline Catmull-Rom. Thay vì sử dụng các điểm kiểm soát, bạn chỉ cần chỉ định hai điểm mà bạn muốn nội suy, cũng như điểm "trước" và điểm "tiếp theo". Nếu tất cả 4 điểm nằm trên cùng một đường thẳng và cách đều nhau, phép nội suy sẽ là tuyến tính.

Trong hình trên, có bốn điểm p0, p1, p2 và p3. Dòng mã C ++ sau đây sẽ nội suy giữa p1 và p2, trong đó t nằm trong phạm vi [0 ... 1]:

return p1 + 0.5*t*(p2-p0 + t*(2*p0-5*p1+4*p2-p3 + t*(3*(p1-p2)+p3-p0)));

Bạn có thể nội suy bất kỳ loại giá trị nào, miễn là loại đó hỗ trợ cộng và nhân với một vô hướng.

Nếu các giá trị không nằm trên một dòng hoặc không cách đều nhau, phép nội suy catmull-rom sẽ tạo ra một đường cong trơn tru. Nội suy sẽ không tuyến tính:

Nếu không có điểm "trước" hoặc "tiếp theo" (ví dụ: ở đầu hoặc cuối của một loạt các đoạn đường cong), hãy sử dụng các phương trình sau:

p0 = 2 * p1 - p2;
p3 = 2 * p2 - p1;

Đường cong Bezier vốn dĩ đã tạo nên những đường cong mượt mà. Nội suy tuyến tính đơn giản hơn. Để nội suy tuyến tính hai điểm, bạn chỉ cần áp dụng công thức sau cho thời gian t trong [0,1]:

interpolatedPoint = startPoint * (1 - t) + endPoint * t

Khi t = 0, điểm nội suy chính xác bằng điểm bắt đầu. Tương tự, khi t = 1, điểm nội suy chính xác bằng điểm cuối. Khi t nằm trong khoảng từ 0 đến 1, nó nằm ở đâu đó trên đường thẳng giữa hai điểm.

Tôi đã rẽ nhánh và sửa đổi jsfiddle của bạn để làm rõ: http://jsfiddle.net/kevinAlbs/3em6br3b/1/

Tại sao bạn sử dụng đường cong bezier để thực hiện phép nội suy tuyến tính? Bạn chỉ có thể sử dụng phép nội suy tuyến tính để thực hiện phép nội suy tuyến tính và hoàn toàn không sử dụng các đường cong.

Nếu lý do là bạn muốn có một hệ thống nội suy dựa trên đường cong mục đích tổng quát hơn và bạn đang cố gắng để nó thực hiện phép nội suy tuyến tính cho một trường hợp sử dụng cụ thể, có một cách.

Về cơ bản, các điểm kiểm soát cần phải là điểm trên một dòng. Chẳng hạn, các điểm kiểm soát 0, 0.333, 0.666, 1.0 sẽ cung cấp cho bạn phép nội suy tuyến tính giữa 0 và 1, khi sử dụng đường cong bezier hình khối để thực hiện.

Một lần nữa, nếu bạn muốn nội suy tuyến tính, không có lý do để sử dụng một đường cong.