Flicker starts if image sequence is more then 17

[im-aditya]

I am using this package and testing it on Android 'Moto G (5S) Plus - 7.1.1'. I am using React Native 0.54.4 & React 16.3.1.

My animation sequence is running correct of the number of images are less then 17-18. After that a rapid flicker starts appearing. Any idea why is that happening ?

Here is my code:

<View style={{ flex: 1 }}>
          <AnimatedSprite
            sprite={rockSprite}
            animationFrameIndex={rockSprite.animationIndex('ALL')}
            coordinates={{
              top: 0,
              left: 0,
            }}
            size={{
              width: rockSprite.size.width * 0.5,
              height: rockSprite.size.height * 0.5,
            }}
            loopAnimation={true}
            fps={12} />
    </View>

And, in the same file after the render function:

const getArrayList = () => {
  let arr = [];
  for (let i = 0; i < 17; i++) {
    arr.push(i);
  }
  return arr;
}

const rockSprite = {
  name: "rock",
  size: { width: 720, height: 1000 },
  animationTypes: ['JUMP', 'WALK', 'EAT', 'CELEBRATE', 'DISGUST', 'ALL'],
  frames: image.getHighEnergyAssets(),
  animationIndex: function getAnimationIndex(animationType) {
    switch (animationType) {
      case 'JUMP':
        return [0];
      case 'WALK':
        return [1, 2, 3, 0];
      case 'EAT':
        return [4, 5, 4, 0];
      case 'CELEBRATE':
        return [6, 7, 6, 0, 6, 7, 6, 0];
      case 'DISGUST':
        return [0, 8, 8, 8, 8, 0];
      case 'ALL':
        return getArrayList();
    }
  }

This is how I have added my assets:

getHighEnergyAssets: () => {
    const assetsList = [];
    assetsList.push(require("src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_001.png"));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_002.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_003.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_004.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_005.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_006.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_007.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_008.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_009.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_010.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_011.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_012.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_013.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_014.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_015.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_016.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_017.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_018.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_019.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_020.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_021.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_022.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_023.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_024.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_025.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_026.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_027.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_028.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_029.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_030.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_031.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_032.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_033.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_034.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_035.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_036.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_037.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_038.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_039.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_040.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_041.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_042.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_043.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_044.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_045.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_046.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_047.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_048.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_049.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_050.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_051.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_052.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_053.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_054.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_055.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_056.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_057.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_058.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_059.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_060.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_061.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_062.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_063.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_064.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_065.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_066.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_067.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_068.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_069.png'));
    assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_070.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_071.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_072.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_073.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_074.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_075.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_076.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_077.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_078.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_079.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_080.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_081.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_082.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_083.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_084.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_085.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_086.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_087.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_088.png'));
    // assetsList.push(require('src/res/assets/images/rock_sequence/HighEnergy_Anim_V01_089.png'));
    return assetsList;
  }

[micahrye]

This is probably do to memory issues, with so many images you may not be able to have everything in memory and so you are hitting memory loading issues that results in flickers. At bottom of page I make a note about application memory.

You can test by only having this animation to ensure that there are not a lot of other images etc. in memory. Image size will play a factor too. In general mobile devices and application space is constrained.

[im-aditya]

I finally switched to WebP format. That is working fine for me.

The only drawback is I cannot track when one animation cycle ends so that I can switch the animations.

[b-asaf]

@im-aditya,
I also encounter the flicker issue in Android, in iOS it works great.
did you convert all 3 sizes or just one?

• for every image I have 3 copies: imageA.jpg, imagA@2x.jpb and imageA@3x.jpg

My jpg images are about 4-5-6kb and the webP are about the same, I don't see so much difference in size. Is it really going to help? what was the size change for you?
Thanks

[im-aditya]

For me it worked.. I experimented with 700x1000 sized images and it is working fine. Also the number of images are 70-90 in my case.

[b-asaf]

Did you try to the animated sprite without looping?
Did you manage to play animation only once?

[im-aditya]

No I mean instead of using this library I used animated WebP.

[b-asaf]

@im-aditya,
what is the package you used?

[im-aditya]

https://github.com/TGPSKI/react-native-webp-support

[b-asaf]

@im-aditya
thanks, I will try that.
I change the format of the image to webP and it still flickers when the user tap on the image in order to start the animation.

[im-aditya]

I created an animated webP using this tool : https://ezgif.com/webp-maker
then used it. Something similar to gifs with better quality & smaller size.

As I have mentioned in my previous comment, I am not using this library.

[b-asaf]

@im-aditya, thanks for the help but I "came" from there.
I can't control the GIF that way. I can't make it play once and only after the user click on it.

I already had GIF and I "moved" to this solution - the sprite package - because I needed the control.
Thanks for the help any way