Jump to content
GreenSock

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

TweenMax Bezier and Canvas quadraticCurveTo fitting

Recommended Posts

Hi, i'm trying to get tweenmax bezier tween fit with a canvas quadraticCurve.

The canvas QuadraticCurve is supposed to draw the trajectory of a tweening object.

That curve datas are given by 

BezierPlugin.bezierThrough

So far, start and end point seems to fit, but the canvas bezier curve middle point is higher than the tween bezier curve.

Could please someone help me understand what i'm doing wrong?

 

See the Pen ggdeWP by www_ (@www_) on CodePen

Link to comment
Share on other sites

Hard to tell. Your code is hard to read, and it looks like your mixing CSS and canvas together. That might be messing your coordinates up.

 

If you want a quadratic looking curve, why don't you just start with a one to begin with? It's easy enough to calculate a point through the curve. These use SVG, but it works exactly the same using canvas.

 

See the Pen c298db6e99eef0b9258968aa148a6d0c?editors=0010 by osublake (@osublake) on CodePen

See the Pen pbEBWP?editors=0010 by osublake (@osublake) on CodePen

 

And a rocket that makes it halfway...

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

 

Sine.easeInOut is the most accurate ease for ballistics.

  • Like 4
Link to comment
Share on other sites

OMG!  

Thanks for your help, it seems your way to go is much more straightforward.

 

I'll dig it then come back if needed, thank you again.

  • Like 1
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.
×