使用 Lottie 自定义 UIRefreshControl答案

【问题标题】：Custom UIRefreshControl with Lottie使用 Lottie 自定义 UIRefreshControl
【发布时间】：2018-11-02 17:19:20
【问题描述】：

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

我的问题是当我拉下我的子视图为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
        }
    }
}

【问题讨论】：

标签： ios swift uicollectionview uirefreshcontrol lottie

【解决方案1】：

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

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

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

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

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

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)
}

【讨论】：