I have a multiple images to show in imageview using cross dissolve animation and taping on image displays detail about image. Following is the code working but tap on imageview is failing when it's animating from one image to another.
Code for attaching single tap gesture recogniser to UIImageview and starting animation timer.
self.imageView.userInteractionEnabled = YES;
self.singleTapGestureRecogniser = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(showDetails)];
self.singleTapGestureRecogniser.numberOfTapsRequired = 1;
self.singleTapGestureRecogniser.cancelsTouchesInView = NO;
[self.imageView addGestureRecognizer:self.singleTapGestureRecogniser];
[self startAnimationTimer];
- (void)startAnimationTimer
{
if(!self.timer && ![self.timer isValid]) {
self.timer = [NSTimer scheduledTimerWithTimeInterval:5.0
target:self
selector:#selector(startAnimation)
userInfo:nil
repeats:YES];
[self.timer fire];
}
}
Single tap on imageview works fine unless following code is executing! I have to tap 3-4 times to open details about image.
- (void)startAnimation
{
[UIView transitionWithView:self.imageView duration:2.0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^ {
currentImageIndex = ++currentImageIndex % self.images.count;
[self.imageView setImage:[[self.images objectAtIndex:currentImageIndex] image]];
} completion:^(BOOL finished) {
}
];
}
Could someone please suggest me how to get rid of this issue please.
set UIViewAnimationOptionAllowUserInteraction in the options like so
[UIView transitionWithView:self.imageView duration:2.0
options:UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionAllowUserInteraction
animations:^ {
currentImageIndex = ++currentImageIndex % self.images.count;
[self.imageView setImage:[[self.images objectAtIndex:currentImageIndex] image]];
} completion:^(BOOL finished) {
}
];
Related
I need to animate a UIImageView inside my application, and cyclically change the UIImage inside it, making it look like an animated photo slideshow.
Right now I'm using an NSTimer to fire every N seconds the UIImage change and the animation itself:
- (void)viewDidLoad {
// NSArray initialization
NSTimer *timer = [NSTimer timerWithTimeInterval:16
target:self
selector:#selector(onTimer)
userInfo:nil
repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
[timer fire];
[super viewDidLoad];
}
This is the onTimer selector code:
- (void) onTimer {
// cycle through max 9 images
if(imageIndex > 8)
imageIndex = 0;
// set the image
[_imageContainer setImage:[images objectAtIndex:imageIndex]];
// reset width and height of the UIImage frame
CGRect frame = [_imageContainer frame];
frame.size.width -= 170.0f;
frame.size.height -= 100.0f;
[_imageContainer setFrame:frame];
// fade in
[UIView animateKeyframesWithDuration:2.0f delay:0.0f options:0 animations:^{
[_imageContainer setAlpha:1];
} completion:^(BOOL finished) {
// image movement
[UIView animateKeyframesWithDuration:12.0f delay:0.0f options:0 animations:^{
CGRect frame = [_imageContainer frame];
frame.size.width += 170.0f;
frame.size.height += 100.0f;
[_imageContainer setFrame:frame];
} completion:^(BOOL finished) {
// fade out
[UIView animateKeyframesWithDuration:2.0f delay:0.0f options:0 animations:^{
[_imageContainer setAlpha:0];
} completion:nil];
}];
}];
imageIndex++;
}
This seem a very raw but "working" way to achieve what I want but I recognize it might not be the ideal way.
Is there any better method to achieve what I'm looking for?
Updated Answer For Fade Animation
- (void)viewDidLoad
{
[super viewDidLoad];
// self.animationImages is your Image Array
self.animationImages = #[[UIImage imageNamed:#"Image1"], [UIImage imageNamed:#"Image2"]];
// make the first call
[self animateImages];
}
- (void)animateImages
{
static int count = 0;
UIImage *image = [self.animationImages objectAtIndex:(count % [animationImages count])];
[UIView transitionWithView:self.animationImageView
duration:1.0f // animation duration
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
self.animationImageView.image = image; // change to other image
} completion:^(BOOL finished) {
[self animateImages]; // once finished, repeat again
count++; // this is to keep the reference of which image should be loaded next
}];
}
- (IBAction)press:(id)sender {
UIImage *bomb = [UIImage imageNamed:#"bom"];
UIImageView *bom =[[UIImageView alloc] initWithImage:bomb];
[bom setFrame: CGRectMake(83,115,35,35)];
[self.view addSubview:bom];
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationCurveEaseIn animations:^{
[bom setFrame:CGRectMake(149,47,35,35)];
}
completion:^(BOOL finished)
{
[bom setFrame:CGRectMake(134,40,60,55)];
[bom setImage:[UIImage imageNamed:#"splash"]];
hits++;
_hit.text=[NSString stringWithFormat:#"%i",hits];
}];
}
Here is my code! The object bom here handles the imageview for splash.png image and i want that image to be appeared only for 0.5 sec when each time the button is pressed
You could set up an NSTimer that calls a method which hides the image. You would have to keep a reference to the bomb.
[NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:#selector(hideImage) userInfo:nil repeats:NO];
-(void)hideImage {
self.bomb.hidden = YES;
}
I'm making a very simple game. I have a UIButton and an UIImageView. What I'm trying to do is that when the user presses the button, it will change the image to another image and then back to the original image, to simulate an animation (Character moving)
I have this code:
file.m
{
IBOutlet UIImageView *image1;
IBOutlet UIButton *button;
}
-(IBAction)button:(id)sender;
file.h
-(IBAction)button:(id)sender{
[UIView animateWithDuration:1.0f
animations:^{
image1.alpha = 0.1f;
} completion:^(BOOL finished) {
image1.image = [UIImage imageNamed:#"image2.png"];
[UIView animateWithDuration:0.2f
animations:^{
image1.alpha = 1.0f;
} completion:^ (BOOL finished) {
image1.image = [UIImage imageNamed:#"image1.png"];
}];
}];
}
When I open the iOS simulator and press the button, the image dissolves, then reappears and then does the animation. The problem is that I don't want it to dissolve, I just want to show the animation. How do I prevent this from happening? Is it because I'm using alpha properties?
Thank you!
I used the following code to do what I think is what you need (shown here: https://www.dropbox.com/s/vtcyw0n257tgihx/fade.mov?dl=0):
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:#selector(test)];
iv = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 150, 150)];
iv.image = [UIImage imageNamed:#"red"];
[self.view addSubview:iv];
}
- (void)test {
[UIView animateWithDuration:1.0f animations:^{
iv.alpha = 0.0f;
} completion:^(BOOL finished) {
iv.image = [UIImage imageNamed:#"blue"];
[UIView animateWithDuration:1.0f animations:^{
iv.alpha = 1.0f;
} completion:^ (BOOL finished) {
[UIView animateWithDuration:1.0f animations:^{
iv.alpha = 0.0f;
} completion:^ (BOOL finished) {
iv.image = [UIImage imageNamed:#"red"];
[UIView animateWithDuration:1.0f animations:^{
iv.alpha = 1.0f;
} completion:nil];
}];
}];
}];
}
You need to break it down into four parts. First you need to fade the original image out, change it to the second image, fade the second image in, fade the second image out, change back to the original image, then fade it back in.
I am trying to get a button to move to random locations inside my view. However, the dot only moves at random when it is pressed. I also want it to fade to a different location if it is not pressed. I used CGRect because I need the dot to stay within the bounds of a specific view.
-(IBAction)randomRed:(id)sender
{
[self redDot];
CGRect senderFrame = [sender frame];
CGRect superBounds = [[sender superview ] bounds];
senderFrame.origin.x = (superBounds.size.width - senderFrame.size.width) * drand48();
senderFrame.origin.y = (superBounds.size.height - senderFrame.size.height) * drand48();
[sender setFrame:senderFrame];
counter = counter - 5;
scoreLabel.text = [NSString stringWithFormat:#"Points %i", counter];
NSString *path = [[NSBundle mainBundle] pathForResource:#"Tapadot Red Dot Buzzer Short" ofType:#"mp3"];
sound = [[AVAudioPlayer alloc] initWithContentsOfURL:[NSURL fileURLWithPath:path] error:NULL];
sound.numberOfLoops = 1;
[sound play];
[self subtractOne];
[self performSelector:#selector(showRedDot) withObject:nil afterDelay:1.0];
}
-(void)startRedDot
{
if (counter ==0)
redDot = [NSTimer scheduledTimerWithTimeInterval:4.0
target:self
selector:#selector(showRedDot)
userInfo:nil
repeats:YES];
}
-(void)showRedDot
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
[redButton setAlpha:1];
[UIView commitAnimations];
[self performSelector:#selector(redDot) withObject:nil afterDelay:1.0];
}
-(void)redDot
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[redButton setAlpha:0];
[UIView commitAnimations];
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
[self setUpGame];
[self sizing];
}
Currently your random positioning code is only called when the button is pressed.
To get it to move Independent of button presses we should put it in its own method, which can invoke itself after a set duration.
First we need to get a reference to the instance of the button you want to move so we can manipulate it.
Then lets separate the movement code into its own method.
- (void) moveButtonRandomly {
CGSize limits;
CGPoint newPosition;
// Get limits
limits.width = self.view.frame.size.width - button.frame.size.width;
limits.height = self.view.frame.size.height - button.frame.size.height;
// Calculate new Position
newPosition = (CGPoint){ limits.width * drand48(), limits.height * drand48() };
// Set new frame
button.frame = (CGRect){ newPosition, button.frame.size };
}
Change your startRedDot to this, which will construct, and start the timer.
- (void) startRedDot {
redDotTimer = [NSTimer scheduledTimerWithTimeInterval:4.0
target:self
selector:#selector(moveButtonRandomly)
userInfo:nil
repeats:YES];
[redDotTimer fire];
}
The animation is rather simple to add just create a new method which invokes two animations; One which fades out the button with a completion that moves the button, and fires off the next animation to fade it back in.
- (void) moveButtonWithAnimation {
CGFloat fadeDurration;
if ( !button )
return; // only invoke the button if it exists
fadeDurration = 0.4;
//Fade Out
[UIView animateWithDuration: fadeDurration animations:^{
button.alpha = 0.0f;
} completion:^(BOOL finished) {
// Move the button while it is not visible
[self moveButtonRandomly];
// Fade in
[UIView animateWithDuration: fadeDurration animations:^{
button.alpha = 1.0f;
}];
}];
}
Finally Edit the timers selector to be the animation method.
- (void) startRedDot {
redDotTimer = [NSTimer scheduledTimerWithTimeInterval:4.0
target:self
selector:#selector(moveButtonWithAnimation)
userInfo:nil
repeats:YES];
[redDotTimer fire];
}
I am trying to Display a an Image when the user Taps on the UIImageView. But before the user Taps the UIImageView the Image should not be shown, and after a few seconds the Image should disappear again. Does anyone know how to do this? I read through couple of Threads but they do not work with the latest Xcode as it appears. Thanks for your help and time.
Udate
Well, my code now looks like this:
-(void)imageTapped:(UITapGestureRecognizer*)recognizer
{
recognizer.view.alpha=0.0;
((UIImageView*)recognizer.view).image = [UIImage imageNamed:#"twingo_main.png"];
[UIView animateWithDuration:1.0 delay:2.0 options:0 animations:^{
recognizer.view.alpha=1.0;
} completion:^(BOOL finished) {
recognizer.view.alpha=0.0;
((UIImageView*)recognizer.view).image = nil;
recognizer.view.alpha=1.0;
}];
}
- (void)viewDidLoad
{
UIImageView *hiddenImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 30, 20, 20)];
hiddenImage.userInteractionEnabled=YES;
[hiddenImage addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(imageTapped:)]];
[self.view addSubview:hiddenImage];
Well, now my question is, how do I need to set up the UIImageView in the View Controller?
In your UIViewController's viewDidLoad method:
...
UIImageView *hiddenImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 30, 20, 20)];
hiddenImage.userInteractionEnabled=YES;
[hiddenImage addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(imageTapped:)]];
[self.view addSubview:hiddenImage];
...
UITapGestureRecognizer Handler:
-(void)imageTapped:(UITapGestureRecognizer*)recognizer
{
recognizer.view.alpha=0.0;
((UIImageView*)recognizer.view).image = [UIImage imageNamed:#"imageName"];
[UIView animateWithDuration:1.0 delay:2.0 options:0 animations:^{
recognizer.view.alpha=1.0;
} completion:^(BOOL finished) {
recognizer.view.alpha=0.0;
((UIImageView*)recognizer.view).image = nil;
recognizer.view.alpha=1.0;
}];
}
Set the image in the UIImageView to nil initially. Add a tap gesture recognizer to the UIImageView that, when fired, sets the image and starts a timer. When the timer completes, set your image back to nil.
Here is an another way to handle above with NSTimer..
-(void)imageTapped:(UITapGestureRecognizer*)recognizer
{
CustomPopUpView *lCustomPopUpView = [[CustomPopUpView alloc]init];
//Added your imageview to Custom UIView class
[self.window addSubview:lCustomPopUpView];
[self.window bringSubviewToFront:lCustomPopUpView];
mPopupTimer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:#selector(closePopUp) userInfo:Nil repeats:FALSE];
}
- (void)closePopUp{
if (mPopupTimer != nil) {
[mPopupTimer invalidate];
mPopupTimer = nil;
}
for (UIView *lView in self.window.subviews) {
if ([lView isKindOfClass:[CustomPopUpView class]]) {
[lView removeFromSuperview];
}
}
}
Its better to have view behind the UIImageView to handle the TapGesture.
But here is the fix for you code:
Add this to viewDidLoad method to setup you image view to handle tap gesture
//By default the UserInteraction is disabled in UIImageView
[self.testImageView setUserInteractionEnabled:YES];
UITapGestureRecognizer *tapgesture=[[UITapGestureRecognizer alloc]initWithTarget:self action:#selector(ShowImage:)];
tapgesture.numberOfTapsRequired=1;
tapgesture.numberOfTouchesRequired=1;
[self.testImageView addGestureRecognizer:tapgesture];
here is the method handle the gesture event
-(void)ShowImage:(UIGestureRecognizer*)recognizer{
recognizer.view.alpha=0.0;
((UIImageView*)recognizer.view).image = [UIImage imageNamed:#"clone.jpg"];
[UIView animateWithDuration:1.0 delay:0 options:0 animations:^{
recognizer.view.alpha=1.0;
} completion:^(BOOL finished) {
//[self performSelector:#selector(hideImage:) withObject:recognizer.view afterDelay:10];
[UIView animateWithDuration:1.0 delay:3.0 options:0 animations:^{
recognizer.view.alpha=0.0;
} completion:^(BOOL finished) {
((UIImageView*)recognizer.view).image=nil;
((UIImageView*)recognizer.view).alpha=1.0;
}];
}];
}
If you set the alpha of view to 0, then your view will not receive any touch event further. So its best practice to set it again to 1.0 after removed the image from UIImageView.
You may want to consider using a UIButton. Detecting touches with these is easy - as is changing their image.
You could also subclass UIControl (see http://www.raywenderlich.com/36288/how-to-make-a-custom-control).