how to create an action for a clicked image from imageviewanimation - objective-c

Question

[SOLVED - SEE THE ANSWER]
i want to have three images grouping as animation, and i can be able to click any of these three images to define an action. In the other words, i'd like to know the ways to create separate action/ event for each image in the animation
that will be great if you know there's a way to do with UIButton instead of UIImageview
here is my code:
- (void)viewDidLoad {
[super viewDidLoad];
// Load images
NSArray *imageNames = #[#"hello.png",#"bye.png",#"helloagain.png"];
NSMutableArray *images = [[NSMutableArray alloc] init];
for (int i = 0; i < imageNames.count; i++) {
[images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
}
// Normal Animation
UIImageView *animationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(60, 95, 86, 90)];
animationImageView.animationImages = images;
animationImageView.animationDuration = 1.5;
[self.view addSubview:animationImageView];
[animationImageView startAnimating];
animationImageView.userInteractionEnabled = TRUE;
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(bannerTapped:)];
singleTap.numberOfTapsRequired = 1;
singleTap.numberOfTouchesRequired = 1;
[animationImageView addGestureRecognizer:singleTap];
}
- (void)bannerTapped:(UIGestureRecognizer *)gestureRecognizer {
//action here
}

Answer 1

You don't want to use an animating image view to do this, since you can't get the image from the image view when you click on it. Instead, use a timer to switch the images. Something like this should work,
#interface ViewController ()
#property (strong,nonatomic) NSMutableArray *images;
#property (strong,nonatomic) UIImageView *animationImageView;
#end
#implementation ViewController {
NSInteger counter;
}
- (void)viewDidLoad {
[super viewDidLoad];
NSArray *imageNames = #[#"hello.png",#"bye.png",#"helloagain.png"];
self.images = [[NSMutableArray alloc] init];
for (int i = 0; i < imageNames.count; i++) {
[self.images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
}
self.animationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(60, 95, 86, 90)];
self.animationImageView.image = self.images[0];
[self.view addSubview:self.animationImageView];
self.animationImageView.userInteractionEnabled = TRUE;
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(bannerTapped:)];
singleTap.numberOfTapsRequired = 1;
singleTap.numberOfTouchesRequired = 1;
[self.animationImageView addGestureRecognizer:singleTap];
[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:#selector(changeImage:) userInfo:nil repeats:YES];
}
-(void)changeImage:(NSTimer *) timer {
if (counter == self.images.count - 1 ) {
counter = 0;
}else {
counter ++;
}
self.animationImageView.image = self.images[counter];
}
- (void)bannerTapped:(UIGestureRecognizer *)gestureRecognizer {
UIImage *img = self.animationImageView.image;
NSInteger indx = [self.images indexOfObject:img];
NSLog(#"The index is: %ld", indx);
// use indx value in a switch statement or if-else block to choose your action
}
After Edit
If you want different times between images, I would use a different approach. Instead of using a timer, just call the following method to start the animation,
-(void)changeImage {
if (counter == self.images.count - 1 ) {
counter = 0;
}else {
counter ++;
}
self.animationImageView.image = self.images[counter];
if (counter == 1) {
[self performSelector:#selector(changeImage) withObject:nil afterDelay:2];
}else{
[self performSelector:#selector(changeImage) withObject:nil afterDelay:1];
}
}
This would give you a 2 second delay between the 2nd and 3rd image, but 1 second between the others.

Answer 2

My proposed hacky solution assuming you know number of images, and animation time.
1. Schedule a timer for imageCount/animationTime milliseconds.
2. In the timer's callback, increment the above property on the UIImageView
3. In -bannerTapped use that index to decide what event to throw corresponding to the image currently being animated.
-(void)setup {
// Load images
NSArray *imageNames = #[#"happy",#"sad",#"popeye_village"];
NSMutableArray *images = [[NSMutableArray alloc] init];
for (int i = 0; i < imageNames.count; i++) {
[images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
}
// Normal Animation
imageview.frame = CGRectMake(60, 95, 86, 90);
imageview.animationImages = images;
imageview.animationDuration = 6;
[imageview startAnimating];
imageview.userInteractionEnabled = TRUE;
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(bannerTapped:)];
singleTap.numberOfTapsRequired = 1;
singleTap.numberOfTouchesRequired = 1;
[imageview addGestureRecognizer:singleTap];
[NSTimer scheduledTimerWithTimeInterval:((double)imageview.animationDuration / images.count)
target:self
selector:#selector(updateAnimatingImage)
userInfo:nil
repeats:YES];
}
- (void)bannerTapped:(UIGestureRecognizer *)gestureRecognizer
{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:[NSString stringWithFormat:#"Clicked on Image index %li", imageview.indexOfAnimatingImage] message:#"" delegate:nil cancelButtonTitle:#"Cancel" otherButtonTitles: nil];
[alert show];
}
-(void)updateAnimatingImage
{
imageview.indexOfAnimatingImage = ++imageview.indexOfAnimatingImage % (imageview.animationImages.count);
NSLog(#"index currently showing is %li",imageview.indexOfAnimatingImage);
}
While very similar to the above solution, this still uses UIImageView's animationImages.
Here is my fork of your project in case you want to play with a working solution.