使用 Lottie 自定义 UIRefreshControl

Question

我的目标是用 Lottie 动画替换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
        }
    }
}

Answer 1

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

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

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

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

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

2.刷新被触发

当用户向下滚动足够.valueChanged会触发.valueChanged ControlEvent。 发生这种情况时，您可以通过在LOTAnimationView上调用play()来启动循环动画

3.刷新完成

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

查看我在我的一个项目中使用的 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)
    ])
}
}

现在，您只需从scrollViewDidScroll调用 Refresh Control 上的updateProgress ：

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