Sdwebimage: Fade animation not working for GIFs in 4.2.3

[johncodeos]

New Issue Checklist

• [x] I have read and understood the CONTRIBUTING guide
• [ ] I have read the Documentation
• [x] I have searched for a similar issue in the project and found none

Issue Info

Info | Value |
-------------------------|-------------------------------------|
Platform Name | iOS
Platform Version | 11.0~
SDWebImage Version | 4.2.3
Integration Method | cocoapods
Xcode Version | Xcode 9
Repro rate | 100%
Repro with our demo prj | yes
Demo project link | -

Issue Description and Steps

After the release of 4.2.3 version, and the fix of that blink and flash when GIFs reload in FLAnimatedImageView, fade animation doesn't work. With 4.2.2 version, it's working, but it blinks after the animation. In version 4.1.2 it's working without any problem, but it's lagging when you scroll, in 4.2.0 you fixed that lag issue but then that blink problem started. It is possible to have fade animation when you load GIFs in the latest version?

Summary:
4.1.2 version: fade animation works, but it's lagging when you scroll
4.2.0-4.2.2 version: scroll lagging fixed, but blink problem starts after fade animation ends.
4.2.3: blink problem fixed but no longer fade animation works.

[dreampiggy]

😅 It looks like the idea we want to improve the performance for FLAnimatedImageView is totally wrong. Maybe we should totally roll back to the original implementation...

Anyway, I will check this issue and maybe find a way to fix it(maybe not :)). In tomorrow.

Another word, this FLAnimatedImageView will be moved into a seperate Pod, we will try our own SDAnimatedImageView, which is a UIImageView/NSImageView subclass. And we use a SDAnimatedImage which is a UIImage/NSImage subclass to work with the memory cache. See #2140

[dreampiggy]

Could you please provide some code to do this fade animation as your description ? A demo project is more welcomed :)

[dreampiggy]

If I can't fix this issue, maybe we should do a really trick logic: Bind UIImage an assciated object FLAnimatedImage and store it in the memory cache, but this will consume more memory and that's why I do not want to do this during SD 4.2.3. But anyway, this is the last choice :)

[johncodeos]

I think will be better to use your own method for GIFs like back then 3.x.x version without the need to use different class for GIFs. I'll upload the demo soon.

[johncodeos]

Demo is done! You can download it here

[dreampiggy]

Well...Why you call sd_setImage again in the completion block ? You'd better use AvoidAutoSetImageand manurally set the image during the animation block to do a transition.

Oh, maybe this is because the completion block does not contains the NSData. I don't like current designed solution. For animation, maybe we can do more beyond this, let user provide a SDWebImageTransition instance to do this stuff instead of hack and hack again.

Anyway, I can use the last choice by associated object to store FLAnimatedImage into memory. See #2181. You try this branch to see whether can solve your ploblem.

pod 'SDWebImage/GIF', :git => '[email protected]:dreampiggy/SDWebImage.git', :branch => 'trick_code_fix_FLAnimatedImageView_fade'

[johncodeos]

I'm using sd_setImage because I want the GIFs load with animation only once when load the collection view and scroll back to the same GIFs without animation. I opened Issue about that #2073

[johncodeos]

I can't use your pod, when I'am adding it like that

pod 'SDWebImage'
pod 'SDWebImage/GIF', :git => '[email protected]:dreampiggy/SDWebImage.git', :branch => 'trick_code_fix_FLAnimatedImageView_fade'

It says:

[!] There are multiple dependencies with different sources for `SDWebImage` in `Podfile`:

- SDWebImage
- SDWebImage/GIF (from `[email protected]:dreampiggy/SDWebImage.git`, branch `trick_code_fix_FLAnimatedImageView_fade`)

and when I use only your pod

pod 'SDWebImage/GIF', :git => '[email protected]:dreampiggy/SDWebImage.git', :branch => 'trick_code_fix_FLAnimatedImageView_fade'

It says:

[!] Error installing SDWebImage
[!] Failed to download 'SDWebImage'.

[dreampiggy]

@JEKos :) Use the both of two with the git repo

