Fade In / Fade out 2 Labels infinite loop inside tableview - ios

I'm trying to show an intermittent label with two changing strings (like a banner) in an infinite loop.
The first label should fade in. After that it should fade out and let a second label do the same. Then repeat the sequence infinitely or a long time.
The label is inside a subclass of a UITableView.
I tried this so far:
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
...
// Inside a cell an at its own section of the tableview
cell.label1.alpha = 1;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:3];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationRepeatCount:INFINITY];
[cell.label1 setAlpha:0];
[UIView setAnimationRepeatAutoreverses:YES];
[UIView commitAnimations];
cell.label2.alpha = 1;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:3];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationRepeatCount:INFINITY];
[cell.label1 setAlpha:0];
[UIView setAnimationRepeatAutoreverses:YES];
[UIView commitAnimations];
...
}
This code works fine but the effect is not clear because the fade in label1 is crossing fade out label2 and it is weird.
So, how can I make a break between the two animations, to see the fading labels clearly?

Thanks #Paulw11 for your answer, now it works fine, here is my code with the changes:
cell.label2.alpha = 0;
cell.label1.alpha = 1;
[UIView animateKeyframesWithDuration:15 delay:0.0 options:0 animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.25 animations:^{
cell.label1.alpha = 0;
cell.label2.alpha = 0;
[self.view layoutIfNeeded];
}];
[UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{
cell.label1.alpha = 0;
cell.label2.alpha = 1;
[self.view layoutIfNeeded];
}];
[UIView addKeyframeWithRelativeStartTime:0.50 relativeDuration:0.25 animations:^{
cell.label1.alpha = 0;
cell.label2.alpha = 0;
[self.view layoutIfNeeded];
}];
[UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{
cell.label1.alpha = 1;
cell.label2.alpha = 0;
[self.view layoutIfNeeded];
}];
[UIView setAnimationRepeatCount: 200];
} completion:nil];

Related

Animation is happening in reverse

I'm making a simple animation where when a button is tapped it will change from current position to a certain point. But what's happening is the opposite: it goes from the destination point to the original position. Here's my code:
[UIView animateWithDuration:1.0
delay:0.0
usingSpringWithDamping:0.2
initialSpringVelocity:0.0
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
[self.view layoutIfNeeded];
CGFloat amount = 100;
self.checkButton.frame = CGRectOffset(self.checkButton.frame, amount, 0);
} completion:^(BOOL finished) {
}];
Make an outlet to the constraint that determine the horizontal position of the checkButton. e.g."hPos".
- (IBAction)tapHandler:(id)sender {
self.hPos.constant = self.hPos.constant + 100;
[UIView animateWithDuration:1.0
delay:0.0
usingSpringWithDamping:0.2
initialSpringVelocity:0.0
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{ [self.view layoutIfNeeded]; }
completion:nil];
}

How to animate a UILabel after another

I currently animate two UILabel as such:
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:2.0];
[_temperatureLabel setAlpha:1];
[_tempDescriptionLabel setAlpha:1];
[UIView commitAnimations];
However, I want to show the first label _temperatureLabel then once that is done animating (or maybe halfway through) start animating the second label _tempDescriptionLabel.
as I said I'll answer:
[UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
//set alpha 1 for first UILabel
_temperatureLabel.alpha = 1;
} completion:^(BOOL finished){
[UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
//when finished enter here
//set alpha 1 for second UILabel
_tempDescriptionLabel.alpha = 1;
} completion:^(BOOL finished){
}];
}];
remember to add QuartzCore framework, and add #import <QuartzCore/QuartzCore.h>
For doing halfWay or any other mid way time,
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:2.0];
[_temperatureLabel setAlpha:1];
[UIView commitAnimations];
[self performSelector:#selector(halfWayStart:) withObject:nil afterDelay:1.0];
-(void)halfWayStart:(id)object{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:2.0];
[_tempDescriptionLabel setAlpha:1];
[UIView commitAnimations];
}
so, changing the afterDelay time value in performSelector call will help you to start other animation any time.

how to use array in uiview animation

