Animation with images when I click on it - ios

I would like that when I click on the image, another image appears for 1 or 2 seconds.
I have two images (UIImage), one for pressed and another for unpressed.
Is it something like this? :
[UIView animateWithDuration: 0.2 delay: 0.0 options: UIViewAnimationOptionAutoreverse animations:^{
pressed.alpha = 1.0;
unPressed.alpha = 0.0;
}completion:^(BOOL finished){
pressed.alpha = 0.0;
unPressed.alpha = 1.0;
}];
But with that I can't see the pressed image.
Edit: My problem is to asign the image to the UIImageView I think, because when I click on it appear the pressed image but then the unPressed image not appear
I would like any similar to that:
[UIView animateWithDuration: 2.0 delay: 0.0 options: UIViewAnimationOptionAutoreverse animations:^{
pressed.alpha = 1.0;
unPressed.alpha = 0.0;
self.imageButton.image = pressed.image;
}completion:^(BOOL finished){
pressed.alpha = 0.0;
unPressed.alpha = 1.0;
self.imageButton.image = unPressed.image;
}];

First off, you set the animation duration to .2 so you may want to increase the duration to 1.0 or 2.0 if you in fact want it to show for 1 or 2 seconds.
Secondly, I'm assuming these images overlap one another, so when both alphas are 1, still only one of the images will be showing. Make sure unPressed is hidden before starting the animation; then make sure pressed is hidden after ending the animation.
unPressed.alpha = 0;
[UIView animateWithDuration: 2.0 delay: 0.0 options: UIViewAnimationOptionAutoreverse animations:^{
pressed.alpha = 1.0;
} completion:^(BOOL finished){
pulsando.alpha = 0.0;
pressed.alpha = 0.0;
unPressed.alpha = 1.0;
}];
(And one more question for you… You said you wanted the image to appear for 1 or 2 seconds. Did you want the image to just appear? Or did you want it to fade in? Just double checking… Because if you just want it to appear, you don't need the animation block.)
Edit: (In response to your edit)
Seems as if you don't need an animation block at all and that you're just trying to have the image appear for 2 seconds. In which case, when the button is pressed, show the image then hide the image after 2 seconds. For example:
- (IBAction)buttonSelected:(UIButton*)sender {
pressed.alpha = 1.0;
unPressed.alpha = 0.0;
[self performSelector:#selector(hidePressedImage) withObject:nil afterDelay:2.0];
}
- (void)hidePressedImage {
pressed.alpha = 0.0;
unPressed.alpha = 1.0;
}

Two images but three variables. Every time you run this function you will see the unPressed image + pressed image (and you will see the one that was added to the view at a later time, since it will be in front).

Maybe pressed image is overlapped by normal? Try following:
[UIView animateWithDuration: 0.2 delay: 0.0 options: UIViewAnimationOptionAutoreverse animations:^{
pressed.alpha = 1.0;
unPressed.alpha = 0.0;
}completion:^(BOOL finished){
pulsando.alpha = 0.0;
unPressed.alpha = 1.0;
pressed.alpha = 0.0;
}];

Related

How to reduce the opacity of an UIButton gradually?

In my project i have an UIButton which on clicking zooms. Everything is fine till here but i require the opacity of the button to gradually decrease from 1 to 0. I mean it should decrease in 1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0.0 sequence. My current code is
-(void)roundButtonAnimation
{
self.buttonZoom = [CAKeyframeAnimation animationWithKeyPath:#"transform"];
self.buttonZoom.duration = 0.8f;
self.buttonZoom.values = #[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(2,2,2)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(3,3,3)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(5,5,5)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(6,6,6)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(7,7,7)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(9,9,9)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(10,10,10)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(11,11,11)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(12,12,12)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(13,13,13)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(14,14,14)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(15,15,15)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(16,16,16)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(17,17,17)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(18,18,18)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(50,50,50)]];
self.buttonZoom.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
self.roundButton.transform = CGAffineTransformMakeScale(0,0);
self.roundButton.alpha = 0.3;
[self.roundButton.layer addAnimation:self.buttonZoom forKey:#"buttonScale"];
[self.CLSpinnerView1 stopAnimating];
//[self performSelector:#selector(secondView) withObject:self afterDelay:0.3];
[self performSelector:#selector(postNotification) withObject:self afterDelay:0.6];
}
[UIView animateWithDuration:1.0
delay:0.0
options: UIViewAnimationCurveLinear
animations:^{
self.roundButton.transform = CGAffineTransformMakeScale(50.0f, 50.0f);
self.roundButton.alpha = 0.0;
}
completion:^(BOOL finished){
NSLog(#"Done!");
}];
}
Let's explain a little, in this animation block you say that the animation should take place in one second, during this second based on a linear curve (thus always equal increment/decrement) the button should zoom 50 times and alpha should be animate to 0.
I do not understand why you are using a more complicated CAKeyframeAnimation over that simple animation block.
Keyframe animation are useful when you want more power over timings and animate over a set of values.
UIView animateWithDuration:animations: should serve your purpose here.
[UIView animateWithDuration:1.0 animations:^{
button.alpha = 0.0;
}];
Will gradually change the button's alpha to 0 over one second (...WithDuration:1.0...).
See the The UIView Class Reference for more information.
Hope this helps.
Try this
[button.layer removeAnimationForKey:#"opacity"];

How to fade a label's background color with animateWithDuration

I'm trying to fade a label's background color by using animateWithDuration, but my code isn't working out. Here's what I've got:
.h (in #interface...)
IBOutlet UILabel *labelColor;
.m (in viewDidLoad method)
[labelColor setBackgroundColor:[UIColor colorWithRed:55/255.0 green:191/255.0 blue:122/255.0 alpha:0.3]];
if (labelColor.alpha >= 0.3) {
[UIView animateWithDuration:1 animations:^{
labelColor.alpha = 0.3;
labelColor.alpha = 1.0;
}];
} else if (labelColor.alpha == 1.0) {
labelColor.alpha = 0.3;
}
The color shows up at 0.3 alpha, but doesn't fade from 0.3 to 1.0. I'm trying to make it so the label's color fades from 0.3 to 1.0 in a continuous loop, resetting the alpha to 0.3 as the it hits 1.0.
Any help on how to achieve this is appreciated.
There are a few problems with your current code:
(1) Your else statement will never be called since if labelColor.alpha == 1.0 it will also be >= .3
(2) Having both labelColor.alpha = 0.3; and labelColor.alpha = 1.0; within your animation block means that only the second line (i.e. labelColor.alpha = 1.0;) will dictate the animation
(3) You haven't set up a loop as you'd like
(4) You haven't animated the fade out
If I'm in fact understanding what it is you're trying to accomplish, you could continuously fade the entire UILabel in and out like so:
- (void)performLabelFade {
// If the label is faded out, fade it in
if (labelColor.alpha == .3) {
[UIView animateWithDuration:1 animations:^{
labelColor.alpha = 1.0;
} completion:^(BOOL finished) {
// Repeat the current method (i.e. like a loop)
[self performLabelFade];
}
}
// Else if the label is faded in, fade it out
else if (labelColor.alpha == 1.0) {
[UIView animateWithDuration:1 animations:^{
labelColor.alpha = 0.3;
} completion:^(BOOL finished) {
// Repeat the current method (i.e. like a loop)
[self performLabelFade];
}
}
}
You should set your initial conditions outside of the animation block.
labelColor.alpha = 0.3;
[UIView animateWithDuration:1 animations:^{
labelColor.alpha = 1.0;
}];
Side note: This will fade the alpha value of the entire UILabel, not just the background colour. If you want the text to stick around while your background fades, you should be using something more along these lines:
labelColor.backgroundColor = [UIColor colorWithRed:55/255.0 green:191/255.0 blue:122/255.0 alpha:0.3];
[UIView animateWithDuration:1 animations:^{
labelColor.backgroundColor = [UIColor colorWithRed:55/255.0 green:191/255.0 blue:122/255.0 alpha:1.0];
}];

UIView doesn't animate alpha [duplicate]

This question already has answers here:
Problems animating UIView alpha
(6 answers)
Closed 8 years ago.
I am trying to animate alpha of my view but I couldn't get it to working.
self.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView animateWithDuration:1.5 animations:^{
self.alpha = 0;
self.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
self.alpha = 1;
}];
The animation works, but alpha is static at 1. The transform animates correctly though. If I remove setting the transform (just to test if it's caused by that), nothing happens.
I've also tried repeating the animation, it repeats but alpha is always 1:
[UIView animateWithDuration:1.5 delay:delay
options:(UIViewAnimationOptionRepeat
| UIViewAnimationOptionCurveEaseInOut
| UIViewAnimationOptionTransitionNone) animations:^{
self.alpha = 0;
self.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
if(finished){
self.alpha = 1;
}
}];
Why could this be?
I've found the solution. It had multiple issues. First one, the view was opaque. I've set opaque to NO and nothing happened. Then I've realized that I was starting with alpha = 0, I've also changed that and it started animating the way I wanted.
Credit goes to Hampus Nilsson's comment here: Problems animating UIView alpha

Show Hide UIView Twice Every 5 Seconds Using NSTimer

I have a UIView added to a view controller. I want to make it blink twice every 5 seconds.
The following code makes the UIView blink on and off every 1 second:
-(void) showHideView{
[UIView animateWithDuration:1
delay:5
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
self.myview.alpha = 0;
}
completion:^(BOOL finished){
[UIView animateWithDuration:1
delay:5
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
self.myview.alpha = 1;
}
completion:nil
];
}
];
}
How can I make the UIView blink twice every 5 seconds? (i.e. a pulse of two blinks)
Since you've flagged this with iOS7, I might suggest keyframe animation:
[UIView animateKeyframesWithDuration:2.5 delay:0.0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.25 animations:^{
self.myview.alpha = 0.0;
}];
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{
self.myview.alpha = 1.0;
}];
} completion:nil];
Tweak total duration (how often the cycle repeats), the relative start times (a % of the total duration), and the relative duration (again, a % of the total duration) as you see fit.
Change both of your delays to zero.
Set both durations to 1.25.
Use a timer to call the method every 2.5 seconds.
How do I use NSTimer?
Edit based on comments:
Use this instead:
-(void) showHideView {
if( self.view.alpha == 1.0 ) alpha = 0.0;
else alpha = 1.0;
}
- (void)timerCallback {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 1.25 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
[self showHideView];
});
// repeat above code for 2.5, 3.75, 5.0
}
Make your timer call timerCallback every 5 seconds.

Animating a scaling view from a corner (zooming in)

I'm trying to scale my view like so:
CGRect endFrame = self.detailView.bounds;
[UIView animateWithDuration:0.25 animations:^{
self.descriptionButton.bounds = endFrame;
}completion:^(BOOL finished) {
self.containerView.alpha = 0.0;
self.detailView.alpha = 1.0;
}];
My detailView is the container view. My descriptionButton is in the upper left corner. I want to give a zoom in type effect by having the button take up the whole screen. However, by default Core Animation scales from the anchor point at its center.
I tried setting the anchor point to the lower right corner of the view's layer like this:
self.descriptionButton.layer.anchorPoint = CGPointMake(self.descriptionButton.bounds.size.width, self.descriptionButton.bounds.size.height);
CGRect endFrame = self.detailView.bounds;
[UIView animateWithDuration:0.25 animations:^{
self.descriptionButton.bounds = endFrame;
}completion:^(BOOL finished) {
self.containerView.alpha = 0.0;
self.detailView.alpha = 1.0;
}];
But when I do that, I don't see any animation at all. Any thoughts? Thanks.
You can just use a little math
CGRect endFrame = self.detailView.frame;
CGRect currentFrame = self.detailView.frame;
[UIView animateWithDuration:0.25 animations:^
{
self.descriptionButton.frame = CGRectMake(currentFrame.x - (endFrame.size.width - currentFrame.size.width), currentFrame.y - (endFrame.size.height - currentFrame.size.height), endFrame.size.width, endFrame.size.height);
}
completion:^(BOOL finished)
{
self.containerView.alpha = 0.0;
self.detailView.alpha = 1.0;
}];
The anchorPoint property is "normalized" to values from 0 to 1. 0.5, 0.5 is the center. 0,0 is top left. 1,1 is bottom right.
Your code is setting the anchorPoint property using pixel coordinates, which is wrong. I don't know what it would do, but it's wrong.

Resources