使用 Lottie 自定义 UIRefreshControl

我的目标是替换默认的微调器UIRefreshControl与洛蒂动画。

我的问题是，当我拉下动画时，动画不会立即播放UICollectionView其子视图是UIRefreshControl。仅当我稍微向下滚动并暂停手指时才会播放动画。当我再次开始移动滚动位置时，它立即返回到其初始开始状态，不播放。

任何指导将不胜感激，下面是相关代码..

func setupRefreshControl() {
    guard let refreshContents = Bundle.main.loadNibNamed("RefreshControlView", owner: self, options: nil), let refreshView = refreshContents[0] as? RefreshControlView else { return }

    refreshView.frame = refreshControl.frame
    refreshControl.addSubview(refreshView)

    refreshControl.tintColor = UIColor.clear
    refreshControl.backgroundColor = UIColor.clear
    refreshControl.addTarget(self, action: #selector(exampleFunction), for: .valueChanged)      
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    for subview in refreshControl.subviews {
        if let refreshControlView = subview as? RefreshControlView {
            refreshControlView.activityIndicatorControl.animationView.setAnimation(named: "lottieJson")                
            refreshControlView.activityIndicatorControl.animationView.loopAnimation = true
            refreshControlView.activityIndicatorControl.animationView.play()
            break
        } else {
            continue
        }
    }
}

滚动时看不到动画播放，因为每次scrollViewDidScroll被称为你通过调用重新启动动画play。而且由于在滚动时该函数几乎不断被调用，因此动画没有机会播放超过第一帧的内容。所以看起来暂停了。

实现自定义刷新控件时，您必须实现 3 个阶段：

1、用户滚动但尚未触发刷新

在此阶段，您可能希望根据用户滚动的距离来显示动画的进度。为此，您需要计算进度scrollViewDidScroll并将其传递给LOTAnimationView's animationProgress财产。

要计算此进度，您必须知道用户必须向下滚动多远才能触发刷新。根据我的经验，这发生在contentOffset.y大约为150.

2.触发刷新

当用户向下滚动足够长的距离时.valueChangedControlEvent 被触发。发生这种情况时，您可以通过调用来启动循环动画play() on the LOTAnimationView

3.刷新完成

当刷新完成后你调用endRefreshing()在您的自定义刷新控件上。发生这种情况时，您可以通过调用来停止动画stop() on the LOTAnimationView

查看我在一个项目中使用的 LottieRefreshControl 的小示例：

import UIKit
import Lottie

class LottieRefreshControl: UIRefreshControl {
fileprivate let animationView = Lottie.AnimationView(name: "searchAnimation")
fileprivate var isAnimating = false

fileprivate let maxPullDistance: CGFloat = 150

override init() {
    super.init(frame: .zero)
    setupView()
    setupLayout()
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

func updateProgress(with offsetY: CGFloat) {
    guard !isAnimating else { return }
    let progress = min(abs(offsetY / maxPullDistance), 1)
    animationView.currentProgress = progress
}

override func beginRefreshing() {
    super.beginRefreshing()
    isAnimating = true
    animationView.currentProgress = 0
    animationView.play()
}

override func endRefreshing() {
    super.endRefreshing()
    animationView.stop()
    isAnimating = false
}
}

private extension LottieRefreshControl {
func setupView() {
    // hide default indicator view
    tintColor = .clear
    animationView.loopMode = .loop
    addSubview(animationView)

    addTarget(self, action: #selector(beginRefreshing), for: .valueChanged)
}

func setupLayout() {
    animationView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        animationView.centerXAnchor.constraint(equalTo: centerXAnchor),
        animationView.centerYAnchor.constraint(equalTo: centerYAnchor),
        animationView.widthAnchor.constraint(equalToConstant: 50),
        animationView.heightAnchor.constraint(equalToConstant: 32)
    ])
}
}

现在你只需要打电话updateProgress在刷新控件上scrollViewDidScroll:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    refreshControl.updateProgress(with: scrollView.contentOffset.y)
}