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).


enter image description here
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:

  1. make 'flag' segments linear instead curved
  2. create flags n segments long , @ end of path. can refer them segment index instead of matching coordinates
  3. store each moving segment's initial coordinates in property
  4. move each segment ratio of it's distance letter form on entire length of flag.

here's example sketch

try moving x-coordinate of each segment different phase create more complex motion.


Comments

Popular posts from this blog

android - Gradle sync Error:Configuration with name 'default' not found -

java - Andrioid studio start fail: Fatal error initializing 'null' -

html - jQuery UI Sortable - Remove placeholder after item is dropped -