Jump to content
GreenSock

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

bezier circle

Go to solution Solved by Diaco,

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

I'm working on a loader, using bezier to draw a circle. But following math I got a straight line at the top of my path.

 

my tween is basically

TweenMax.to(pillole[e],5, {bezier:{
type:"cubic",
values:[{x:0, y:r},{x:-c*r, y:r}, {x:-r, y:c*r}, {x:-r, y:0},{x:-r, y:0}, {x:-r, y:-c*r}, {x:-c*r, y:-r}, {x:r, y:-r},{x:0, y:-r}, {x:c*r, y:-r}, {x:r, y:-c*r},{x:r, y:0}, {x:r, y:0}, {x:r, y:c*r}, {x:c*r, y:r}, {x:0, y:r}], autoRotate:false},repeat:1,ease:Linear.easeNone,yoyo:false});

any thought???

 

cheers

 

marco

See the Pen RPEEMx by anon (@anon) on CodePen

  • Like 1
Link to comment
Share on other sites

I didn't look at your math, so I don't know what you did, but a circle is octagon shaped.

 

Here's an example using SVG. I added some extra code in there to help visualize it, but the bezierPlugin is using data from the values array.

 

See the Pen xGmMzj by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

Nice job, Blake!

Link to comment
Share on other sites

  • Solution

Hi jjletho  :)

 

pls try this :

var R = 200 ; 
TweenMax.to("#myObj", 5 ,{
bezier:{curviness:1.5,values:[{x:0,y:0},{x:-R/2,y:R/2},{x:0,y:R},{x:R/2,y:R/2},{x:0,y:0}]}
,ease:Power0.easeNone,repeat:-1});

btw in this case you can have same motion with this :

var R = 200 , El = document.getElementById('myObj') ;
TweenMax.to(El, 5 ,{ transformOrigin:"50% "+(R/2+El.offsetWidth/2)+"px", rotation:360 , ease:Power0.easeNone , repeat:-1 });

See the Pen bdOJmz by MAW (@MAW) on CodePen

 
  • Like 5
Link to comment
Share on other sites

I like Diaco's second solution for creating circular motion. There's no point in using a Bezier if you don't need to.

 

I updated the my example using the ratio you are using, which is a lot more accurate.I added a real circle to test it, and it's spot on.

 

Ratio: 0.552284749831

Source: http://stackoverflow.com/a/27863181/2760155

 

CodePen: 

See the Pen xGmMzj by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

thanks Blake and Diaco! you did a very good explaination :)

 

I also did a svg circle from bezier correctly but not using the same coords as a path with bezier plug-in.

Btw your solutions are brilliant and will help me very much!

 

jj

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.

×