I created a UIView Animation, my array contains 10 images. I want to move one place to another place when button is pressed. Below code is working but problem is all 10 images is moving.
-(IBAction)moveImageAtIndex:(int)index {
UIButton *buttonCelebrate = [redAppleArray objectAtIndex:j];
UIButton *buttonRefer = [reffButtonArray objectAtIndex:j];
currentView = buttonCelebrate;
CGRect frame = currentView.frame;
CGRect frame1 = buttonRefer.frame;
frame.origin.x = frame1.origin.x;
frame.origin.y = frame1.origin.y;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration: 2.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
currentView.frame = frame;
[UIView animateWithDuration:2.0 animations:^
{
[currentView setTransform:CGAffineTransformIdentity];
}completion:^(BOOL finished) {
if (finished) {
if(index != [redAppleArray count] - 1) {
[self moveImageAtIndex:index+1];
}
}
}];
[UIView commitAnimations];
}
Expected Output is: I want to move one by one instead of all.
screenshot
You have to wait until the current animation has finished, then you can start the next animation. A simple solution is to use recursion:
-(void)moveImageAtIndex:(int)index {
[UIView animateWithDuration:2.0 animations:^{
//Do animation
}completion:^(BOOL finished) {
if (finished) {
if(index != [redAppleArray count] - 1) {
[self moveImageAtIndex:index + 1];
}
}
}];
}
Remove the code from loop and keep in the method which is called by button then by pressing the button your images in array will be moved one by one according to user clicks.
declare i as int in the .h file and make i value as 0 in viewDidLoad and Don't forget to increment the i value in the end
use below code
-(void)viewDidLoad {
i=0;
[super viewDidLoad];
}
-(IBAction)methodName:(id)sender {
UIButton *buttonCelebrate = [redAppleArray objectAtIndex:index];
currentView = buttonCelebrate;
CGRect frame = currentView.frame;
CGRect frame1 = reffButton.frame;
frame.origin.x = frame1.origin.x;
frame.origin.y = frame1.origin.y;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration: 2.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
currentView.frame = frame;
[UIView animateWithDuration:2.0 animations:^
{
[currentView setTransform:CGAffineTransformIdentity];
}completion:^(BOOL finished) {
if (finished) {
}
}];
[UIView commitAnimations];
i++;
}
as per the Eric use below code
You have to wait until the current animation has finished, then you can start the next animation. A simple solution is to use recursion:
-(void)moveImageAtIndex:(int)index {
[UIView animateWithDuration:2.0 animations:^{
UIButton *buttonCelebrate = [redAppleArray objectAtIndex:i];
currentView = buttonCelebrate;
CGRect frame = currentView.frame;
CGRect frame1 = reffButton.frame;
frame.origin.x = frame1.origin.x;
frame.origin.y = frame1.origin.y;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration: 2.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
currentView.frame = frame;
[UIView animateWithDuration:2.0 animations:^
{
[currentView setTransform:CGAffineTransformIdentity];
}completion:^(BOOL finished) {
if (finished) {
if(index != [redAppleArray count] - 1) {
[self moveImageAtIndex:index + 1];
}
}
}];
[UIView commitAnimations];
}
The new solution is:
-(void)moveImageStartAtIndex:(int)index withHowMany:(int)howMany{
[UIView animateWithDuration:2.0 animations:^{
//Do animation
}completion:^(BOOL finished) {
if (finished) {
if(howMany > 1) {
[self moveImageStartAtIndex:index + 1 withHowMany:howMany - 1];
}
}
}];
}

How do I have text fade in to a UILabel?

Right now I have an IBAction for a button which generates a random number with each number assigned to display text in a UILabel. Rather than just appear, I would like the text to fade in or any other interesting animation would be cool too. Does anyone know a simple way to make this happen?
Right now I just use
labelMain.text = #"my text";
I know this is a bit stale (11 months old), but I think it's worth mentioning an alternative to the other approaches posted, which I feel is a better solution.
Make use of the UIView transitionWithView:duration:options:animations:completion class-level method, like this:
NSTimeInterval duration = 0.5f;
[UIView transitionWithView:labelMain
duration:duration
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
labelMain.text = #"new value";
} completion:nil];
This will cross-fade from the previous value of labelMain.text to "new value".
This approach works on other view values as well, such as changing the image of a UIImageView, for instance.
See Apple's docs on the topic.
The following code will give you fading effect on your label.
- (IBAction)buttonClicked:(UIButton *)sender
{
labelMain.alpha = 0;
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseIn
animations:^{ labelMain.alpha = 1;}
completion:nil];
}
label.text = #"old text";
[UIView animateWithDuration:0.4 animations:^{
label.alpha = 0.0f;
} completion:^(BOOL finished) {
label.text = #"next text";
[UIView animateWithDuration:0.4 animations:^{
label.alpha = 1.0f;
} completion:^(BOOL finished) {
NSLog(#"finished transition");
}];
}];
Try this:
[labelMain setAlpha:0];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.8];
[labelMain setAlpha:1];
[UIView commitAnimations];
Changing the duration is pretty simple - just adjust the value 0.8 in the code.
// fade out the current value
[UIView animateWithDuration:0.2
delay:0
options:0
animations:^{
labelMain.alpha = 0.0f;
}
completion:^(BOOL finished) {
// set the new value and fade in
labelMain.text = newValue;
[UIView animateWithDuration:0.2
delay:0
options:0
animations:^{
labelMain.alpha = 1.0f;
}
completion:nil];
}];
This will look like cross fade animation
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseOut
animations:^{
labelMain.alpha = 0;
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseIn
animations:^{ labelMain.alpha = 1;}
completion:nil];
} completion:nil];

