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).
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.
source to share
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.
Try moving the X-coordinate of each segment with a different phase to create more complex motion.
source to share