ios - 使用 Lottie 自定义 UIRefreshControl

Question

我的目标是用 Lottie 动画替换 UIRefreshControl 的默认微调器。

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

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

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 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 的刷新控件上调用 updateProgress:

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