Flying Kid Posted August 26, 2020 Share Posted August 26, 2020 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 More sharing options...
OSUblake Posted August 26, 2020 Share Posted August 26, 2020 Explore. See the Pen 72039e2f1b06f6fab50ffed1df74fe02 by osublake (@osublake) on CodePen 6 Link to comment Share on other sites More sharing options...
Flying Kid Posted August 26, 2020 Author Share Posted August 26, 2020 6 hours ago, OSUblake said: thanks! Link to comment Share on other sites More sharing options...
swingingtom Posted November 30, 2021 Share Posted November 30, 2021 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. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now