Skia Animation

pearleye

unread,

Apr 30, 2023, 7:30:16 PM4/30/23

to skia-discuss

Hi

Just recently I started learning about SKIA since I have a requirement to do some 2d animated renderings with the intention of benchmarking GPUs.

I came across animated samples in SKIA fiddle and I'm not sure how is the animation done.

For e.g., In the below fiddle example, I have a few questions,

https://fiddle.skia.org/c/@SkPath_quadTo_example_parametric_animated

1) I understand that the draw method renders a single frame but how is it getting animated? Are they making multiple draw() calls to animate it?

2) Under the options menu I see a checkbox for animation which I believe is responsible for the animation. So what is the SKIA API that gets triggered in the background which causes the animation?

3) What is the value of the variable frame? Is it always either 0 or 1?

Thank you.

Joe Gregorio

unread,

Apr 30, 2023, 9:31:02 PM4/30/23

to skia-d...@googlegroups.com

On Sun, Apr 30, 2023 at 7:30 PM pearleye <muthuka...@gmail.com> wrote:

Hi

Just recently I started learning about SKIA since I have a requirement to do some 2d animated renderings with the intention of benchmarking GPUs.

I came across animated samples in SKIA fiddle and I'm not sure how is the animation done.
For e.g., In the below fiddle example, I have a few questions,
https://fiddle.skia.org/c/@SkPath_quadTo_example_parametric_animated

1) I understand that the draw method renders a single frame but how is it getting animated? Are they making multiple draw() calls to animate it?

Yes, the fiddle application draws all the frames, writes them out to disk as PNGs and then runs ffmpeg over those

PNG files to produce the webm file.

2) Under the options menu I see a checkbox for animation which I believe is responsible for the animation. So what is the SKIA API that gets triggered in the background which causes the animation?

3) What is the value of the variable frame? Is it always either 0 or 1?

There is no animation API used in fiddle, just drawing individual images as explained above.

In that particular fiddle the animation is set to run for 4 seconds. The framerate is fixed at 60 fps, so 4*60=240

individual PNGs will be written, the value of `frame` starts at zero, and for each PNG the value of `frame` will be incremented 1/240.

Thanks,

-joe

Thank you.

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/b659118e-9af3-406f-91b3-d9822fef049bn%40googlegroups.com.

pearleye

unread,

May 1, 2023, 4:06:25 PM5/1/23

to skia-discuss

@Joe, Thanks for your input.

I'm trying to implement the same fiddle example via an Android application but it doesn't animate. Can you let me know if I'm doing it the right way?

https://fiddle.skia.org/c/@SkPath_quadTo_example_parametric_animated

1) From the Android app I make a JNI call passing an Android bitmap (android.graphics.Bitmap) and the frame value (1 to 240).

2) On the native side, I have used the draw & other methods from the fiddle example to draw onto the bitmap.

3) The 1st & 2nd points happen in a continuous loop with the frame value incrementing from 1 to 240, but I don't see the animation happening. All I see is a static image, even that is not the same as I see in the fiddle example. I've attached a screenshot. Ignore the value (60) that you see in the circle which is supposedly the fps, I used an open-source library to calculate it.

What am I missing to get it animated as seen in the fiddle?

Thank you.

Joe Gregorio

unread,

May 1, 2023, 4:30:44 PM5/1/23

to skia-d...@googlegroups.com

On Mon, May 1, 2023 at 4:06 PM pearleye <muthuka...@gmail.com> wrote:

@Joe, Thanks for your input.

I'm trying to implement the same fiddle example via an Android application but it doesn't animate. Can you let me know if I'm doing it the right way?

https://fiddle.skia.org/c/@SkPath_quadTo_example_parametric_animated

1) From the Android app I make a JNI call passing an Android bitmap (android.graphics.Bitmap) and the frame value (1 to 240).
2) On the native side, I have used the draw & other methods from the fiddle example to draw onto the bitmap.
3) The 1st & 2nd points happen in a continuous loop with the frame value incrementing from 1 to 240, but I don't see the animation happening. All I see is a static image, even that is not the same as I see in the fiddle example. I've attached a screenshot. Ignore the value (60) that you see in the circle which is supposedly the fps, I used an open-source library to calculate it.

The value of `frame` should be between 0 and 1. I.e. in fractions:

[0, 1/240, 2/240, 3/240, ...., 239/240]

Or as decimals:

[0, 0.00417, 0.0083, ... ]

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/a8cf51c1-c301-44a9-ba24-e99f469583afn%40googlegroups.com.

pearleye

unread,

May 1, 2023, 5:54:54 PM5/1/23

to skia-discuss

@Joe, I changed the frame calculation as you mentioned but it's still the same static image and no animation!

I have shared my source code in the below repo, Can you kindly have a look?

https://github.com/pearleye/Skia2dSample

Basically, I've used the below official Android example for skia animation and replaced the native side drawing logic with the one seen in the above-mentioned fiddle example.

https://skia.googlesource.com/skia/+/chrome/m39/platform_tools/android/examples/hello_skia_app/README?autodive=0%2F

Thank you.