Jump to content
Search Community

axterix

Members

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Posts posted by axterix

    Bezier anim porting : flash to js

    in GSAP

    Posted

    Good example Jonathan, tnx!  this make more small the code on my test.

    Now I want draw a progressive line on bezier path, like this example posted by AncientWarrior:

    See the Pen cqvJe by jonathan (@jonathan) on CodePen

     

    this code use a svg path data. but i have only a series of bezier path. I find a method for conversion on fly of path from bezier to swg ... 

    Bezier anim porting : flash to js

    in GSAP

    Posted

    Hi to all!

    my name is Patrizio, i have a question and hope find here a solution at my problem:)

     

    some year past have work to animation along bezier path in flash ... the anim figure a ship navigation.

    the page is here.

     

    now i want make a conversion of site  frontend from flash  to javascript.

    from cms data  I get a path serie like this :

     

    path0= [{x: 530.1 , y: 115.7 }, {x: 538.65 , y: 119.35 }, {x: 536.8 , y: 126.6}, {x: 534.95, y: 133.9}, {x: 521, y: 135.45}]; 
    path1= [{x: 519.9 , y: 135.55 }, {x: 523.1 , y: 144.4 }, {x: 523.6 , y: 154.5}, {x: 524.15, y: 164.65}, {x: 523.1, y: 174.05}]; 
    path2= [{x: 523.25 , y: 174.7 }, {x: 494.9 , y: 179.9 }, {x: 470.8 , y: 240.25}, {x: 446.75, y: 300.6}, {x: 300.15, y: 211.1}]; 
    path3= [{x: 300.15 , y: 210.65 }, {x: 275.55 , y: 215.85 }, {x: 244.25 , y: 225.2}, {x: 212.95, y: 234.55}, {x: 184.05, y: 247.05}]; 
    path4= [{x: 183.05 , y: 247.1 }, {x: 135.45 , y: 246.6 }, {x: 118.1 , y: 252.05}, {x: 100.7, y: 257.55}, {x: 90.5, y: 278.35}]; 
    path5= [{x: 90.7 , y: 278.95 }, {x: 104.6 , y: 268.55 }, {x: 107.55 , y: 265.4}, {x: 110.5, y: 262.3}, {x: 112.1, y: 260.2}]; 
    path6= [{x: 111.4 , y: 261.55 }, {x: 105 , y: 254.25 }, {x: 184.7 , y: 235.8}, {x: 264.45, y: 217.35}, {x: 299.2, y: 211.6}]; 
    path7= [{x: 299.5 , y: 211.65 }, {x: 434.3 , y: 300.05 }, {x: 463.2 , y: 247.75}, {x: 492.1, y: 195.5}, {x: 522.6, y: 174.7}]; 
    path8= [{x: 522.3 , y: 174.75 }, {x: 534.6 , y: 165.4 }, {x: 539.15 , y: 144.3}, {x: 543.7, y: 123.25}, {x: 529.25, y: 115.95}];  
     
    In this forum i have find some example but not respond exactly how flash in the original work.
    maybe i'm wrong :)
     
    what's the optimal method for draw the bezier path like progressive animation drawing ???
     
    someone can suggest me the right way ?
     
    sorry my poor english :)
     
    tnxxxx
×
×
  • Create New...