In this session, I’ll be creating this little animation which will explain how we can translate objects along a path using different path functions

Overview ?

1. Drawing Infinity Path: creating smooth bezier curves using cubicTo() function
2. Finding the position of each point along a path: calculating the (x, y) coordinate of each point along a path using the getPosTan() method
3. Animating Progress: animating progress value using rememberInfiniteTransition()
4. Drawing Circle on the Path: draw a circle based on the progress value and coordinates calculated during the second step

Drawing Infinity Path ?

• The infinity path contains two curves
`CURVE-1 : start -> c1 -> c2 -> endCURVE-2 : end -> c3 -> c4 -> start`
• C1, C2, C3 and C4 are the control points that will help draw bezier curves
• The coordinates of all these points can be easily calculated
`// Start & End Pointsval start = Offset(0f, size.height / 2)val end = Offset(size.width, size.height / 2)// Control Pointsval c1 = Offset(size.width / 4, 0f)val c2 = Offset(3 * size.width / 4, size.height)val c3 = Offset(3 * size.width / 4, 0f)val c4 = Offset(size.width / 4, size.height)`
• To start drawing a path, first, we have to move to the start point from the origin. After that, we have to use the cubicTo() function to draw a curve from start to end through the C1 and C2 control points
• here is the documentation for the cubicTo() function, here first two coordinates are control points and the last coordinate is the end point of the curve
`/*** Adds a cubic bezier segment that curves from the current point* to the given point ([x3], [y3]), using the control points * ([x1], [y1]) and ([x2], [y2]).*/fun cubicTo(x1: Float, y1: Float,x2: Float, y2: Float,x3: Float, y3: Float)`
• Code Snippet for Drawing infinity path