iOS, Lottie Custom Refresh Control with End Animation

Photo by Boxed Water Is Better on Unsplash

They say; If you want something you’ve never had before, you have to do something you’ve never done before(: abdllhyalcn

When implementing custom refresh control into scrollView or tableView, there are 3 things to be considered.

When scrolling starts, trigger the animation progress

To do this we calculate the progress in scrollViewDidScroll and pass it to the LOTAnimationView's animationProgress property.

Start the refresh animation

When the user has scrolled down enough a .valueChanged ControlEvent is triggered. When this happens we start the looping animation by calling play() on the beginRefreshing().

End refreshing with another animation when done

When the refreshing is completed we call endRefreshing() on our custom Refresh Control. When this happens we re-configure the LOTAnimationView to-end animation. Then play it only once time by calling animationView.play(completion:).

Tipnote:

Make sure to call scrollViewDidScroll on your UIScrollViewDelegate protocol. Otherwise, refresh animation isn’t triggered when the user starts scrolling.

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