pod 'SDWebImage', :git => '[email protected]:dreampiggy/SDWebImage.git', :branch => 'trick_code_fix_FLAnimatedImageView_fade'
pod 'SDWebImage/GIF', :git => '[email protected]:dreampiggy/SDWebImage.git', :branch => 'trick_code_fix_FLAnimatedImageView_fade'

[johncodeos]

It keeps saying

[!] Error installing SDWebImage
[!] Failed to download 'SDWebImage'.

[dreampiggy]

@JEKos Network issue ? or you can clone the repo and use :file to this :)

git clone -b trick_code_fix_FLAnimatedImageView_fade [email protected]:dreampiggy/SDWebImage.git

pod 'SDWebImage', :path => 'path/to/that/git/repo'

[johncodeos]

This is very weird...

JEKs-iMac:Documents jek$ git clone -b trick_code_fix_FLAnimatedImageView_fade [email protected]:dreampiggy/SDWebImage.git
Cloning into 'SDWebImage'...
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

[johncodeos]

I changed from [email protected]:dreampiggy/SDWebImage.git to https://github.com/dreampiggy/SDWebImage.git and it works

[johncodeos]

@dreampiggy What exactly want me to test with our branch? Can you give me an example?

[dreampiggy]

@JEKos Whatever demo or actual product application contains this problem, test it with this branch code, just build and run.

[johncodeos]

Oh, ok. I tested and there is not any difference

[johncodeos]

Something to mention is even when I use images(png, jpg etc) with FLAnimatedImageView, to use one UIViewController for my both (Photos and Gifs category) in my project, fade animation doesn't work. I thought it was because of the Gif, but the problem is the FLAnimatedImageView. (Propably @dreampiggy you knew that but might help someone else :P )

[dreampiggy]

Maybe you should give up this way... FLAnimatedImageView is a third-part lib we integrated. And this will be removed in the 5.x so we maybe we will not take more time on it

But I create a new feature called Image Transition. You just need to use that instead for basic transition animation. This can avoid you to call something trick code sd_setImageWithURL: again in your completion block.

See #2182, you can run our demo to check the effect

[johncodeos]

Can you give me an example how to use that?

[dreampiggy]

@JEKos See the demo there. The MasterViewController.m's cellForRowAtIndexPath: method. It's easy like UIKit's transition(with:) methods.

If you don't know about Objective-C, just use as normal:

let transition = SDWebImageTransition.init()
transition.duration = 0.5
transition.animationOptions = [.transitionCrossDissolve]
cell.imageView.sd_setImage(with: URL(string: img[indexPath.item]), placeholderImage: nil, transition:transition, progress: nil, completed: nil)

Currently API seems not really convenient. But we will use class property to make the generated interface more easy to use in 5.x(Because it needs Xcode 8, but now our current Xcode min version is Xcode 7.3, suck)

[johncodeos]

It gives that error :

[dreampiggy]

@JEKos animationOptions

[johncodeos]

Yes! It works!! Thank you very much for the help and the work you do on SDWebImage!

[johncodeos]

FLAnimatedImageView is very laggy when you scroll a Grid of Photos or Gifs in collectionView, better to get rid of it. But the fade animation works.

[dreampiggy]

@JEKos That branch does not contains the trick_code_fix_FLAnimatedImageView_fade code, which should benefit(a lot) the frame rate because now we do not need to query the disk cache each time your cell reuse. (Crazy ? But that how previous version so far works). After one of this be merged, you can try again

[dreampiggy]

@JEKos You can now use the syntax sugar on transition using class property.

let transition = SDWebImageTransition.fade
transition.duration = 0.5
cell.imageViewDisplay.sd_setImage(with: URL(string: img[indexPath.item]), placeholderImage: nil, transition:transition, progress: nil, completed: nil)

[dreampiggy]

@JEKos Try again with the feature_image_transition, the tricky code for FLAnimatedImage is merged. You may get little performance enhancement for it.

[dreampiggy]

2182 Merged. Through maybe you can still use your previous code to do transition(the fix for FL may force it work like UIImageView). But we strongly recommand to use the new image transition feature.