How to make UICollectionView bounce to illustrate scrollability?

Question

I've seen a number of apps where, when you launch them for the first time, they make something move or bounce to demonstrate that you can scroll something that might not be clear at first glance.

I have a UICollectionView that displays a single cell, and I want to visually show the user the first time they use the app that the region in question is scrollable. I've looked at UIKit Dynamics but everything focuses on how things animate in the course of normal usage of the control. I want to force the collection view to act as if someone scrolled a little and then released it (with some extra bounce for emphasis). Any pointers?

change the offset to a value and back to normal with animation — Petar, Oct 14 '15 at 13:22
Petar - thanks, I did what you suggested (animated content offset to 50,0, then animated it back to 0,0). The strange thing is, when it moves to the first state, you can see the next cell, but when I animate back to 0,0, the next cell disappears. Any idea why? — Ken A, Oct 14 '15 at 15:25
hmm - can you hack it with a dummy view which looks like your cell ? — Petar, Oct 14 '15 at 18:35

score 1 · Answer 1 · edited May 23 '17 at 12:03

So I tried multiple animation functions but what you basically need is two animations, one for up and one for down. I came up with this code, where it uses keyframe animation.

[UIView animateKeyframesWithDuration:1.0 delay:0.6 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^{

    // scroll up in 40% of the duration
    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.4 animations:^{
        NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow:1 inSection:0];
        [self.tableView scrollToRowAtIndexPath:scrollIndexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];
    }];

    // scroll down starting at 40% of the duration until the end of the duration
    [UIView addKeyframeWithRelativeStartTime:0.4 relativeDuration:0.6 animations:^{
        NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow:0 inSection:0];
        [self.tableView scrollToRowAtIndexPath:scrollIndexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];
    }];

} completion:^(BOOL finished) {
    NSLog(@"Animation complete!");
}];

You can tweak your animation with different times to produce a result more to your liking, but be aware that in the function addKeyframeWithRelativeStartTime: relativeDuration: animations: the start time and duration are relative so a value from 0.0 to 1.0 of the whole duration which is specified in the animateKeyframesWithDuration: delay: options: animations:.

Usually you would call this when the data in the tableView is loaded. Also you would then need to add a check if it is first time (stored in the NSUserDefaults).

--

EDIT: If you want to scroll just a bit, specified by number of points, and not for the whole item row, you can also use:

[self.tableView setContentOffset:CGPointMake(0.0, 10.0)];

and

[self.tableView setContentOffset:CGPointMake(0.0, 0.0)];

respectfully.

This also works for a collection view and you can also scroll horizontally or diagonally (depending on how you set the coordinates).

Thanks for your response Maco03. I'm using a collection view, not a table view. I modified your example for the collection view, but I would really like to only show a small portion of the next cell, not an entire cell. Unfortunately, similar to the issue in Petar's comment, I don't see the next cell when this animation is occurring. — Ken A, Oct 14 '15 at 15:28

score 0 · Answer 2 · answered May 15 '18 at 02:55

0

Yes, I have met the same problem in my code, what I want to do is a jump-up-and-down animation, using the key frame animation, animateKeyframesWithDuration, but the bottom new cell appears a little strange when the first part animation happens, (from (0, 0), size become bigger, fly in from left top), It seems like the system default collectionViewCell animation. I didn't find how to forbid the cell default animation.

answered May 15 '18 at 02:55

陈健 Mark

341
2
14

Using `[UIView animatedWithAnimation]` has not this problem, but also has the "side effect", there is a little pause between the first and second part animation – 陈健 Mark May 15 '18 at 02:58

How to make UICollectionView bounce to illustrate scrollability?

2 Answers2