javascript - Wave animation for a character converted to svg -
i have problems animating part of character 'w' converted svg. character styled out bit, has small flag @ left side (the part want animate).
right when animation going, flag stretched vertically @ top of page. should stay @ same position was, top , bottom line of flag should in parallel( in image sample below).
code sample:
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, // wave animation height segments:[] // flag segments } return model; }; var initializeflag = function(){ var segments = path.segments; //... for(var = flag.startindex; <= flag.endindex; i++ ){ flag.segments.push(segments[i]); } flags.collection.push(flag); //adds 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 = 0; < 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); } } }; //...
full code sample -> flag animation
to greater understanding kind of "wave" animation want, here 1 example(at bottom of page) -> http://paperjs.org/
edit
looks main reason why animation not working both lines not positioned horizontally diagonally..
there's few things can make easier:
- make 'flag' segments linear instead curved
- create flags n segments long , @ end of path. can refer them segment index instead of matching coordinates
- store each moving segment's initial coordinates in property
- move each segment ratio of it's distance letter form on entire length of flag.
try moving x-coordinate of each segment different phase create more complex motion.
Comments
Post a Comment