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
Related
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];
}];
I have a UIButton laid out using storyboard. The button just contains an image. When the button is clicked, I want to animate the size of the button - decrease in size and then bring it back to the original size again.
I used the following code -
[UIView animateWithDuration:2.0 animations:^{
_favButton.transform = CGAffineTransformMakeScale(0.5, 0.5);
}completion:^(BOOL finished) {
[UIView animateWithDuration:2.0 animations:^{
_favButton.transform = CGAffineTransformMakeScale(1, 1);
}];
}];
This code moves my button on the screen which I do not want. I want the center of the button to be fixed and the size be animated.
I have not used any Top Constraint in the storyboard for the button. How can I rectify this behaviour?
If you have auto layout turned on, you would need to turn it off.
But it doesn't seem to your problem here as per your description.
I would do the following to re-adjust to the center as it scales:
CGPoint cP = _favButton.center;
[UIView animateWithDuration:2.0 animations:^
{
_favButton.transform = CGAffineTransformMakeScale(0.5, 0.5);
_favButton.layer.position = cp;
}
completion:^(BOOL finished)
{
[UIView animateWithDuration:2.0 animations:^
{
_favButton.transform = CGAffineTransformMakeScale(1, 1);
_favButton.layer.position = cp;
}];
}];
Hope this helps.
SWIFT 3
button.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)
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;
}];
Good evening,
I scale down a UIView by using CGAffineTransformScale.
[UIView animateWithDuration:0.3 animations:^{
gridContainerView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.2, 0.2);
gridContainerView.alpha = 0.0;
} completion:^(BOOL finished) {
// show UIView B
}];
and scale it back to its original size:
[UIView animateWithDuration:0.3 animations:^{
gridContainerView.transform = CGAffineTransformIdentity;
gridContainerView.alpha = 1.0;
} completion:^(BOOL finished) {
// remove UIView B
}];
This works fine. The gridContainerView get scaled down to the center of the screen. However, if I change the devices orientation (to a.e. landscape) the center is somehow shifted to the bottom left. The transformation is not going to the center of the screen anymore once I change orientation.
The only way to fix this is to release the gridContainerView and reallocate/init it. But unfortunately this is not an option for me at this point.
Any help is truly appreciated.
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.