波形动画转换为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);
       }
    }
};
//...

完整代码示例 - > 标志动画

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

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

Answer 1

您可以采取一些措施来简化这项工作：

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

这是一个示例草图

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

Answer 2

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