如何在 iOS 中制作类似 react-loading-skeleton 的 Shimmer Animation答案

【问题标题】：How can I make Shimmer Animation like react-loading-skeleton in iOS如何在 iOS 中制作类似 react-loading-skeleton 的 Shimmer Animation
【发布时间】：2021-01-20 00:44:27
【问题描述】：

我想要一个这样的微光动画：https://gph.is/g/amWgbvj。（这个是在WebApp中使用库：https://github.com/dvtng/react-loading-skeleton创建的）

我尝试使用带有不透明度的 GradientLayer 通过所有子视图创建 Shimmer 动画：

gradientLayer.colors = [Colors.tokenDark20.cgColor, Colors.tokenDark10.cgColor, Colors.tokenDark20.cgColor]
gradientLayer.opacity = 0.5

但我得到了动画：https://gph.is/g/4L3K01P。

更多的努力：

我尝试使用库：https://github.com/gonzalonunez/Skeleton，尝试从左到右链接动画，但我无法为所有子视图制作相同长度的渐变形状：

extension ShimmerExampleCell: SkeletonOwner {
    var gradientLayers: [CAGradientLayer] {
        return [imagePlaceholderView.gradientLayer, titlePlaceholderView.gradientLayer, subtitlePlaceholderView.gradientLayer]
    }
    func slide(to dir: SkeletonDirection, group: ((CAAnimationGroup) -> Void) = { _ in }) {
        imagePlaceholderView.gradientLayer.slide(to: .right) { (animationGroup) in
            animationGroup.beginTime = 0
        }
        
        titlePlaceholderView.gradientLayer.slide(to: .right) { (animationGroup) in
            animationGroup.beginTime = 1.1
            subtitlePlaceholderView.gradientLayer.add(animationGroup, forKey:  CAGradientLayer.kSlidingAnimationKey)
        }
    }
}

我在这里得到了动画：https://gph.is/g/ZPgPlXV

我在制作 Shimmer 动画的方法上是错误的吗？

请帮帮我！提前谢谢！

【问题讨论】：

标签： ios swift cagradientlayer

【解决方案1】：

您可以尝试使用库SkeletonView；它应该可以帮助您轻松地在任何地方实现微光动画。

【讨论】：

我同时使用了 SkeletonView 和这个：github.com/gonzalonunez/Skeleton。但我仍然无法实现所需的动画。如果您观看所需的动画，使用可以看到所有子视图的渐变长度是相同的。我编辑了我的问题以提供更多我尝试使用的代码。如果您有时间，请再次阅读我的问题。非常感谢

【解决方案2】：

视图控制器：

class ViewController: UIViewController {

@IBOutlet weak var tableView: UITableView!

var data: [String] = []

override func viewDidLoad() {
    super.viewDidLoad()
    
    tableView.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "cell")
    tableView.delegate = self
    tableView.dataSource = self
    
    for value in 0..<20 {
        self.data.append("\(value) data")
        self.tableView.reloadData() 
    }
}

ViewController 的扩展：

extension ViewController: UITableViewDelegate, UITableViewDataSource {

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return data.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
    cell.labelName.text = data[indexPath.row]
    return cell
}

UITableViewCell：这里我设置了 SkeletonView 的显示或隐藏状态

class TableViewCell: UITableViewCell {

@IBOutlet weak var labelName: UILabel!
@IBOutlet weak var imgView: UIImageView!

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
    
    let views = [labelName, imgView]
    views.forEach {$0?.showHideSkeletonView(show: true)}
    
    DispatchQueue.main.asyncAfter(deadline: .now()+3) { 
        views.forEach {$0?.showHideSkeletonView(show: false)}
    }
}

ConfigSkeleton：在这里我为我的skeletonView添加了一个设置、动画和颜色的函数。

import SkeletonView

extension UIView {

   func setSkeletonView() {
        self.isSkeletonable = true
   }

    func showHideSkeletonView(show: Bool) {
        if show {
            let gradient = SkeletonGradient(baseColor: UIColor.clouds)
            let animation = SkeletonAnimationBuilder().makeSlidingAnimation(withDirection: .topLeftBottomRight)
            self.showAnimatedGradientSkeleton(usingGradient: gradient, animation: animation)
        } else {
            self.hideSkeleton()
        }
    }

【讨论】：