波形动画转换为svg的角色

Question

我有问题动画转换为svg的角色'W'的一部分。这个角色有点样式，左侧有一个小旗（我想要制作动画的部分）。
现在，当动画进行时，该标志在页面顶部垂直拉伸。它应该保持在相同位置的位置，标志的顶部和底部线应该并行（如下面的图像示例中所示）。

代码示例：

var pathData = "M253.477,175...";
var path = new paper.Path(pathData);
var flags = {
    collection:[]
}
var Flag = function(){
  var model = {
      startIndex:0, // start point in path.segments array
      middleIndex:0,// middle point in path.segments array
      endIndex:0, // end point in path.segments array
      height:20, // the wave animation height
      segments:[] // only flag segments
  }  
  return model;
};

var initializeFlag = function(){
    var segments = path.segments;
    //...   
    for(var i = flag.startIndex; i <= flag.endIndex; i++ ){
        flag.segments.push(segments[i]);
    }
    flags.collection.push(flag); //adds to flags collection
};

var doWaveAnimation = function(segment, counter, height, top, e){
    var sinus = Math.sin(e.time * 3 + counter);
    segment.point.y = sinus * height + top;  
};

var animateFlags = function(e){
   var collection = flags.collection;
   for(var i = 0; i < collection.length; i++){
      var flag = collection[i];

      for(var s = flag.startIndex, n = flag.endIndex -1;
         s < flag.middleIndex && n > flag.middleIndex -2;
         s++, n--){

          //top line
          doWaveAnimation(flag.segments[n], n, flag.height, 180, e);
          //bottom line
          doWaveAnimation(flag.segments[s], s, flag.height, 200, e);
       }
    }
};
//...

完整代码示例 - ＆gt; flag animation

为了更好地理解我想要什么样的“波浪”动画，这里也是一个例子（在页面底部） - ＆gt; http://paperjs.org/

编辑
看起来这个动画不能正常工作的主要原因是两条线都不是水平放置而是对角放置..

Answer 1

您可以采取一些措施来简化这一过程：

1. 制作＆＃39;标志＆＃39;段线性而不是弯曲
2. 创建标记，使它们长N段并位于路径的末尾。然后你可以通过段索引而不是匹配坐标来引用它们
3. 将每个移动网段的初始坐标存储在属性
中
4. 在旗帜的整个长度上以字母形式的距离比例移动每段。

Here's an example sketch

尝试使用不同的相位移动每个线段的X坐标以创建更复杂的运动。

Answer 2

显然，正弦波以零为中心。因此，当您循环查找开始和结束索引时，您将不得不记录所有标志Y坐标。然后在制作动画时将这些Y添加回来。