Proper way to draw dynamic number of objects with <Drawing/> depending on timestamp

[xcoderreal]

I was hoping to draw a dynamic number of objects with a <Drawing drawing={draw} />, where the objects properties change as time goes on.

My first approach was (simplified code):

const clock = useClockValue();
const draw = ({ canvas, paint, timestamp }) => {
  paint.setColor(Skia.Color("#555"));
  const alpha = someFunctionDependingOnTimestampMs(clock.value);
  paint.setAlphaf(alpha);
  canvas.drawCircle(cx, cy, paint);
}
<Canvas>
  <Drawing drawing={draw} />
</Canvas>

However I didn't get what's expected (alpha value changing as time goes on). When I touch on the canvas and move along, the alpha does update though.

I then tried to use the timestamp parameter but found the same behavior.

I feel that I must be missing some fields or use incorrectly, but I couldn't find any example code for now.

Besides, is there a way to do canvas.drawCircle() (etc) within a callback passed to using a SkValue (e.g., those declaratively defined with useComputedValue(method, [clock])?

Thanks!

[wcandillon]

yes that's a nice catch, here we don't detect that the clock animation value is part of the drawing. If you know that the animation is continuous (every frame will draw something different) you can simply use: <Canvas mode="continuous". If not, we may need to update the Drawing component to register animation values.

[xcoderreal]

Thanks William, that works like a charm!

Besides that, may I confirm whether by default, we update on touch events?

[xcoderreal]

Another questions: For my better understanding of Skia API, if I really want to manually register canvas to "listen" to changes in const clock = useClockValue(), is there a way to do so without using mode="continuous"?

[wcandillon]

Not in a way that would be "clean", we would need to update the API on our side to do so.

[xcoderreal]

Thanks! Appreciate the super quick response :)

[wcandillon]

We're updating our API to support animation out of the box using the createPicture() function.
See https://github.com/Shopify/react-native-skia/pull/994/files#diff-1d28bc14d87bdd6633008cae78407886475693af42e308c5885dc78119e7874fR87

The idea is now you can generate a picture object that can be computed like any other animation value and you can use it in your drawing using <Picture picture={picture} />