Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Flicker starts if image sequence is more then 17

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
micahryecommented, May 14, 2018

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.

0reactions
b-asafcommented, May 27, 2018

@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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Image sequence flickering? - GSAP - GreenSock
Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine...
Read more >
Re: image flickering from adjustment layer - Page 6 - 6201773
Flicker starts as soon as my opacity mask kicks in and then continues to the end of the video even though that mask...
Read more >
stabilization of flicker-like effects in image sequences through ...
Abstract. In this paper, we address the problem of the restoration of image sequences which have been affected by local intensity modifications (local ......
Read more >
Problem creating a image sequence in Vegas Pro 17 latest build
Hi, In the past I have created time-lapse videos out of imported jpegs using the import media> click on image sequence start/end boxes,...
Read more >
How do I remove the flicker between changing the image that ...
You are still doing something wrong. If the images are preloaded when the class is created and before the animation starts then it...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

New-NetNat support check not working as intended

Next page

New breaking error with latest kit and vite 4.0.0...