Fresco: For infinitely animated webp, the animation listener "onAnimationFrame" does't work

[TinoGuo]

Description

I use a infinitely animated webp with fresco, I add a listener to check every frame to draw. When the animation start, I found that the frame callback is not increasing step by 1 and the drop frame is always 0.
What expected: It should increasing step by 1 or the frameNumber + dropFrame == FrameCount.

Reproduction

just use a infinitely animated webp in fresco.

Additional Information

• Fresco version: [1.40 above]
• Platform version: [All Android device]

[erikandre]

Hi @TinoGuo

Could you please provide some example code showing what you are doing?

[TinoGuo]

@erikandre Hi, thank you for replying.
the code list below

ControllerListener<ImageInfo> controllerListener = new BaseControllerListener<ImageInfo>() {
                @Override
                public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {
                    if (animatable != null && animatable instanceof AnimatedDrawable2) {
                        ((AnimatedDrawable2) animatable).setAnimationListener(
                            new SimpleFrescoAnimationListener() {
                                @Override
                                public void onAnimationFrame(AnimatedDrawable2 drawable, int frameNumber) {
                                    Log.e("frameNumber=" + frameNumber + " dropFrame=" +
                                        drawable.getDroppedFrames() + " frameCount=" +
                                        drawable.getFrameCount());
                                    if (frameNumber == drawable.getFrameCount() - 1) {
                                        stopAnim(drawable);
                                    }
                                }

                                private void stopAnim(AnimatedDrawable2 drawable2) {
                                    //stop anim
                                }
                            });
                        animatable.start();
                    }
                }
            };
            DraweeController draweeController = Fresco
                .newDraweeControllerBuilder()
                .setUri(gift.getSource())
                .setControllerListener(controllerListener)
                .build();
            someView.setController(draweeController);

and then you will get the the log below

