How to recreate the animation in the Notes iPad app?

When you use the Notes iPad app (from Apple) in landscape mode, you see the list of notes to the left. If you select a note you see a nice little animation that looks like someone is marking the note with a red pencil.

I already have a graphic that looks like that red circle, but how do I animate it like that? Thank you 开发者_StackOverflow社区in advance.

Edit 1

Here is a link to the graphic: red circle

I don't actually know the animation you're talking about, but assuming I understand what it does, then one simple way is to use the built in UIImageView support for displaying a series of images as an animation. You then need a separate image for each frame.

NSArray* imageFrames = [NSArray arrayWithObjects:[UIImage imageNamed:@"frame1.png"],
                                                 [UIImage imageNamed:@"frame2.png"],
                                                 [UIImage imageNamed:@"frame3.png"],
                                                 [UIImage imageNamed:@"frame4.png"],
                                                 nil];
UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,100,100)];
[imageView setAnimationImages:imageFrames];
[imageView setAnimationDuration:10];
[imageView setAnimationRepeatCount:3];

The above creates a UIImageView with 4 frames that animate over 10 seconds. The animation repeats 3 times.

See the UIImageView documentation for more information.

Obviously then you actually need a series of images to animate.

- (void)moveRedCircle {
    UIImageView *redcircle = [[UIImageView alloc] initWithImage:[UIImage imageWithContentsOfFile:@"redcircle.png"]];
    redcircle.bounds.origin = CGPointMake(x, y);
    [self.view addSubview:redcircle];
    [UIView animateWithDuration:4 animations:^{
        redcircle.bounds.origin = CGPointMake(x, y);
    }];
}

Replace the first x and y with where you want the circle to be initially. Replace the last x and y with the origin of where you want it to move.