UIViewanimation animationDidStop method

I have a 8 imagaviews that I have added to my view with size (0,0). Now what I want to do is to pull op each imageView after each other with a UIViewanimation. I want to do 2 animations. First the size should go to from (0,0) --> (105,85) and after that is finished the imageview size should go from (105,85) --> (93,75)
Now I have a method where I first place all my imageViews on the correct place.All the images have size (0,0) At the end I call the method startAnimating
-(void)startAnimating{
[self animageButton:[arrButtons objectAtIndex:0]];
}
Then the first view animation ( from (0,0) --> (105,85) )
-(void)animageButton:(UIImageView *)imgButton{
loopIndex++;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:2.0];
[UIView setAnimationDelegate:self];
CGRect btnFrame = imgButton.frame;
btnFrame.size.width = 105;
btnFrame.size.height = 85;
[UIView transitionWithView:self.view
duration:0.5f
options:UIViewAnimationOptionCurveEaseIn
animations:^{
imgButton.frame = btnFrame;
}
completion:nil];
[UIView commitAnimations];
[self animageButton2:imgButton];
}
this calls the second method (from (105,85) --> (93,75))
-(void)animageButton2:(UIImageView *)imgButton{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:2.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector: #selector(animationDidStop:finished:context:)];
CGRect btnFrame2 = imgButton.frame;
btnFrame2.size.width = 93;
btnFrame2.size.height = 75;
[UIView transitionWithView:self.view
duration:0.5f
options:UIViewAnimationOptionCurveEaseIn
animations:^{
imgButton.frame = btnFrame2;
}
completion:nil];
[UIView commitAnimations];
}
Now at this point the first imageView should be animated. Now when the animation has finished. I to this.
-(void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
//do smth
if(loopIndex <= 7){
NSLog(#"called");
UIImageView *imgObj = [arrButtons objectAtIndex:loopIndex];
[self animageButton:imgObj];
}else{
NSLog(#"done");
return;
}
}
What it is doing at the moment it is animating all the images at the same time. But I want that the next imageview starts animating when the previous has done.
Can anyone help me with this ?
-(void)startAnimating
{
NSTimeInterval delay = 0.0;
for(UIImageView *imageView in arrButtons)
{
[self performSelector:#selector(animageButton:) withObject:imageView afterDelay:delay];
delay +=1.0;
}
}
-(void)animageButton:(UIImageView *)imgButton{
CGRect btnFrame = imgButton.frame;
btnFrame.size.width = 105;
btnFrame.size.height = 85;
[UIView animateWithDuration:0.5f animations:^{
imgButton.frame = btnFrame;
} completion:^(BOOL finished) {
[self animageButton2:imgButton];
}];
}
-(void)animageButton2:(UIImageView *)imgButton
{
CGRect btnFrame2 = imgButton.frame;
btnFrame2.size.width = 93;
btnFrame2.size.height = 75;
[UIView animateWithDuration:0.5f animations:^{
imgButton.frame = btnFrame2;
} completion:^(BOOL finished) {
}];
}
I have not tested the code. Let me know if there are any issues. Thanks.

Resources