search

micahrye / react-native-animated-sprite

React Native component for animated sprite and tweening
MIT License
147 stars 14 forks source link

Flicker starts if image sequence is more then 17 #5

Open im-aditya opened 6 years ago

im-aditya commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

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 commented 6 years ago

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 commented 6 years ago

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

im-aditya commented 6 years ago

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

b-asaf commented 6 years ago

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

im-aditya commented 6 years ago

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

b-asaf commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

@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