Ios 需要帮助在UITableViewCell中将进度与动画连成一行吗

我有两行，每行有一个状态，状态是（等待、进行中、完成）。此外，每行都有标题、图像视图、顶线和底线

根据行的状态，我需要设置行进度的动画，并使用动画更改imageView中的图像

到目前为止，我已经用动画在imageView中进行了图像更改，但它并不完美。它在滚动时显示动画。此外，我还尝试使用UIBezierPath制作线条进度动画，但没有成功。它在滚动时会波动

我想实现，线将绘制一个动画和图像将改变在那个时候只有当线是动画的细胞。当我们滚动tableView时，它不应该波动

一些代码参考

在cellForRowAtindexPath中

 let cell = tableview.dequeueReusableCell(withIdentifier: "AnimationTableViewCell") as? AnimationTableViewCell

        // code block without animation. Only image animation done but its not perfect
        /*switch indexPath.row {
        case 0:
            let firstIndex = 0
            let nextIndex = 1
            cell?.animateFrom(first: arrItem[firstIndex], to: arrItem[nextIndex])
        case arrItem.count - 1:
            let currentIndex = indexPath.row
            let prevIndex = currentIndex - 1
            cell?.animateFrom(previous: arrItem[prevIndex], to: arrItem[currentIndex])
        default:
            let currentIndex = indexPath.row
            let prevIndex = currentIndex - 1
            let nextIndex = currentIndex + 1
            cell?.animate(previous: arrItem[prevIndex], current: arrItem[currentIndex], next: arrItem[nextIndex])
        }
        cell?.changeImageWithAnimation(arrItem[indexPath.row].state, row: indexPath.row)*/

        // code block with improper animation
        if (cell?.shapeLayer == nil) {
            cell?.doAnimation(state: arrItem[indexPath.row].state, row: indexPath.row, isFirstTime: firstTime)
        }
        cell?.lblTitle.text = arrItem[indexPath.row].title
        cell?.clipsToBounds = true
        cell?.selectionStyle = .none

        return cell!

在AnimationTableViewCell中

func doAnimation(state: ProgressType, row: Int = 0, isFirstTime: Bool) {

        NSLog("\(row)")

        guard isFirstTime else {
            return
        }
//        DispatchQueue.main.asyncAfter(deadline: <#T##DispatchTime#>, execute: <#T##() -> Void#>)
        DispatchQueue.main.asyncAfter(deadline: (DispatchTime.now() + .seconds(row))) {

            self.shapeLayer?.removeFromSuperlayer()

            // create whatever path you want

            let path = UIBezierPath()
            path.move(to: CGPoint(x: self.lblTopLine.frame.origin.x, y: 0))
            path.addLine(to: CGPoint(x: self.lblTopLine.frame.origin.x, y: 74))
            path.addLine(to: CGPoint(x: self.lblTopLine.frame.origin.x, y: 148))

            // create shape layer for that path

            let shapeLayer = CAShapeLayer()
            shapeLayer.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
            shapeLayer.strokeColor = state.color().cgColor
            //        shapeLayer.strokeColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1).cgColor
            shapeLayer.lineWidth = 4
            shapeLayer.path = path.cgPath

            // animate it

            self.layer.addSublayer(shapeLayer)
            let animation = CABasicAnimation(keyPath: "strokeEnd")
            animation.fromValue = 0
            animation.duration = 1
            shapeLayer.add(animation, forKey: "MyAnimation")

//             save shape layer

            self.shapeLayer = shapeLayer

            DispatchQueue.main.asyncAfter(deadline: .now() + 1, execute: {
//                self.lblTopLine.backgroundColor = state.color()
//                self.lblBottomLine.backgroundColor = state.color()
//                self.shapeLayer?.removeFromSuperlayer()
            })

            self.imgView.image = UIImage(named: "initial")
            self.imgView.backgroundColor = UIColor.clear
            DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(250), execute: {
                UIView.animate(withDuration: 0.5, animations: {
                    self.imgView.backgroundColor = UIColor.red
                })

                UIView.transition(with: self.imgView, duration: 0.5, options: UIView.AnimationOptions.transitionCrossDissolve, animations: {
                    self.imgView.image = UIImage(named: "tick")
                }, completion: nil)
            })
        }
    }

func-doAnimation（状态：ProgressType，行：Int=0，isFirstTime:Bool）{
NSLog（“\（行）”）
卫兵是第一次见到其他人{
返回
}
//DispatchQueue.main.asyncAfter（截止日期：，执行：Void#>）
DispatchQueue.main.asyncAfter（截止日期：（DispatchTime.now（）+秒（行）））{
self.shapeLayer？.removeFromSuperlayer（）
//创建任何你想要的路径
let path=UIBezierPath（）
移动路径（到：CGPoint（x:self.lblTopLine.frame.origin.x，y:0））
addLine（to:CGPoint（x:self.lblTopLine.frame.origin.x，y:74））
addLine（to:CGPoint（x:self.lblTopLine.frame.origin.x，y:148））
//为该路径创建形状层
设shapeLayer=CAShapeLayer（）
shapeLayer.fillColor=#colorLiteral（红色：0，绿色：0，蓝色：0，alpha:0）.cgColor
shapeLayer.strokeColor=state.color（）.cgColor
//shapeLayer.strokeColor=#colorLiteral（红色：1，绿色：0，蓝色：0，alpha:1）.cgColor
shapeLayer.lineWidth=4
shapeLayer.path=path.cgPath
//让它充满活力
self.layer.addSublayer（shapeLayer）
让动画=动画化（关键路径：“strokeEnd”）
animation.fromValue=0
动画。持续时间=1
添加（动画，forKey:“MyAnimation”）
//保存形状层
self.shapeLayer=shapeLayer
DispatchQueue.main.asyncAfter（截止日期：.now（）+1，执行：{
//self.lblTopLine.backgroundColor=state.color（）
//self.lblBottomLine.backgroundColor=state.color（）
//self.shapeLayer？.removeFromSuperlayer（）
})
self.imgView.image=UIImage（名为：“初始”）
self.imgView.backgroundColor=UIColor.clear
DispatchQueue.main.asyncAfter（截止日期：.now（）+.ms（250），执行：{
UIView.animate（持续时间：0.5，动画：{
self.imgView.backgroundColor=UIColor.red
})
UIView.transition（带：self.imgView，持续时间：0.5，选项：UIView.AnimationOptions.transitionCross溶解，动画：{
self.imgView.image=UIImage（名为“勾选”）
}，完成日期：无）
})
}
}

您可以从下载示例项目