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

完整代码示例 -> flag animation

为了更好地了解我想要什么样的 "wave" 动画，这里还有一个示例（在页面底部）-> http://paperjs.org/

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

Answer 1

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

Answer 2

您可以采取一些措施来简化此操作：

将 'flag' 线段设为直线而不是曲线
创建你的标志，使它们有 N 段长并且位于路径的末端。然后你可以通过段索引而不是匹配坐标来引用它们
将每个移动段的初始坐标存储在属性
在旗帜的整个长度上，按照它与字母形式的距离的比例移动每个线段。

Here's an example sketch

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

转换为 svg 的角色的波浪动画

Wave animation for a character converted to svg

javascript

animation

svg

paperjs