我的目标是用 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
}
}
}
最佳答案
滚动时看不到动画播放,因为每次调用 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)
}
关于ios - 使用 Lottie 自定义 UIRefreshControl,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53123171/