使用 Lottie 自定义 UIRefreshControl

Posted 2023-02-27

【中文标题】使用 Lottie 自定义 UIRefreshControl

【英文标题】：Custom UIRefreshControl with Lottie

【发布时间】：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
        
    

【参考方案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)