Flicker starts if image sequence is more then 17

Question

Flicker starts if image sequence is more then 17

im-aditya opened this issue 7 years ago · 11 comments

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;
  }

Answer 1 · 2018-05-14T05:20:31.000Z

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.

Answer 2 · 2018-05-14T10:43:57.000Z

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.

Answer 3 · 2018-05-15T05:44:19.000Z

@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

Answer 4 · 2018-05-15T13:13:54.000Z

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.

Answer 5 · 2018-05-15T17:43:03.000Z

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

Answer 6 · 2018-05-18T04:09:58.000Z

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

Answer 7 · 2018-05-21T07:14:17.000Z

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

Answer 8 · 2018-05-21T08:01:53.000Z

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

Answer 9 · 2018-05-24T08:26:32.000Z

@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.

Answer 10 · 2018-05-24T18:32:27.000Z

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.

Answer 11 · 2018-05-27T06:21:23.000Z

@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