Jump to content

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

bezier circle

Recommended Posts


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:{
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???





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

Nice job, Blake!

Link to comment
Share on other sites

Hi jjletho  :)


pls try this :

var R = 200 ; 
TweenMax.to("#myObj", 5 ,{

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



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!



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.