09-13 13:50:44.006 E: frameNumber=0 dropFrame=0 frameCount=107
09-13 13:50:44.035 E: frameNumber=1 dropFrame=0 frameCount=107
09-13 13:50:44.082 E: frameNumber=3 dropFrame=0 frameCount=107
09-13 13:50:44.129 E: frameNumber=4 dropFrame=0 frameCount=107
09-13 13:50:44.205 E: frameNumber=6 dropFrame=0 frameCount=107
09-13 13:50:44.276 E: frameNumber=9 dropFrame=0 frameCount=107
09-13 13:50:44.447 E: frameNumber=14 dropFrame=0 frameCount=107
09-13 13:50:44.559 E: frameNumber=17 dropFrame=0 frameCount=107
09-13 13:50:44.654 E: frameNumber=20 dropFrame=0 frameCount=107
09-13 13:50:44.730 E: frameNumber=22 dropFrame=0 frameCount=107
09-13 13:50:44.780 E: frameNumber=24 dropFrame=0 frameCount=107
09-13 13:50:44.840 E: frameNumber=26 dropFrame=0 frameCount=107
09-13 13:50:44.951 E: frameNumber=29 dropFrame=0 frameCount=107
09-13 13:50:45.021 E: frameNumber=31 dropFrame=0 frameCount=107
09-13 13:50:45.104 E: frameNumber=34 dropFrame=0 frameCount=107
09-13 13:50:45.192 E: frameNumber=36 dropFrame=0 frameCount=107
09-13 13:50:45.273 E: frameNumber=39 dropFrame=0 frameCount=107
09-13 13:50:45.369 E: frameNumber=42 dropFrame=0 frameCount=107
09-13 13:50:45.432 E: frameNumber=44 dropFrame=0 frameCount=107
09-13 13:50:45.522 E: frameNumber=46 dropFrame=0 frameCount=107
09-13 13:50:45.592 E: frameNumber=48 dropFrame=0 frameCount=107
09-13 13:50:45.666 E: frameNumber=51 dropFrame=0 frameCount=107
09-13 13:50:45.778 E: frameNumber=54 dropFrame=0 frameCount=107
09-13 13:50:45.883 E: frameNumber=57 dropFrame=0 frameCount=107
09-13 13:50:45.967 E: frameNumber=60 dropFrame=0 frameCount=107
09-13 13:50:46.099 E: frameNumber=64 dropFrame=0 frameCount=107
09-13 13:50:46.183 E: frameNumber=66 dropFrame=0 frameCount=107
09-13 13:50:46.333 E: frameNumber=71 dropFrame=0 frameCount=107
09-13 13:50:46.428 E: frameNumber=74 dropFrame=0 frameCount=107
09-13 13:50:46.551 E: frameNumber=77 dropFrame=0 frameCount=107
09-13 13:50:46.662 E: frameNumber=81 dropFrame=0 frameCount=107
09-13 13:50:46.735 E: frameNumber=83 dropFrame=0 frameCount=107
09-13 13:50:46.807 E: frameNumber=85 dropFrame=0 frameCount=107
09-13 13:50:46.855 E: frameNumber=87 dropFrame=0 frameCount=107
09-13 13:50:46.952 E: frameNumber=90 dropFrame=0 frameCount=107
09-13 13:50:47.050 E: frameNumber=93 dropFrame=0 frameCount=107
09-13 13:50:47.119 E: frameNumber=95 dropFrame=0 frameCount=107
09-13 13:50:47.187 E: frameNumber=97 dropFrame=0 frameCount=107
09-13 13:50:47.262 E: frameNumber=99 dropFrame=0 frameCount=107
09-13 13:50:47.328 E: frameNumber=101 dropFrame=0 frameCount=107
09-13 13:50:47.416 E: frameNumber=104 dropFrame=0 frameCount=107
09-13 13:50:47.518 E: frameNumber=0 dropFrame=0 frameCount=107
09-13 13:50:47.601 E: frameNumber=2 dropFrame=0 frameCount=107
09-13 13:50:47.654 E: frameNumber=4 dropFrame=0 frameCount=107
09-13 13:50:47.683 E: frameNumber=5 dropFrame=0 frameCount=107
09-13 13:50:47.715 E: frameNumber=6 dropFrame=0 frameCount=107
09-13 13:50:47.773 E: frameNumber=7 dropFrame=0 frameCount=107
09-13 13:50:47.814 E: frameNumber=9 dropFrame=0 frameCount=107
09-13 13:50:47.903 E: frameNumber=11 dropFrame=0 frameCount=107
09-13 13:50:47.910 E: frameNumber=12 dropFrame=0 frameCount=107
09-13 13:50:47.975 E: frameNumber=14 dropFrame=0 frameCount=107
09-13 13:50:48.050 E: frameNumber=16 dropFrame=0 frameCount=107
09-13 13:50:48.079 E: frameNumber=17 dropFrame=0 frameCount=107
09-13 13:50:48.152 E: frameNumber=19 dropFrame=0 frameCount=107
09-13 13:50:48.179 E: frameNumber=20 dropFrame=0 frameCount=107
09-13 13:50:48.248 E: frameNumber=22 dropFrame=0 frameCount=107
09-13 13:50:48.334 E: frameNumber=24 dropFrame=0 frameCount=107
09-13 13:50:48.422 E: frameNumber=27 dropFrame=0 frameCount=107
09-13 13:50:48.442 E: frameNumber=28 dropFrame=0 frameCount=107
09-13 13:50:48.476 E: frameNumber=29 dropFrame=0 frameCount=107
09-13 13:50:48.511 E: frameNumber=30 dropFrame=0 frameCount=107
09-13 13:50:48.543 E: frameNumber=31 dropFrame=0 frameCount=107
09-13 13:50:48.594 E: frameNumber=32 dropFrame=0 frameCount=107
09-13 13:50:48.640 E: frameNumber=34 dropFrame=0 frameCount=107
09-13 13:50:48.714 E: frameNumber=36 dropFrame=0 frameCount=107
09-13 13:50:48.787 E: frameNumber=38 dropFrame=0 frameCount=107
09-13 13:50:48.859 E: frameNumber=40 dropFrame=0 frameCount=107
09-13 13:50:48.926 E: frameNumber=42 dropFrame=0 frameCount=107
09-13 13:50:49.018 E: frameNumber=45 dropFrame=0 frameCount=107
09-13 13:50:49.070 E: frameNumber=47 dropFrame=0 frameCount=107
09-13 13:50:49.183 E: frameNumber=50 dropFrame=0 frameCount=107
09-13 13:50:49.280 E: frameNumber=53 dropFrame=0 frameCount=107
09-13 13:50:49.352 E: frameNumber=55 dropFrame=0 frameCount=107
09-13 13:50:49.367 E: frameNumber=56 dropFrame=0 frameCount=107
09-13 13:50:49.401 E: frameNumber=57 dropFrame=0 frameCount=107
09-13 13:50:49.433 E: frameNumber=58 dropFrame=0 frameCount=107
09-13 13:50:49.466 E: frameNumber=59 dropFrame=0 frameCount=107
09-13 13:50:49.500 E: frameNumber=60 dropFrame=0 frameCount=107
09-13 13:50:49.532 E: frameNumber=61 dropFrame=0 frameCount=107
09-13 13:50:49.615 E: frameNumber=63 dropFrame=0 frameCount=107
09-13 13:50:49.625 E: frameNumber=64 dropFrame=0 frameCount=107
09-13 13:50:49.697 E: frameNumber=66 dropFrame=0 frameCount=107
09-13 13:50:49.738 E: frameNumber=67 dropFrame=0 frameCount=107
09-13 13:50:49.766 E: frameNumber=68 dropFrame=0 frameCount=107
09-13 13:50:49.834 E: frameNumber=70 dropFrame=0 frameCount=107
09-13 13:50:49.887 E: frameNumber=72 dropFrame=0 frameCount=107
09-13 13:50:49.986 E: frameNumber=75 dropFrame=0 frameCount=107
09-13 13:50:50.032 E: frameNumber=76 dropFrame=0 frameCount=107
09-13 13:50:50.064 E: frameNumber=77 dropFrame=0 frameCount=107
09-13 13:50:50.097 E: frameNumber=78 dropFrame=0 frameCount=107
09-13 13:50:50.130 E: frameNumber=79 dropFrame=0 frameCount=107
09-13 13:50:50.163 E: frameNumber=80 dropFrame=0 frameCount=107
09-13 13:50:50.197 E: frameNumber=81 dropFrame=0 frameCount=107
09-13 13:50:50.249 E: frameNumber=83 dropFrame=0 frameCount=107
09-13 13:50:50.296 E: frameNumber=84 dropFrame=0 frameCount=107
09-13 13:50:50.329 E: frameNumber=85 dropFrame=0 frameCount=107
09-13 13:50:50.362 E: frameNumber=86 dropFrame=0 frameCount=107
09-13 13:50:50.455 E: frameNumber=89 dropFrame=0 frameCount=107
09-13 13:50:50.555 E: frameNumber=92 dropFrame=0 frameCount=107
09-13 13:50:50.645 E: frameNumber=95 dropFrame=0 frameCount=107
09-13 13:50:50.739 E: frameNumber=97 dropFrame=0 frameCount=107
09-13 13:50:50.816 E: frameNumber=100 dropFrame=0 frameCount=107
09-13 13:50:50.881 E: frameNumber=102 dropFrame=0 frameCount=107
09-13 13:50:50.975 E: frameNumber=105 dropFrame=0 frameCount=107
09-13 13:50:51.056 E: frameNumber=0 dropFrame=0 frameCount=107
09-13 13:50:51.141 E: frameNumber=3 dropFrame=0 frameCount=107
09-13 13:50:51.224 E: frameNumber=5 dropFrame=0 frameCount=107
09-13 13:50:51.302 E: frameNumber=7 dropFrame=0 frameCount=107
09-13 13:50:51.372 E: frameNumber=10 dropFrame=0 frameCount=107
09-13 13:50:51.433 E: frameNumber=11 dropFrame=0 frameCount=107
09-13 13:50:51.520 E: frameNumber=14 dropFrame=0 frameCount=107
09-13 13:50:51.629 E: frameNumber=17 dropFrame=0 frameCount=107
09-13 13:50:51.692 E: frameNumber=19 dropFrame=0 frameCount=107
09-13 13:50:51.755 E: frameNumber=21 dropFrame=0 frameCount=107
09-13 13:50:51.780 E: frameNumber=22 dropFrame=0 frameCount=107
09-13 13:50:51.870 E: frameNumber=25 dropFrame=0 frameCount=107
09-13 13:50:51.944 E: frameNumber=27 dropFrame=0 frameCount=107
09-13 13:50:52.074 E: frameNumber=31 dropFrame=0 frameCount=107
09-13 13:50:52.158 E: frameNumber=33 dropFrame=0 frameCount=107
09-13 13:50:52.230 E: frameNumber=36 dropFrame=0 frameCount=107
09-13 13:50:52.297 E: frameNumber=38 dropFrame=0 frameCount=107
09-13 13:50:52.386 E: frameNumber=40 dropFrame=0 frameCount=107
09-13 13:50:52.488 E: frameNumber=43 dropFrame=0 frameCount=107
09-13 13:50:52.594 E: frameNumber=47 dropFrame=0 frameCount=107
09-13 13:50:52.669 E: frameNumber=49 dropFrame=0 frameCount=107
09-13 13:50:52.772 E: frameNumber=52 dropFrame=0 frameCount=107
09-13 13:50:52.842 E: frameNumber=54 dropFrame=0 frameCount=107
09-13 13:50:52.938 E: frameNumber=57 dropFrame=0 frameCount=107
09-13 13:50:53.028 E: frameNumber=60 dropFrame=0 frameCount=107
09-13 13:50:53.114 E: frameNumber=62 dropFrame=0 frameCount=107
09-13 13:50:53.163 E: frameNumber=64 dropFrame=0 frameCount=107
09-13 13:50:53.245 E: frameNumber=66 dropFrame=0 frameCount=107
09-13 13:50:53.359 E: frameNumber=70 dropFrame=0 frameCount=107
09-13 13:50:53.436 E: frameNumber=72 dropFrame=0 frameCount=107
09-13 13:50:53.488 E: frameNumber=74 dropFrame=0 frameCount=107
09-13 13:50:53.561 E: frameNumber=76 dropFrame=0 frameCount=107
09-13 13:50:53.660 E: frameNumber=79 dropFrame=0 frameCount=107
09-13 13:50:53.748 E: frameNumber=82 dropFrame=0 frameCount=107
09-13 13:50:53.819 E: frameNumber=84 dropFrame=0 frameCount=107
09-13 13:50:53.902 E: frameNumber=86 dropFrame=0 frameCount=107
09-13 13:50:53.976 E: frameNumber=88 dropFrame=0 frameCount=107
09-13 13:50:53.987 E: frameNumber=89 dropFrame=0 frameCount=107
09-13 13:50:54.047 E: frameNumber=91 dropFrame=0 frameCount=107
09-13 13:50:54.126 E: frameNumber=93 dropFrame=0 frameCount=107
09-13 13:50:54.142 E: frameNumber=93 dropFrame=0 frameCount=107
09-13 13:50:54.182 E: frameNumber=95 dropFrame=0 frameCount=107
09-13 13:50:54.286 E: frameNumber=98 dropFrame=0 frameCount=107
09-13 13:50:54.316 E: frameNumber=99 dropFrame=0 frameCount=107
09-13 13:50:54.349 E: frameNumber=100 dropFrame=0 frameCount=107
09-13 13:50:54.425 E: frameNumber=102 dropFrame=0 frameCount=107
09-13 13:50:54.517 E: frameNumber=105 dropFrame=0 frameCount=107
09-13 13:50:54.543 E: frameNumber=106 dropFrame=0 frameCount=107

The frameNumber increase step by random number even 0, and I found the repeat callback is not working as expected, because it will check the frameNumber is equal to 0. Maybe you will never call the repeat callback or you are lucky enoughly.

Thanks.

[oprisnik]

Thanks @TinoGuo. Yeah, I think we should calculate dropped frames differently. Currently, they are only logged when drawing fails - not if you completely skip some frames. I'll se if there's an easy fix.

I'll also check the repeat call.

For the frame count not being continuous: This is by design. This can happen if there is not enough time to render the frame. Internally, we keep track of the animation start time and the current animation time and compute the frame to render based on that. If the UI stalls for whatever reason, you might skip frames if the next draw call is invoked too late.
It is possible to write a custom FrameScheduler that delays frames instead of dropping them, something analogous to DropFramesFrameScheduler

[TinoGuo]

Thanks @oprisnik.
Now what my tricks is check the frame number decrease, but there is a bug that it's too late to get the repeat callback and stop animation. I hope the fix coming quickly.
My product is required to show animated WebP in the duration, but thanks your suggestion, also for this awesome library.👍

[oprisnik]

I think this should have been fixed with 03a14ab06a9282ce098420217a9ca27a6ae6d587