Jump to content
Search Community

motionPath - bezier

Flying Kid test
Moderator Tag

Recommended Posts

Hello all,

 

i don't understand

 

 - how are the control points coordinates calculated, and what exactly are the control points ?

-  what is the unit of x, y ( pixels ? )

 

// cubic bezier coordinates (anchor, two control points, anchor, two control points, etc.):
motionPath: {
  path: [{x:0, y:0}, {x:20, y:0}, {x:30, y:50}, {x:50, y:50}],
  type: "cubic"
}

Thanks !

 

Steve

Link to comment
Share on other sites

  • 1 year later...

It wasn't easy for me to understand the composition of a MotionPath  path:[]  property when type:cubic

 

Especially the following statement confused me : 

Quote

in the following order: anchor, two control points, anchor, two control points, anchor, etc.

 

I wasn't able to correctly identify the sequence. Especially that the first anchor is always the StartPoint(M moveTo). 

I was able to produce a single curve : M+C ( 4 items array ) 

 

But attempts to produce more complex path :  M+C+C led to animated object to disapear.

No hints from the console.

Even if the provided points length was invalid ( If correctly understood, a valid length for a cubic motionpath is always 3n+1 )

 

And to be fully honest, Once understood, we see how much a conversion is easy.
Just like a no-brainer : 
 

<path d="M0,0 C50,0 100,50 100,100"></path>
//  "M0,0      C50,0       100,50       100,100" // simply remove letters from svg data path
//  " 0,0       50,0       100,50       100,100"
// and that's it, make points objects
//[{x:0,y:0},{x:50,y:0},{x:100,y:50},{x:100,y:100}]

 

No matter how long the path is, it's simply follow the sequence defined in the svg. That's brilliant. But it seems I wasn't prepared for such easy stuff.

 

So a cubic motion path array is

StartPoint(anchor), Curve1(controlPoint1,controlPoint2,anchor),Curve2(controlPoint1,controlPoint2,anchor),etc...

 

At least now, this is written here for future me.

  • Like 3
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.
×
×
  • Create New...