I'm new to iPhone development, and doing some experimentation with Core Animation. I've run into a small problem regarding the duration of the animation I'm attempting.
Basically, Ive got a view with two subviews, and I'm trying to animate their opacity so that one fades in while the other fades out. Problem is, instead of a gradual fade in/out, the subviews simply switch instantly to/from full/zero opacity. I've tried to adjust the animation duration with CATransaction with no noticable effect. It's also not specific to animating opacity - animating position shows the same problem.
The code I'm using (inside a method of the superview) follows:
CALayer* oldLayer = ((UIView*) [[self subviews] objectAtIndex:0]).layer;
CALayer* newLayer = ((UIView*) [[self subviews] objectAtIndex:1]).layer;
[CATransaction begin];
[CATransaction setAnimationDuration:1.0f];
oldLayer.opacity = 0.0;
newLayer.opacity = 1.0;
[CATransaction commit];
Does anyone have an idea what the problem might be?
Noah's solution is the cleanest way to do what you want, but the reason why you're not seeing the animation is that implicit animations are disabled for CALayers that back UIViews. Because nothing is animating, the CATransaction is unable to set the duration for anything.
If you really wanted to perform this animation on the layer, you'd need to set up a manual CABasicAnimation to do this:
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
opacityAnimation.removedOnCompletion = NO;
opacityAnimation.fillMode = kCAFillModeForwards;
[oldLayer addAnimation:opacityAnimation forKey:#"opacity"];
[newLayer addAnimation:opacityAnimation forKey:#"opacity"];
[CATransaction begin];
[CATransaction setAnimationDuration:1.0f];
oldLayer.opacity = 0.0;
newLayer.opacity = 1.0;
[CATransaction commit];
(Note that I'm not sure if you can re-use the opacity animation here. You might need to create separate instances for each layer.)
Is there a reason you're using Core Animation over the generic UIView animation wrapper? It's pretty straightforward to do something like this with
UIView *oldView = [[self subviews] objectAtIndex:0];
UIView *newView = [[self subviews] objectAtIndex:1];
[UIView beginAnimations:#"swapViews" context:nil];
[UIView setAnimationDuration:1];
oldView.alpha = 0;
newView.alpha = 1;
[UIView commitAnimations];
Do you need to use an explicit CATransaction here?
The docs here imply that you don't.
Related
I am trying to animate the color the the text on a UILabel to pulse from: [Black] to [White] to [Black] and repeat.
- (void)timerFlash:(NSTimer *)timer {
[[self navTitle] setTextColor:[[UIColor whiteColor] colorWithAlphaComponent:0.0]];
[UIView animateWithDuration:1
delay:0
options:UIViewAnimationOptionAllowUserInteraction
animations:^{[[self navTitle] setTextColor:[[UIColor whiteColor] colorWithAlphaComponent:1.0]];}
completion:nil];
}
.
[self setFadeTimer:[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:#selector(timerFlash:) userInfo:nil repeats:YES]];
Firstly I am not sure of my method, my plan (as you can see above) was to set up a animation block and call it using a repeating NSTimer until canceled.
My second problem (as you can see above) is that I am animating from black (alpha 0) to white (alpha 1) but I don't know how to animate back to black again so the animation loops seamlessly
Essentially what I want is the text color to pulse on a UILabel until the user presses a button to continue.
EDIT_001:
I was getting into trouble because you can't animate [UILabel setColor:] you can however animated [UILabel setAlpha:] so I am going to give that a go.
EDIT_002:
- (void)timerFlash:(NSTimer *)timer {
[[self navTitle] setAlpha:0.5];
[UIView animateWithDuration:2
delay:0
options:UIViewAnimationOptionAllowUserInteraction
animations:^{[[self navTitle] setAlpha:0.9];}
completion:nil];
}
This works (BTW: I do want it to stop which is why I hooked it up to a NSTimer so I can cancel that) the only thing is that this animates from midGray to nearWhite and then pops back. Does anyone know how I would animate back from nearWhite to midGray so I get a nice smooth cycle?
EDIT_003: (Solution)
The code suggested by Dave DeLong (see below) does indeed work when modified to use the CALayer opacity style attribute:
UILabel *navTitle;
#property(nonatomic, retain) UILabel *navTitle;
.
// ADD ANIMATION
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:#"opacity"];
[anim setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[anim setFromValue:[NSNumber numberWithFloat:0.5]];
[anim setToValue:[NSNumber numberWithFloat:1.0]];
[anim setAutoreverses:YES];
[anim setDuration:0.5];
[[[self navTitle] layer] addAnimation:anim forKey:#"flash"];
.
// REMOVE ANIMATION
[[[self navTitle] layer] removeAnimationForKey:#"flash"];
You could probably do this with a CAAnimation. I just pushed a little demo project I did a while ago onto github. It shows the olympic logo, and makes the rings fly around to a random location on the screen, then animate back to their original position. You could probably do something very similar, but obviously not using the position property.
Here's the basic code to make one of the rings fly around:
CABasicAnimation * a = [CABasicAnimation animationWithKeyPath:#"position"];
[a setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[a setFromValue:[NSValue valueWithCGPoint:[layer position]]];
[a setToValue:[NSValue valueWithCGPoint:[self randomPoint]]];
[a setAutoreverses:YES];
[a setDuration:1.0];
[layer addAnimation:a forKey:nil];
Your fromValue and toValue values would be CGColorRefs, and your animation keypath would be different, but the trick here is the setAutoreverses:YES. This will animate from the fromValue to the toValue, and then back to the fromValue. It's pretty darn handy. :)
https://github.com/davedelong/Demos/blob/master/OlympicRings
If that doesn't work (and it might not), then I might just layer two UILabels on top of each other and animate their alpha values from 0.0 to 1.0 (or vice versa) at the same time.
If you just want it to happen indefinitely, you can use Dave DeLong's answer, or this:
[UIView animateWithDuration:1
delay:0
options:UIViewAnimationOptionAllowUserInteraction |
UIViewAnimationOptionAutoreverse |
UIViewAnimationOptionRepeat
animations:^{[[self navTitle] setTextColor:[UIColor whiteColor]];}
completion:nil];
The advantage of using CAAnimation, of course, is that you can remove the animation later; with this, to stop it you'd have to dig down into the CALayer and find the animation to stop it.
You suggested, however, that UILabel.textColor might not be animatable. That's a possibility. If so, you can use this same technique to transition between two UILabels of the different colors and just fade their alpha values.
(same as here Cancel block in UIView animateWithDuration)
I just repeat the animation and kill it after some time with a dispatch block:
- (void)animate // Blink a view three times
{
// We need to stop the animation after a while (0.9 sec)
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, 0.9 * NSEC_PER_SEC);
dispatch_after(popTime, dispatch_get_main_queue(), ^(void)
{
[view.layer removeAllAnimations];
view.alpha = 0.0; // Animation clean-up
});
[UIView animateWithDuration:0.15 // 0.15*6=0.9: It will animate six times (three in reverse)
delay:0.0
options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat
animations:^{
view.alpha = 1.0; // Animation
}
completion:NULL];
}
How can I fade from one background-color to another color in a UIView?
In javascript (jQuery) it can be done by doing the following:
$('body').animate({ backgroundColor: "#ff00ff"});
Would it be easier if I converted the colors to HSV?
EDIT:
Tried to do it with CABasicAnimation but it flashes white for unknown reasons. :/
CABasicAnimation* fade = [CABasicAnimation animationWithKeyPath:#"backgroundColor"];
fade.fillMode = kCAFillModeForwards;
fade.removedOnCompletion = NO;
// fade.fromValue = (id)[self.view backgroundColor].CGColor;
fade.toValue = (id)[UIColor greenColor].CGColor;
[self.view.layer addAnimation:fade forKey:#"fade"];
Then I tried to find another way to do it and stumbled upon "implicit animation". The following works with a nice fade of a second:
[UIView beginAnimations:#"fade" context:nil];
[UIView setAnimationDuration:1];
[[self view] setBackgroundColor: [UIColor greenColor]];
[UIView commitAnimations];
Thanks, StackOverflow, for helping everyone learn even more. :)
You don't need to create two UIView and fade - why bother having an extra superfluous view hanging around when the color attribute itself is animatable?
You can use CAAnimation as shown above, but instead of adjusting the opacity of two views just adjust the backgroundColor of one.
http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/Animation_Types_Timing/Articles/PropertyAnimations.html
i want to replicate the animation when an app starts on iPhone.
There is the first view scaling up from 50 % to 100% i think.
later I want to use this as a transition between 2 views.
Any ideas how to replicate, or is there a ready to use solution from apple in the sdk?
Thank you very much :)
You can do the same thing with CABasicAnimation and CAAnimationGroup, I actually thought that Core Animation over UIKit Animations was smoother and It gives you more control.
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.removedOnCompletion = YES;
CABasicAnimation *fadeAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
fadeAnimation.fromValue = [NSNumber numberWithFloat:0.0];
fadeAnimation.toValue = [NSNumber numberWithFloat:1.0];
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:0.5];
scaleAnimation.toValue = [NSNumber numberWithFloat:1.00];
animationGroup.animations = [NSArray arrayWithObjects:fadeAnimation, scaleAnimation, nil];
[self.layer addAnimation:animationGroup forKey:#"fadeAnimation"];
self.layer.opacity = 1.0;
"There's always more then one way to skin a cat"
You can apply a scale transform to the UIView and then animate it back to it's normal state.
// Set the the view's scale to half
[viewToScale setTransform:CGAffineTransformMakeScale(0.5,0.5)];
// Set the transform back to normal (identity) in an animation when you're
// ready to animate
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
[viewToScale setTransform:CGAffineTransformIdentity];
[UIView commitAnimations];
The trick will be you will need to set the view to the smaller scale in a separate run cycle from the animation or you won't see the view animate. So you can set the smaller scale and then call -performSelector:withObject:afterDelay: to actually perform the animation.
I'm using a CAKeyframeAnimation to animate a view along a CGPath. When the animation is done, I'd like to be able to call some other method to perform another action. Is there a good way to do this?
I've looked at using UIView's setAnimationDidStopSelector:, however from the docs this looks like it only applies when used within a UIView animation block (beginAnimations and commitAnimations). I also gave it a try just in case, but it doesn't seem to work.
Here's some sample code (this is within a custom UIView sub-class method):
// These have no effect since they're not in a UIView Animation Block
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(animationDidStop:finished:context:)];
// Set up path movement
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"path"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = 1.0f;
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, self.center.x, self.center.y);
// add all points to the path
for (NSValue* value in myPoints) {
CGPoint nextPoint = [value CGPointValue];
CGPathAddLineToPoint(path, NULL, nextPoint.x, nextPoint.y);
}
pathAnimation.path = path;
CGPathRelease(path);
[self.layer addAnimation:pathAnimation forKey:#"pathAnimation"];
A workaround I was considering that should work, but doesn't seem like the best way, is to use NSObject's performSelector:withObject:afterDelay:. As long as I set the delay equal to the duration of the animation, then it should be fine.
Is there a better way? Thanks!
Or you can enclose your animation with:
[CATransaction begin];
[CATransaction setCompletionBlock:^{
/* what to do next */
}];
/* your animation code */
[CATransaction commit];
And set the completion block to handle what you need to do.
CAKeyframeAnimation is a subclass of CAAnimation. There is a delegate property in CAAnimation. The delegate can implement the -animationDidStop:finished: method. The rest should be easy.
Swift 3 syntax for this answer.
CATransaction.begin()
CATransaction.setCompletionBlock {
//Actions to be done after animation
}
//Animation Code
CATransaction.commit()
I want to achieve the effect of fade in / fade out the rect or text. I call CGContextFillRect or CGContextShowText in my UIVIew's drawRect: method. I wonder if there is a way to achieve the animation without using UIView' support(i.e. [UIView beginAnimations::]. The desired effect I want to achieve is similar to what in Microsoft's bing serach engine, like those small black squares fade in/ fade out as you move around the web page. Thanks in advance!
Why do you not want to use UIView's animation blocks? Animating a change in opacity of a view (UILabel or otherwise) with that is pretty easy. For example, the following code will fade out a given view over a duration of 0.5 seconds:
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5f];
viewToFadeOut.alpha = 0.0f;
[UIView commitAnimations];
To fade in, simply replace the alpha value of 0.0f with 1.0f.
You can do the same using a manually constructed CABasicAnimation, manipulating the UIView's layer:
CABasicAnimation *fadeOutAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
fadeOutAnimation.duration = 0.5f;
fadeOutAnimation.removedOnCompletion = NO;
fadeOutAnimation.fillMode = kCAFillModeForwards;
fadeOutAnimation.toValue = [NSNumber numberWithFloat:0.0f];
[viewToFadeOut.layer addAnimation:fadeOutAnimation forKey:#"animateOpacity"];
If all you want to do is fade in / out a border around a view, try animating the borderColor property of the UIView's layer (same as the above CABasicAnimation, only replacing opacity with borderColor and the toValue with a CGColor cast to id).