SDWebImage/SDWebImageSwiftUI

Synchronize animated image playback inside of LazyStack

Open

#300 opened on Mar 3, 2024

View on GitHub
 (14 comments) (0 reactions) (0 assignees)Swift (256 forks)github user discovery
feature requestgood first issue

Repository metrics

Stars
 (2,546 stars)
PR merge metrics
 (PR metrics pending)

Description

The application I am working on needs to display a lot of animated "emotes" within text messages, often multiple occurrences of the same image, which get out of sync when the individual messages are being scrolled inside of a lazy stack. Since the playback is paused when they move out of view and resumed at the old position when they reappear, the other images have moved on to different frames in the meantime.

Now, I feel like the synchronization aspect should probably be on me (the actual application) to handle, but I can't figure out any way to control the playback of animated images. The image player is not exposed, neither are there methods to control it indirectly.

Would be great to have an option for that, since otherwise the only way I see for me to move forward is building my own custom wrapper for SDWebImage that enables me to do so, which would be a shame compared to just using this more matured library.

import SwiftUI
import SDWebImageSwiftUI

struct ContentView: View {
  let imageURL = URL(string: "https://cdn.betterttv.net/emote/5a8314b61686393232d31027/3x.gif")!

  var body: some View {
    ScrollView {
      LazyVStack {
        ForEach(1...200, id: \.self) { _ in
          AnimatedImage(url: imageURL)
            .resizable()
            .frame(width: 25, height: 25)
        }
      }
    }
  }
}

https://github.com/SDWebImage/SDWebImageSwiftUI/assets/80157503/77a8abd8-625a-4f05-b278-f9f44f23b366

Contributor guide