Timering

Purp

Scroll Programmatically with keyframe animation tutorial

Sometimes you need to use scrolling programmatically. In this case, you can use keyframe animation. Int his tutorial, we create UITableviewController with basic settings, and after that we detect when the user start scrolling or stop scrolling with detect scroll offset, and we begin programmatically keyframe animation at use scrollViewDidEndDragging.

Steps:

  1. Create TableViewControllers - Settings
  2. Detect when the user scrolling 
  3. Detect when user stops scrolling and starts our keyframe animation

Video tutorial:

1. Create TableViewControllers - Settings

1.1. Create TableViewController subclass - New File - Cocoa Touch - UITableViewController type - Name: MyTableviewController

SpotlessiCode | IOS Tutorial | Scroll programmatically | Keyframe Animation 1_1_1


SpotlessiCode | IOS Tutorial | Scroll programmatically | Keyframe Animation 1_1_2

SpotlessiCode | IOS Tutorial | Scroll programmatically | Keyframe Animation | screenshots 1_1_3

Probably you will find these line there:

1.2. In MyTableViewController.m file create myArray NSArray:

Synthesize it in .m file. Set TableView Section count 1 and rows set to myArray.count

SpotlessiCode | IOS Tutorial | Scroll programmatically | Keyframe Animation 1_2

1.3. Create MyTableViewController on Main storyboard, and add class MyTableViewController.

SpotlessiCode | IOS Tutorial | Scroll programmatically | Keyframe Animation 1_3

1.4. Add UIButton to your ViewController

And Ctrl-drag to TableViewController, and select “Show” to this segue.

SpotlessiCode | IOS Tutorial | Scroll programmatically | Keyframe Animation 1_4

1.5. Add “Cell” to the Prototype Cell Reuse Identifier

SpotlessiCode | IOS Tutorial | Scroll programmatically | Keyframe Animation 1_5

1.6. Set cell label with this code:

2. Detect when the user scrolling

2.1. Detect scroll offset if the user scrolling, use scrollViewDidScroll:

2.2. Test your app, run in Simulator. 

Now you can check offset data in the log.

Check it in Video tutorial at this point.

Probably you will find these line there:

3. Detect when user stops scrolling and starts our keyframe animation

We can detect if the user stops scrolling just we need to use scrollViewDidEndDragging:. And we can continue the user scrolling with keyframe animation. We can also add if statement, so, if the user scroll more, than “-100” and endDragging, we can start our animation. So we need a startOffset, it will be that value, where the user finishes scrolling. With keyframe animation, you can use more little animation as ne animation so that you can add a start time and duration for all steps, and finally, should be compared with the total animation time. I do every step with -50 at startOffset.y, in 0.05 min, so that it will be nature scroll animation to your eyes.

This code will look like this:

4. Run your App in Simulator 

Start the scroll, check the log and after -100 end scrolling, and see the animation.

Check it in Video tutorial at this point.

Download

Download this code from Github.

Share & Follow

If you would like to be notified of my new solutions, please subscribe to my Newsletter or my youtube channel and/ or follow me on Facebook or Twitter! Check Footer section for these opportunities!