Wave animation for character converted to svg

I am having trouble animating a part of a W character that is converted to svg. This symbol is a little stylized, it has a small flag on the left side (the part I want to animate).
Right now, when the animation is running, this flag is stretched vertically at the top of the page. It should remain in the same position as it was, and the upper and lower borders of the flag should be parallel (as in the example image below).


enter image description here
Sample code:

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

      

Complete code sample -> flag animation

To better understand what kind of "wave" animation I want, here's another example (at the bottom of the page) → http://paperjs.org/

EDIT
It looks like the main reason why this animation is not working as expected is because both lines are not horizontally but diagonally.

+3


source to share


2 answers


There are several things you can do to make this easier:

  • Make the flag segments linear, not curved.
  • Design your flags so that they are N segments long and at the end of the path. Then you can refer to them by segment index instead of coordinate matching
  • Store the starting coordinates of each moving segment in the property
  • Move each segment its distance from the letterform along the entire length of the flag.


Here is an example sketch

Try moving the X-coordinate of each segment with a different phase to create more complex motion.

+3


source


Well, obviously the sine wave is centered at zero. Thus, you will have to record all the coordinates of your Y flag as you loop through looking up your start and end indices. Then add those Ys back when you animate.



0


source







All Articles