How do I animate the movement of a view in iOS?

Question

I'm a very beginner programmer and I'm trying to find the easiest way to do this. I have never done anything with animation before. I want to try to animate an image in my app, and I've run into some problems. This is the code someone previously suggested I use (from a different question):

imageView.image = yourLastImage;  
// Do this first so that after the animation is complete the image view till show your last image.

NSArray * imageArray  = [[NSArray alloc] initWithObjects:
[UIImage imageNamed:@"image1.png"],  
[UIImage imageNamed:@"image2.png"],
[UIImage imageNamed:@"image3.png"],                         
[UIImage imageNamed:@"image4.png"],
nil]; 

// Note: here you may instead want to use something like [UIImage imageWithContentsOfFile:[self localImagePath:NO]] instead depending upon your targeted iOS version.



UIImageView * animatedImageView = [[UIImageView alloc] initWithFrame:
    CGRectMake(100, 125, 150, 130)];
animatedImageView.animationImages = imageArray;
animatedImageView.animationDuration = 1.1;
    myAnimation.animationRepeatCount = 1;
animatedImageView.contentMode = UIViewContentModeBottomLeft;

[self.view addSubview:animatedImageView];
[animatedImageView startAnimating];

Well, first off, is this even practical? I want to animate something that goes from the middle of the screen to the bottom of the screen. Does that mean I have to have 500 images, each 1 pixel away from each other? What is the optimal pixel interval, so that it looks fluid and even and doesn't require a ton of work? Is there a better way to animate than the way above? Is there a program that helps make animations that you can later add into Xcode?

Also, can someone please explain the code above? I'm new to animation, I don't really understand what all that means.

Sorry if this is a stupid question, I said at the opening that I am a beginner. Thanks for any help you may provide!

Solution 1

For most animations, you can simply change the properties of the view inside a UIView animation block. The UIView class documentation lists which properties are animatable.

[UIView animateWithDuration:0.5f animations:^{
    aView.frame = CGRectOffset(aView.frame, 0, 250); 
}];

Here is a sample project demonstrating how you would trigger an animation when a button is pressed. You could put this animation code many other places, so there isn't a good answer to your question about where to put the code unless you give more details about what you want.

https://github.com/MaxGabriel/AnimationDemonstration

The approach you were taking was animating a UIImageView. I've never done this, but my understanding is that's like making an animated GIF. For things like moving views or fading them out, you'll want to use the animation block method shown above.

Solution 2

It is simple to do animation in iOS.

CGRect basketTopFrame = self.upperview.frame;
basketTopFrame.origin.y = -basketTopFrame.size.height;

CGRect basketBottomFrame = self.lowerview.frame;
basketBottomFrame.origin.y = self.view.bounds.size.height;

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelay:1.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

self.upperview.frame = basketTopFrame;
self.lowerview.frame = basketBottomFrame;

[UIView commitAnimations];

Comments

[Tomasz Szulc]

if you want to do things after completion the animation you should to use this method with next parameter (void(^)(BOOL completion). Here is snippet: pastebin.com/wfGTrLu9

[adamcircle]

should this go in main.m, appName.h or appName.m? Again, I'm a beginner.

[MaxGabriel]

@user1917407 This code should go in your UIViewController subclass that you are using. You pretty much never put code into main.m. You might put this code in viewDidAppear:. The only important thing is that you don't put this code before the view you are animating is added to the screen (which is why you wouldn't put it in main.m).

[MaxGabriel]

@user1917407 You would probably put this into a UIViewController subclass that your app uses. I uploaded a sample project to Github that demonstrates the animation.

[MaxGabriel]

@user1917407 I should note that I'm just animating a standard UIView in my sample project. If you wanted to move an image, you would put the image in a UIImageView and then move the UIImageView exactly like the UIView was moved in the sample project.

[adamcircle]

@MaxGabriel yes but what/where is the UIViewController subclass? What even is that?

[MaxGabriel]

@user1917407, the UIViewController is the controller in the Model-View-Controller architecture pattern. View controllers are responsible for managing each 'page' of the app. When you create an Xcode Project with an iOS template, it comes with a UIViewController subclass as the root view controller. Please see the linked Github project for an example. This is the most basic knowledge you need to have about iOS -- I highly recommend going to stanford.edu/class/cs193p/cgi-bin/drupal to learn iOS basics before learning about animation.

[adamcircle]

@MaxGabriel I think you're right. I read a book that had no mention of strings or anything, and they put together a terrible UI using only the default objects in the object library. I know what I want to do in my head but idk how to translate that to code. Thank you for your time.

[Greg]

zeeshan, I tried your code as a method in ViewController.m and in the ViewController.h I also set @property (nonatomic, strong) UIView *upperview; @property (nonatomic, strong) UIView *lowerview; how do I test this ? what should I see ?

[Muhammad Zeeshan]

its showing image back and front you need to have three images in this process 1st two is hide after animation and third one is showing after animation thanks