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 -> end
CURVE-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 Points
val start = Offset(0f, size.height / 2)
val end = Offset(size.width, size.height / 2)
// Control Points
val 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

Finding the position of each coordinate along a path ?

  • First let’s understand the PathMeasure() function, in the PathMeasure function we have to set the given path for which we want to do the calculations (here we will be passing the infinity path that we drew in the first step)
  • after that, we can call getPosTan() method which can give the position and tangent coordinate along a path
  • in getPosTan() method we have to pass the distance at which we want to calculate the position and tangent
for eg- if we pass distance = 0, then we will get the position and tangent
of the start co-ordinate and if we pass distance = lengthOfPath then
we will get the position and tangent of the end co-ordinate- we will be changing this distance value with animation progress 
in third step
  • position and tangent values will be stored in pos and tan float array

Animating Progress ⚡

  • In the getPosTan() method we have to provide the distance value at which we want to calculate position and tangent coordinate, so this distance value will be calculated using the following formula
distance = progress * length- here progress value will change 0 -> 1f based on the animation- length is the length of the path we received using getLength() method inside pathMeasure function
  • Now we have to write infinite transition for changing the progress value

Draw Circle on the Path ?

  • once we have a position of a point along a path then we can easily draw a circle on that point

Complete Code ?‍?

Source link