如何將tableView的特定行單元格的圖像設置為動態圖像

Question

如下圖 gif 所示，在 tableView 的特定行中，播放歌曲的圖像（Just Dance.mp3）變為動態圖像。

我的主要問題是如何在我的應用程序中實現這種效果，使用 GIF 圖像或其他方法？ 在這里需要建議。

我想達到什么效果：

1. 播放歌曲時，特定行單元格的圖像變為動態圖像。 （主要問題）
2. 如果歌曲暫停，則該動態圖像停止播放。
3. when another song is selected to play, the previous song's(cell) image is resume to its album artwork.

這是我的剪輯代碼，我還沒有測試它，因為我不確定我是否應該使用 GIF 或其他方法。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell

        if resultSearchController.isActive {
            cell.addButton.tag = indexPath.row
            cell.songTitle.text = filteredTableData[indexPath.row].songName
            cell.songArtist.text = filteredTableData[indexPath.row].artistName
            cell.songArtwork.image = filteredTableData[indexPath.row].albumArtwork
            return cell
        } else {
            cell.addButton.tag = indexPath.row
            cell.songTitle.text = tableData[indexPath.row].songName
            cell.songArtist.text = tableData[indexPath.row].artistName
            cell.songArtwork.image = tableData[indexPath.row].albumArtwork
            return cell
        }

        // set image of specific tableView row cell to GIF image
        if indexPath.row == SongData.currentTrack {
            let image = UIImage(named: "playing-gif-image")
            cell.songArtwork.image = image
        } else {
            // do nothing
        }
    }

==================================================== ==================

根據 ATV 的回答更新我的代碼，目前我使用 static 圖像來設置不同的播放單元 state。 好吧，我對這個花哨CAShapeLayer很感興趣 :)，我需要時間來了解它，然后為特定的單元格設置動態圖像。

/// Model, SongData.swift

import UIKit

class SongData: NSObject, NSCoding {

    var songName: String
    var artistName: String
    var albumName: String
    var albumArtwork: UIImage
    var url: URL

    static var songList = [SongData]()
    static var shuffleSongList = [SongData]()
    static var currentTrack = 0
    static var showCurrentPlayingSong = false
    static var repeatSequence = "repeatList"
    static var isPlaying = false

    enum PlayingCellState {
        case nonState
        case playing
        case paused
    }

    init(songName: String, artistName: String, albumName: String, albumArtwork: UIImage, url: URL) {
        self.songName = songName
        self.artistName = artistName
        self.albumName = albumName
        self.albumArtwork = albumArtwork
        self.url = url
    } 
...
}

///CustomCell.swift

import UIKit

class CustomCell: UITableViewCell {

    @IBOutlet weak var songTitle: UILabel!
    @IBOutlet weak var songArtist: UILabel!
    @IBOutlet weak var songArtwork: UIImageView!
    @IBOutlet weak var addButton: UIButton!

    override func awakeFromNib() {
        super.awakeFromNib()
        songArtwork.layer.cornerRadius = 8.0
    }

    func config(forState state: SongData.PlayingCellState) {
        // setup your cell depends on state
        switch state {
        case .nonState:
            print("nonState") //update cell to default state
        case .playing:
            songArtwork.image = UIImage(named: "Play")
        case .paused:
            songArtwork.image = UIImage(named: "Pause")
        }
    }
}

///TableViewController

 // use for track cell state, for playing dynamic image usage
    func stateForCell(at indexPath: IndexPath) -> SongData.PlayingCellState {
        // when firstly open the tab song list/app(with no song played), do not attach playing state image
        if SongData.songList.count == 0 {
            return .nonState
        } else {
            if indexPath.row == SongData.currentTrack {
                return SongData.isPlaying ? .playing : .paused
            } else {
                return .nonState
            }
        }
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell

        if resultSearchController.isActive {
            cell.addButton.tag = indexPath.row
            cell.songTitle.text = filteredTableData[indexPath.row].songName
            cell.songArtist.text = filteredTableData[indexPath.row].artistName
            cell.songArtwork.image = filteredTableData[indexPath.row].albumArtwork
            // return cell
        } else {
            cell.addButton.tag = indexPath.row
            cell.songTitle.text = tableData[indexPath.row].songName
            cell.songArtist.text = tableData[indexPath.row].artistName
            cell.songArtwork.image = tableData[indexPath.row].albumArtwork
            // return cell
        }

        cell.config(forState: stateForCell(at: indexPath))
        return cell
    }

/// 更新，終於成功了，涉及到lottie-ios庫，在CustomCell.swift中導入，在playAnimation()中實現，可惜animation重復模式不起作用，Z6F1BBBF25ED1523922 EEEE甚至我設置了loopMode。 我稍后會搜索有什么問題。

import UIKit
import Lottie

class CustomCell: UITableViewCell {

    @IBOutlet weak var songTitle: UILabel!
    @IBOutlet weak var songArtist: UILabel!
    @IBOutlet weak var songArtwork: UIImageView!
    @IBOutlet weak var view: UIView!
    @IBOutlet weak var addButton: UIButton!

    let animationView = AnimationView()

    override func awakeFromNib() {
        super.awakeFromNib()
        songArtwork.layer.cornerRadius = 8.0
    }

    func playAnimation(){
        let animation = Animation.named("366-equalizer-bounce")
        animationView.animation = animation
        // weird thing is that animation repeat is not working here...
        animationView.loopMode = LottieLoopMode.repeat(3600.0)
        animationView.play()

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])
    }

    func config(forState state: SongData.PlayingCellState) {

        // setup your cell depends on state
        switch state {
        case .nonState:
            print("nonState")
            view.isHidden = true
        case .playing:
            view.isHidden = false
            playAnimation()
        case .paused:
            view.isHidden = false
            // to set this latter 
            // songArtwork.image = UIImage(named: "Pause")
        }
    }
}

Answer 1

1. 為了實施：

“那是使用的 GIF 圖像還是其他動態圖像？” - 您可以選擇以下任何更適合您的選項：

• 您可以使用 GIF 圖片（類似問題）
• 您甚至可以使用UIBezierPath和CAShapeLayer來繪制它（ 一些示例）
• 或者使用可以與 Adobe After Effects 動畫一起使用的 lottie-ios庫（例如，你可以使用這個）

---

2. 更改單元格的 state：

    //eg add it to your presenter or wherever you are storing info about `currentTrack`... enum PlayingCellState { case default case playing case paused... }... func stateForCell(at indexPath: IndexPath) -> PlayingCellState { if indexPath.row == SongData.currentTrack { return isPlaying? .playing: .paused } else { return.default } } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as. CustomCell if resultSearchController.isActive { cell.addButton.tag = indexPath.row cell.songTitle.text = filteredTableData[indexPath.row].songName cell.songArtist.text = filteredTableData[indexPath.row].artistName cell.songArtwork.image = filteredTableData[indexPath.row].albumArtwork return cell } else { cell.addButton.tag = indexPath.row cell.songTitle.text = tableData[indexPath.row].songName cell.songArtist.text = tableData[indexPath.row].artistName cell.songArtwork.image = tableData[indexPath.row].albumArtwork return cell } cell:config(forState: stateForCell(at: indexPath) } //add to your CustomCell func config(forState state: PlayingCellState) { // setup your cell depends on state }