如何从服务器下载图像并快速显示淡入淡出动画？

Posted 2023-02-23

【中文标题】如何从服务器下载图像并快速显示淡入淡出动画？

【英文标题】：How to download image from server and display with fade in fade out animation in swift?

【发布时间】：2019-05-27 10:23:40

【问题描述】：

我想使用 alamofire 从服务器下载 10 张图像，并在 uicollectionview 的 imageview 中为该图像设置动画……就像窗口 10 上的照片应用程序一样无限循环……有人知道吗？ ..有人说要使用计时器..但我认为这不是可行的方法..`

if let employeeImage = employeeModelForDisplay?.employeeImageArray 
     self.animateImage(at: 0 , imageArray: employeeImage)
    
 func animateImage(at index: Int, imageArray:[String]) 
        if index < imageArray.count 
            self.badgeImageView.alpha = 0.3
             self.badgeImageView.setImage(link: imageArray[index], imageType: .UserImage)
            UIView.animate(withDuration: 3.0, delay: 0.5, options: [.transitionCrossDissolve], animations: 
                self.badgeImageView.alpha = 1.0
            )  (completed) in
                self.animateImage(at: index + 1, imageArray: imageArray)
            
         else 
               //self.animateImage(at: 0, imageArray: imageArray)           
        
    

`

我已经在 uicollectionviewcell 中编写了上面的代码。

【问题讨论】：

您能提供一些您目前编写的代码吗？

实际上我已经使用了 5 秒间隔的计时器和像这样 UIView.transition(with: self.badgeImageView, duration: 3.0, options: .curveEaseOut, animations: self.badgeImageView.image = self .imageArray[self.photoCount] ，完成：无）

【参考方案1】：

方法-1：

在imageView 上设置animationImages，即

let imagesArray = [UIImage(named: "image"), UIImage(named: "image1"), UIImage(named: "image2")]
imageView.animationImages = imagesArray.compactMap($0)
imageView.animationDuration = 2.0
imageView.startAnimating()

方法 2：

您可以创建自己的动画，例如，

let imagesArray = [UIImage(named: "image"), UIImage(named: "image1"), UIImage(named: "image2")]

图片动画管理方法，

func animateImage(at index: Int) 
    if index < imagesArray.count 
        self.imageView.image = self.imagesArray[index]
        self.imageView.alpha = 0
        UIView.animate(withDuration: 2.0, delay: 0.0, options: [.curveEaseInOut], animations: 
            self.imageView.alpha = 1.0
        )  (completed) in
            self.animateImage(at: index + 1)
        
     else 
        self.animateImage(at: 0)
    

用index 0启动方法，即

self.animateImage(at: 0)

Edit-1：

在将server 动画化为imageView 之前，要从images 获取images，

func downloadImages() 
    let imageUrls = [String]()
    var imagesArray = [UIImage]()

    let dispatchGroup = DispatchGroup()
    dispatchGroup.notify(queue: DispatchQueue.main) [weak self] in
        self?.imageView.animationImages = imagesArray.compactMap($0)
        self?.imageView.animationDuration = 2.0
        self?.imageView.startAnimating()
    

    imageUrls.forEach  (imageUrl) in
        if let url = URL(string: imageUrl) 
            dispatchGroup.enter()
            URLSession.shared.dataTask(with: url, completionHandler:  (data, urlResponse, error) in
                if let data = data, let image = UIImage(data: data) 
                    imagesArray.append(image)
                    dispatchGroup.leave()
                
            ).resume()
        
    

【讨论】：

如果图像离线存储，那么它工作正常....我想下载存储在缓存中的图像并对其进行动画处理..不适合我..

为了使所有图像动画化，您必须事先缓存所有图像。否则，如果它们不存在，您将如何为图像设置动画？

我已经添加了从服务器下载图像时如何处理图像的代码。您可以将 URLSession 替换为您的 Alamofire API 命中。

并尝试将您尝试过的代码添加到问题中，以便我们进行调试。

已添加..请检查

【参考方案2】：

下载图片后试试这个

UIView.transition(with: cell.ImageView, duration: 0.5, options: .transitionCrossDissolve, animations:
                    
                        if cell.ImageView.tag == indexPath.row
                        
                            cell.ImageView.image = downloadedImage
                        
                        else
                        
                            
                        
                    )