Paper.js pathData animation onFrameとonMouseDrag

Question

pathDataメソッド[demo]を使用して線を作成しました。私は、onFrame機能で小さな波の効果をアニメーション化したいと思っています。また、onMouseDrag機能時はラバーバンド効果となり、onMouseUp機能時は元の形状に戻ります。私はPaper.jsの初心者ですので、いくつかのコードを書くとオブジェクトの形状が失われたアニメーションが得られます。コードの下にチェック

コードはどれpaperJsの専門家は、それを達成するために私を助けてください

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 ^^

を更新しました。助けていただければ幸いです。

Answer 1

まず、波の効果の問題。あなたはY軸に沿って変換するだけです。あなたが欲しいものになることができますが、私はそれを仮定しています。

通常、行が行のnormal vectorに沿って変形されていると、効果はより良くなります。法線は線の方向に垂直な方向です。変換すると、波が線に沿って移動しているように見えます。

2Dで法線を計算するのは簡単です。現在の方向を1つの平面に反映させるだけでよいからです。

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でそれを見てすることができます。

もう1つの重要な側面は、元のデータを変換したくないということです。これは私が別のコピーを作成する理由です：あなたはコピーを操作して、次のフレームにおける新たな形質転換のために古いデータを使用できるように常に、あなたの元のデータのコピーが必要になるだろう

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

を。

今、2番目のラバーバンド効果です。

あなたはすでにあなたの現在のコードに近いです。しかし、再び、元のデータを変換していますが、これは役に立ちません。

は、この効果のために、私は3つのデータセットにあなたをもたらし、あなたの元のデータの2番目のコピーを作成することをお勧め：あなたはすべての変換のための基礎として使用

1. あなたの元のラインのパスを、。
2. マウスでドラッグして操作する線のパス。
3. レンダリングする線のパス。

onMouseDragハンドラでは、セット2を変換します。あなたのonFrameハンドラで

、あなたは彼らの現在の位置とセットで元の位置の間のすべてのセグメントを補間するだろう、さらに3セットのセット2であなたが既に持っている洞波変換を適用して生成します。1.

非常に一般的なelasticOut equationを適用するか、または春に関連する実装をotherに調べることができます。