title: Jetpack compose how to animate multiple values
body: <p>I have couple of <code>Path</code> elements in my <code>Canvas</code> and would like to do some complex animations with every one of the <code>Path</code> lines. I am not sure how to approach this. Let's take a look at a simple path.</p>
  <pre><code>val line1Path = Path()
  line1Path.moveTo(maxTopLeftX, 0f) // top left
  line1Path.lineTo(maxBottomLeftX, size.height) // bottom left
  line1Path.lineTo(maxBottomLeftX+lineWidth, size.height) // bottom right
  line1Path.lineTo(maxTopLeftX+lineWidth, 0f) // top right
  </code></pre>
  <p>Currently I am using <code>updateTransition</code> with <code>animateFloat</code> but this way if I have to make animations for every one of the points only for this <code>Path</code> I would have to have 8 variables just for this 1 object.</p>
  <p>Also I would like to do more than just a single value to value animation so something like <code>animateFloatAsState</code> where there are keyframes and I can order my animations seems better for the job, but the issue again is I have to create 8 variables that hold every one of the line positions to just animate this object.</p>
  <p>What will be the best way to approach this?</p>