I need to implement slot-machine animation according to provided design and timings.
It should perform infinite scroll, until some event will be triggered. After that animation, it should slow down and stop on defined position
For this task I have used next solution:
UITableView
withfixed-height
cell. It is the same cell with the only difference - icon or text (depends onindexPath.row
)Scroll
is only down-to-up that's why I'm using last cell as start point inresetScrollPosition
method- If first element reached, scroll position resets to start point
- Animation performed as
contentOffset
change with linear option. In completion block, if animation is still needed, it's called again. If don't needed - slowing animation witheaseOut
option started
var isRolling: Bool = false
func startScroll() {
isRolling = true
UIView.animate(
withDuration: 0.05,
delay: 0,
options: .curveLinear,
animations: {
self.tableView.contentOffset.y -= self.rowHeight
},
completion: { _ in
if self.isRolling {
self.startScroll()
} else {
self.resetScrollPosition
UIView.animate(
withDuration: 0.7,
delay: 0,
options: .curveEaseOut,
animations: {
self.tableView.contentOffset.y -= 8 * self.rowHeight
},
completion: nil
)
}
})
}
private func resetScrollPosition() {
tableView.reloadData()
tableView.contentOffset.y = startOffset
tableView.reloadData()
}
func stopScroll() {
isRolling = false
}
The problems:
- After calling
resetScrollPosition
, in animations completion block, tableviewscontentOffset.y
value is updated buttableView
stays on the same position. I have tried to change directcontentOffset
changing tosetContentOffset
,scrollToRow
,scrollToRect
, wrap it in main queue - no changes - Slowing animation should scroll 8 items. It's performed but first 6 items aren't visible during animation, only the last two.
Check the issue gif (jump 2 -> 11 is ok):