Question

我想向 UITableViewCell 添加波纹效果，类似于此链接https://raw.githubusercontent.com/bfeher/BFPaperTableViewCell/master/BFPaperTableViewCellDemoGif.gif。有很多可用的广告连播，但我想学习如何制作动画。我在 didHighlightRowAt 委托中添加了几行代码来执行波纹动画，但动画没有发生。这是我到目前为止所做的代码

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

我还没有运行代码，但是第一个明显的问题是不透明度动画。 from和toValues必须是从1到0的数字，我相信您正在添加用于shapelayer的路径。其次，可以使用CATransactions和完成块来代替使用所有调度时间。对于任何延迟，请使用beginTime属性。希望这可以帮助。这是一个类似的问题，因此您可以看一下我的代码。 Material Ripple Effect for UICollectionView Cell。我注意到的其他一些情况是，在您发布的视频的第一次单击中，它似乎在图像上也放置了CATransition波纹，也使图像变形。老实说，在解构动画时，我会录制它们并慢慢地擦洗它们。也有一些有关CALayer的资源。祝您好运，它超级强大。

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

1 个答案: