Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
axterix

Bezier anim porting : flash to js

Go to solution Solved by axterix,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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
Link to comment
Share on other sites

Tnx AncientWarrior !!!

the second link can be a solution for my problem :)

 

now i find a method for path conversion from my array to svg path.

but think what a way is this :)

Link to comment
Share on other sites

Hello axterix, Here is another example setup using your paths.. hope this helps!

 

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

var path0, path1, path2, path3, path4, path5, path6, path7, path8;

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}];

TweenMax.to(".circle", 3, {
  bezier:{
    // just change what path to animate
    values: path8 
}});

:

:)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Maybe some of the fellow GreenSockers here has a tool, or knows of an online tool to convert bezier curve arrays to SVG.

 

I usually just draw my curves and lines in Adobe Illustrator and then export to SVG.

 

For more info on manual creation, please see:
How to Draw Cubic Bezier Curves on HTML5 SVGs

https://greensock.com/forums/topic/8113-svg-path-animation-or-help-convert-path-to-bezier/
 

See also:
How to Draw Quadratic Bézier Curves on HTML5 SVGs
How to Create Complex Paths in SVGs

http://www.learnsvg.com/books/learnsvg/html/bitmap/chapter04/page04-1.php

 

Bezier Curve using GSAP example origin came from this GreenSock codepen:

See the Pen zLiux by GreenSock (@GreenSock) on CodePen

 

:)

  • Like 1
Link to comment
Share on other sites

tnx Jonathan, go to docs and came back with result :) 

Link to comment
Share on other sites

  • Solution

solved... 'in my mind'.

tnx for helping !!!!!!!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×