How to make your own iOS swipe onboarding animation

Animating a UITableViewCell to show the editActions isn't as straightforward as we would think. I couldn't find any public APIs to do this programmatically (If you found them, please let me know). So I created a custom animation, to help users in the onboarding process.

How to implement

We'll add the following code in viewDidLayoutSubviews() of the ViewController that has our TableView to ensure all constraints have been applied.

[pre type="swift"]

if !UserDefaults.standard.bool(forKey: TableViewCellOnboarding.userDefaultsFinishedKey) {

    let config = TableViewCellOnboarding.Config(initialDelay: 1, duration: 2.5, halfwayDelay: 0.5)

    onboardingCell = TableViewCellOnboarding(with: tableView, config: config)

    onboardingCell?.editActions = tableView(tableView, editActionsForRowAt: IndexPath(row: 0, section: 0))

}

[/pre]

We'll have to manually set the editActions in TableViewCellOnboarding by using the UITableViewDelegate's tableView(_:editActionsForRowAt:). This is so our TableViewCellOnboarding can use the style of the actual editActions.

And that's all there is to it‍

‍

Config

To make the animation a bit more easily configurable we can pass in a TableViewCellOnboarding.Config.

• initialDelay: How long the animation waits before playing
• duration: The total duration for the animation, start to finish. Including the halfwayDelay.
• halfwayDelay: How long the animation waits before moving back.
  

To use the default values we can just omit the config parameter.

‍

How to use

We can, of course, call the animation code whenever we like, but we'll need to make sure our TableView has been completely laid out.

Once the animation has finished completely TableViewCellOnboarding.userDefaultsFinishedKey is set to true so we can choose to show the animation only once.

If the user navigates away from the screen before the animation is finished TableViewCellOnboarding.userDefaultsFinishedKe will not be set to true.

‍

Source

The source is available to use here. It comes with a sample project that uses a custom Config.