Fixes animated frame timing (facebook#44622)

Summary: Fixes facebook#44608 . ## Changelog: [IOS] [FIXED] - Fixes animated frame timing Pull Request resolved: facebook#44622 Test Plan: Example in facebook#44608 . Reviewed By: sammy-SC Differential Revision: D57559884 Pulled By: cipolleschi fbshipit-source-id: 33eaf71c24eb83715403a67b3471dd1ac2dd9d2f
kosmydel · Jun 11, 2024 · a36e27f · a36e27f
1 parent df0f849
commit a36e27f
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/packages/react-native/Libraries/Image/RCTUIImageViewAnimated.mm b/packages/react-native/Libraries/Image/RCTUIImageViewAnimated.mm
@@ -121,6 +121,8 @@ - (void)setImage:(UIImage *)image
     // Calculate max buffer size
     [self calculateMaxBufferCount];
 
+    [self prefetchNextFrame:nil fetchFrameIndex:1];
+
     if ([self paused]) {
       [self start];
     }
@@ -167,6 +169,21 @@ - (CADisplayLink *)displayLink
   return _displayLink;
 }
 
+- (void)prefetchNextFrame:(UIImage *)fetchFrame fetchFrameIndex:(NSInteger)fetchFrameIndex
+{
+  if (!fetchFrame && !(self.frameBuffer.count == self.totalFrameCount) && self.fetchQueue.operationCount == 0) {
+    // Prefetch next frame in background queue
+    UIImage<RCTAnimatedImage> *animatedImage = self.animatedImage;
+    NSOperation *operation = [NSBlockOperation blockOperationWithBlock:^{
+      UIImage *frame = [animatedImage animatedImageFrameAtIndex:fetchFrameIndex];
+      dispatch_semaphore_wait(self.lock, DISPATCH_TIME_FOREVER);
+      self.frameBuffer[@(fetchFrameIndex)] = frame;
+      dispatch_semaphore_signal(self.lock);
+    }];
+    [self.fetchQueue addOperation:operation];
+  }
+}
+
 #pragma mark - Animation
 
 - (void)start
@@ -210,6 +227,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
       // Do not skip frame
       self.currentTime = nextDuration;
     }
+    currentFrameIndex = nextFrameIndex;
+    self.currentFrameIndex = nextFrameIndex;
+    nextFrameIndex = (currentFrameIndex + 1) % totalFrameCount;
   }
 
   // Update the current frame
@@ -219,20 +239,14 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
   currentFrame = self.frameBuffer[@(currentFrameIndex)];
   fetchFrame = currentFrame ? self.frameBuffer[@(nextFrameIndex)] : nil;
   dispatch_semaphore_signal(self.lock);
-  BOOL bufferFull = NO;
   if (currentFrame) {
     dispatch_semaphore_wait(self.lock, DISPATCH_TIME_FOREVER);
     // Remove the frame buffer if need
     if (self.frameBuffer.count > self.maxBufferCount) {
       self.frameBuffer[@(currentFrameIndex)] = nil;
     }
-    // Check whether we can stop fetch
-    if (self.frameBuffer.count == totalFrameCount) {
-      bufferFull = YES;
-    }
     dispatch_semaphore_signal(self.lock);
     self.currentFrame = currentFrame;
-    self.currentFrameIndex = nextFrameIndex;
     self.bufferMiss = NO;
     [self.layer setNeedsDisplay];
   } else {
@@ -261,17 +275,7 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
     fetchFrameIndex = nextFrameIndex;
   }
 
-  if (!fetchFrame && !bufferFull && self.fetchQueue.operationCount == 0) {
-    // Prefetch next frame in background queue
-    UIImage<RCTAnimatedImage> *animatedImage = self.animatedImage;
-    NSOperation *operation = [NSBlockOperation blockOperationWithBlock:^{
-      UIImage *frame = [animatedImage animatedImageFrameAtIndex:fetchFrameIndex];
-      dispatch_semaphore_wait(self.lock, DISPATCH_TIME_FOREVER);
-      self.frameBuffer[@(fetchFrameIndex)] = frame;
-      dispatch_semaphore_signal(self.lock);
-    }];
-    [self.fetchQueue addOperation:operation];
-  }
+  [self prefetchNextFrame:fetchFrame fetchFrameIndex:fetchFrameIndex];
 }
 
 #pragma mark - CALayerDelegate