Paper.js pathData動畫onFrame和onMouseDrag

Question

我已創建使用pathData方法[demo]的線。我想讓這條線在onFrame函數中生成一個小波浪效果。另外，當onMouseDrag功能時，該線將是橡皮條效應，並且當onMouseUp功能時它將返回到原始形狀。我是Paper.js的新手，所以當我編寫一些代碼時，我會獲得失去物體形狀的動畫。檢查以下代碼

代碼更新

var amount = 55; 
var center = view.center; 

function onFrame(event) { 
    // Loop through the segments of the path: 
    for (var i = 0; i <= amount; i++) { 
     var path = linePath; 
     var segment = path.segments[i]; 

     // A cylic value between -1 and 1 
     var sinus = Math.sin(event.time * 3 + i); 

     // Change the y position of the segment point: 
     segment.point.y = sinus * 1 + center.y; 
    } 
} 

function onMouseDrag(event) { 
    var location = linePath.getNearestLocation(event.point); 
    var segment = location.segment; 
    var point = segment.point; 
    if (!point.fixed && location.distance < 600/4) { 
     var y = event.point.y; 
     point.y += (y - point.y)/6; 
     if (segment.previous && !segment.previous.fixed) { 
     var previous = segment.previous.point; 
     previous.y += (y - previous.y)/24; 
     } 
     if (segment.next && !segment.next.fixed) { 
     var next = segment.next.point; 
     next.y += (y - next.y)/24; 
     } 
    } 
} 

Live demo ^^

任何paperJs高手請幫我實現它。將不勝感激，感謝提前。

Answer 1

首先，波效應的問題。你只是沿着Y軸轉變。這可能是你想要的，但我認爲，事實並非如此。

通常情況下，效果會看起來好多了，如果線沿線的normal vector轉化。法線將是垂直於線的方向的方向。所以，當你改變時，它看起來就像波浪沿着線路本身一樣。

計算2D正常是很容易的，因爲你只需要反映在同一平面上的電流方向。

var deltaX = nextSegment.point.x - segment.point.x; 
var deltaY = nextSegment.point.y - segment.point.y; 
var length = Math.sqrt(deltaX * deltaX + deltaY * deltaY); 

var normal = [ deltaX/length, deltaY/length ]; 
normal = [ normal[ 1 ], -normal[ 0 ] ]; 

現在我們可以使用正常的轉換線：

toManipulate.point.x = segment.point.x + normal[0] * sinus * 3; 
toManipulate.point.y = segment.point.y + normal[1] * sinus * 3; 

您可以在my fork of your fiddle看看吧。

另一個重要方面是，你不想改變你的原始數據。這就是爲什麼我創造了另一個副本：

var linePathCached = new Path(dataLine); 
var linePath = new Path(dataLine); 

你將永遠需要你的原始數據的副本，這樣你可以操縱一個副本，並使用舊數據在下一幀的新變革。

現在，第二，你的橡皮筋效果。

你已經非常接近與您現有的代碼。但是，再次，您正在轉換您的原始數據，這是沒有用的。

對於這個效果，我建議建立自己的原始數據的第二個副本，帶給你3組數據：

1. 你原有線路路徑，您作爲所有轉換的基礎上使用。
2. 通過用鼠標拖動操作的線路徑。
3. 您正在渲染的線路徑。

在您的onMouseDrag處理程序中，您將轉換您的set 2。

在你onFrame處理程序中，你將適用於你已經擁有的正弦波轉型上設定的2和生產設置3.此外，您會插值它們的當前位置和一套自己原來的位置之間的各個細分1.

您可以應用非常常見的elasticOut equation，或查看other與彈簧相關的實現。