在表格视图单元格突出显示时显示涟漪效应

Question

I wanted to add ripple effect to UITableViewCell similar to this link https://raw.githubusercontent.com/bfeher/BFPaperTableViewCell/master/BFPaperTableViewCellDemoGif.gif . There are many pod available but i want to learn how such animation are done. I added few line of code in didHighlightRowAt delegate to perform ripple animation but animation didn't happened. Here is a code of what i've done so far

func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
                    let cell = tableView.cellForRow(at: indexPath)!
                    cell.contentView.subviews.forEach { (view) in
                    view.layer.masksToBounds = true
                    print(view.layer.cornerRadius)
                    let startAnimation = UIBezierPath(rect: CGRect(x: view.bounds.origin.x, y: view.bounds.origin.y, width: view.bounds.width, height: view.bounds.height)).cgPath
                    let endAnimation = UIBezierPath(rect: CGRect(x:  view.bounds.width, y: view.bounds.origin.y, width: view.bounds.width, height: view.bounds.height)).cgPath
                    let shapeLayer = CAShapeLayer()
                    let compinedLayer = CGMutablePath()
                    shapeLayer.fillColor = UIColor.blue.cgColor
                    shapeLayer.cornerRadius = 10.0
                    shapeLayer.opacity = 0.5
                    let animation = CABasicAnimation(keyPath: "ripple")
                    animation.fromValue = startAnimation
                    animation.toValue = endAnimation
                    animation.duration = 3
                    animation.fillMode = CAMediaTimingFillMode.both
                    animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut)
                    animation.isRemovedOnCompletion = false
                    compinedLayer.addPath(startAnimation)
                    compinedLayer.addPath(endAnimation)
                    shapeLayer.path = compinedLayer
                    view.layer.insertSublayer(shapeLayer, at: 0)
                     shapeLayer.add(animation, forKey: "ripple")
                let deatline = DispatchTime(uptimeNanoseconds: UInt64((3 * 0.75)) * NSEC_PER_SEC)
                DispatchQueue.main.asyncAfter(deadline: deatline, execute: {
                    let opacityAnimation = CABasicAnimation(keyPath: "opacity")
                    opacityAnimation.fillMode = CAMediaTimingFillMode.both
                    opacityAnimation.duration = 3 - (3 * 0.75)
                    opacityAnimation.fromValue = endAnimation
                    opacityAnimation.toValue = startAnimation
                    opacityAnimation.isRemovedOnCompletion = false
                    shapeLayer.add(opacityAnimation, forKey: "opacity")
                })
                        let deadline = DispatchTime(uptimeNanoseconds: UInt64(3 - (3 * 0.75)))
                        DispatchQueue.main.asyncAfter(deadline: deadline, execute: {
                    shapeLayer.removeAllAnimations()
                    shapeLayer.removeFromSuperlayer()
                })
            }

        }
        func tableView(_ tableView: UITableView, shouldHighlightRowAt indexPath: IndexPath) -> Bool {
            return true
        }

Answer 1

I have not run the code but the first glaring issue is on the opacity animation. The from and toValues need to be a number from 1 to 0 and I believe you are adding a path used for the shapelayer instead. Secondly instead of using all the dispatch times you can use CATransactions and completion blocks. For any delays use beginTime property. Hope this helps. Here is a similar question so you can look at my code. Material Ripple Effect for UICollectionView Cell . Some other things I notice is in the first click of the video you posted it appears a CATransition of a ripple is also placed on the image to distort it as well. Honestly when deconstructing animation I record them and scrub through them slowly. There are some great resources out there about CALayer as well. Good luck learning it is super powerful.