I'm wondering how to perform prolonged animations in Objective-C. An example of what i'm looking to implement would be the following:
http://vimeo.com/38514156
The way I have done this before is using the following code:
NSArray *imgArray = [NSArray arrayWithObjects:
[UIImage imageNamed:#"car1.png"],
[UIImage imageNamed:#"car2.png"],
[UIImage imageNamed:#"car3.png"],
[UIImage imageNamed:#"car4.png"],
[UIImage imageNamed:#"car5.png"],
[UIImage imageNamed:#"car6.png"],
[UIImage imageNamed:#"car7.png"],
[UIImage imageNamed:#"car8.png"],
[UIImage imageNamed:#"car9.png"],
[UIImage imageNamed:#"car10.png"],
[UIImage imageNamed:#"car11.png"],
[UIImage imageNamed:#"car12.png"],
nil];
imgCar.animationImages = imgArray;
imgCar.animationDuration = 0.8;
imgCar.animationRepeatCount = 0; //0 means infinite
[imgCar startAnimating];
I'm wondering if there a better way to do something like the video i posted above? If the animation is going on for about 45 seconds I'm guessing i would need a few hundred images - which seems like it probably won't be just intensive, but also be quite a big application.
Related
Im trying to fade several background images in xcode. They are animated but not fading, see code below:
animationgirl.animationImages = [NSArray arrayWithObjects:
[UIImage imageNamed:#"girl1.png"],
[UIImage imageNamed:#"girl2.png"],
[UIImage imageNamed:#"girl3.png"],
[UIImage imageNamed:#"girl4.png"],
[UIImage imageNamed:#"girl5.png"],
[UIImage imageNamed:#"girl6.png"],
[UIImage imageNamed:#"girl7.png"],
[UIImage imageNamed:#"girl8.png"],
[UIImage imageNamed:#"girl9.png"],
[UIImage imageNamed:#"girl10.png"],
[UIImage imageNamed:#"girl11.png"],
[UIImage imageNamed:#"girl12.png"],
[UIImage imageNamed:#"girl13.png"],
[UIImage imageNamed:#"girl14.png"],nil];
[animationgirl setAnimationRepeatCount:0];
animationgirl.animationDuration = 1.8;
[animationgirl startAnimating];
Setting animationImages does not support an additional fade-in/fade-out effect when transitioning between images.
What you can do is creating a CAKeyframeAnimation and provide it with the array of images you are trying to animate, e.g.:
NSArray* contents = <NSArray of UIImages>;
CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:#"contents"];
[animation setCalculationMode:kCAAnimationLinear];
[animation setDuration:contentsAnimationDuration];
[animation setRepeatCount:HUGE_VALF];
[animation setValues:contents];
[self.layer addAnimation:animation forKey:#"contents"];
In order to use Core Animation, you have to link the Quartz framework and include the relevant header file.
You could also you a category on CALayer I wrote for this purpose.
I'm using an animation block to iterate through an array of .png images to make it look like a character is walking across the screen. However, the quality of the images blurs when I scale the image down. Currently I am testing the animation with 19 images all in 371 x 379 resolution. However, I need them to appear smaller on the screen so I scaled them to 64 x 65 on my app. When I do this, the lines distort a little bit and when I pause the game you can really tell that the image quality isn't where it should be. Below is the code I'm using to iterate through the images. Any help would be greatly appreciated.
[UIImageView animaiteWithDuration: 3.0
delay: 0
options: UIViewAnimationOptionBeginFromCurrentState
animations: ^{
CABasicAnimation *mover = [CABasicAnimation animationWithKeyPath:#"position"];
// Get the current presentationLayer of the object
CALayer *currentLayer = self.layer.presentationLayer;
// Get the current point of the presentationLayer
CGPoint currentPoint;
currentPoint.x = currentLayer.position.x;
currentPoint.y = currentLayer.position.y;
// Set the new point for the object to move to
CGPoint newPoint;
newPoint.x = currentLayer.position.x - 50;
newPoint.x = currentLayer.position.y;
// Set the from and to values of the animation
[mover setFromValue: [NSValue valueWithCGPoint:currentPoint]];
[mover setToValue: [NSValue valueWithCGPoint:newPoint]];
[mover setDuration:3.0]; // Set the duration of the mover animation
// Create the nine-teen UIImages for the array
UIImage *image1 = [UIImage imageNamed:#"img1"];
UIImage *image2 = [UIImage imageNamed:#"img2"];
UIImage *image3 = [UIImage imageNamed:#"img3"];
UIImage *image4 = [UIImage imageNamed:#"img4"];
UIImage *image5 = [UIImage imageNamed:#"img5"];
UIImage *image6 = [UIImage imageNamed:#"img6"];
UIImage *image7 = [UIImage imageNamed:#"img7"];
UIImage *image8 = [UIImage imageNamed:#"img8"];
UIImage *image9 = [UIImage imageNamed:#"img9"];
UIImage *image10 = [UIImage imageNamed:#"img10"];
UIImage *image11 = [UIImage imageNamed:#"img11"];
UIImage *image12 = [UIImage imageNamed:#"img12"];
UIImage *image13 = [UIImage imageNamed:#"img13"];
UIImage *image14 = [UIImage imageNamed:#"img14"];
UIImage *image15 = [UIImage imageNamed:#"img15"];
UIImage *image16 = [UIImage imageNamed:#"img16"];
UIImage *image17 = [UIImage imageNamed:#"img17"];
UIImage *image18 = [UIImage imageNamed:#"img18"];
UIImage *image19 = [UIImage imageNamed:#"img19"];
// Populate the animation array
NSArray *walkingAnimation = [NSArray arrayWithObjects: img1, img2, img3, img4, img5, img6, img7, img8, img9, img10, img11, img12, img13, img14, img15, img16, img17, img18, img19, nil];
[self setAnimationImages: walkingAnimation]; // Set the animation images to the array
[self setAnimationRepeatCount:3]; // Repeat the animation every second
[self setAnimationDuration:1.0];
[self startAnimating]; // Start the animation
[[self layer] addAnimation:mover forKey:#"position"]; // Add the mover animation to the layer
[UIImageView commitAnimations];
[[self layer] setPosition:newPoint]; // Set the position to avoid bounce back
} completion:nil];
So if anyone can tell me if there is something extra I need to be doing to keep the images from distorting, or maybe it's the images themselves, I could really use some tips while I read everything in Apples API and check every forum on the internet.
Your issue should be nothing to do with code. You are resizing the images to a different aspect ratio. You should be very careful with image resizing as the image will naturally blur.
Your best option is to create accurate (sharp) images, purpose made for the size at which you will use them.
I have a Problem with using the isAnimating function.
I have got an UIImageView called imgBecher.
In the viewDidLoad function I play a small Animation:
imgBecher.image = [UIImage imageNamed:#"diceholderAni.11.png"];
AniArray = [NSArray arrayWithObjects:
[UIImage imageNamed:#"diceholderAni.1.png"],
[UIImage imageNamed:#"diceholderAni.2.png"],
[UIImage imageNamed:#"diceholderAni.3.png"],
[UIImage imageNamed:#"diceholderAni.4.png"],
[UIImage imageNamed:#"diceholderAni.5.png"],
[UIImage imageNamed:#"diceholderAni.6.png"],
[UIImage imageNamed:#"diceholderAni.7.png"],
[UIImage imageNamed:#"diceholderAni.8.png"],
[UIImage imageNamed:#"diceholderAni.9.png"],
[UIImage imageNamed:#"diceholderAni.10.png"],
nil];
imgBecher.animationImages = AniArray;
[imgBecher setAnimationRepeatCount:1];
imgBecher.animationDuration = 1;
[imgBecher startAnimating];
Everything fine so far.
Now I call a Loop with:
[NSTimer scheduledTimerWithTimeInterval:1.0/60 target:self selector:#selector(gameLoop) userInfo:nil repeats:YES];
-(void)gameLoop {
NSLog(#"%i",imgBecher.isAnimating);
}
Now gameLoop fires 1 all over the time, not seeing that the animation is over.
BUT
as soon as I touch the screen anywhere, it fires 0, just as it should be.
I need this later on, where I have 4 animations, which should be played right after another without any user actions.
Thanks in advance! ;)
Probably you have to use userInteractionEnabled property:
imgBecher.userInteractionEnabled = NO; or self.view.userInteractionEnabled = NO;
how to change this code to make the animation like this:
image1 --> image2 ---> image3 --->image4 --->image 5 .. then return back to image1 and so on ...
the code:
UIImage *image1 = [UIImage imageNamed:#"1.jpg"];
UIImage *image2 = [UIImage imageNamed:#"2.jpg"];
UIImage *image3 = [UIImage imageNamed:#"3.jpg"];
UIImage *image4 = [UIImage imageNamed:#"4.jpg"];
UIImage *image5 = [UIImage imageNamed:#"5.jpg"];
NSArray *imageArray = [NSArray arrayWithObjects:image1.CGImage, image2.CGImage, image3.CGImage, nil];
//self.introImages.image = image1;
[self.view addSubview:self.introImages];
CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:#"contents"];
crossFade.autoreverses = YES;
crossFade.repeatCount = HUGE_VALF;
crossFade.duration = 1.0;
//self.introImages.layer.contents = image2.CGImage;
crossFade.fromValue = (id)image1.CGImage;
crossFade.toValue = (id)image5.CGImage;
[self.introImages.layer addAnimation:crossFade forKey:#"animateContents"];
Better a late answer then no one i think. :)
There are several mistakes in your code.
First of all if you want to use crossfade of images you should add the animation to the imageView containing the images and just switch between the UIImages.
Second: If you want to cycle through more images than two, you should either use a queue of animations with the help of animationDidFinish callback methods, or you should use the animationImages field of the UIImageView class to let the UIImageView do all the work.
Third: If you are changing the layer of the image from image1 to image5 how could you expect the compiler to know that it should put all the other pics in between?
Try this code:
UIImage *image1 = [UIImage imageNamed:#"1.jpg"];
UIImage *image2 = [UIImage imageNamed:#"2.jpg"];
UIImage *image3 = [UIImage imageNamed:#"3.jpg"];
UIImage *image4 = [UIImage imageNamed:#"4.jpg"];
UIImage *image5 = [UIImage imageNamed:#"5.jpg"];
NSArray *imageArray = [NSArray arrayWithObjects:image1.CGImage, image2.CGImage, image3.CGImage, nil];
//imageView to add the array of images you want to cycle through
iv_introImages.animationImages = imageArray;
//duration of the animation-cycle
iv_introImages.animationDuration = 1.0;
//how often you want the animation to repeat. 0 stands for endless repetition
iv_introImages.animationRepeatCount = 0;
//starts the animation
[iv_introImages startAnimating];
hope this helps.
Mav
How I can animate two sets of images one on the other on xcode? I mean that one set is background or landscape and the other set is a figure in the background
Here's a basic approach you might try:
UIImageView* backdropScene = [[UIImageView alloc] initWithFrame:self.view.frame];
backdropScene.animationImages = [NSArray arrayWithObjects:
[UIImage imageNamed:#"rainy_background01.png"],
[UIImage imageNamed:#"rainy_background02.png"],
[UIImage imageNamed:#"rainy_background03.png"],
[UIImage imageNamed:#"rainy_background04.png"], nil];
backdropScene.animationDuration = .2f; // image change rate, .2 seconds
backdropScene.animationRepeatCount = 0; // repeat infinitely
[self.view addSubview:backdropScene];
[backdropScene startAnimation];
UIImageView* foregroundAnimation = [[UIImageView alloc] initWithFrame:self.view.frame];
foregroundAnimation.animationImages = [NSArray arrayWithObjects:
[UIImage imageNamed:#"man_walk01.png"],
[UIImage imageNamed:#"man_walk02.png"],
[UIImage imageNamed:#"man_walk03.png"],
[UIImage imageNamed:#"man_walk04.png"], nil];
foregroundAnimation.animationDuration = .5f; // image change rate, .2 seconds
foregroundAnimation.animationRepeatCount = 0; // repeat infinitely
[self.view addSubview:foregroundAnimation];
[foregroundAnimation startAnimation];