I have a basic animation, simply rotating an image, I'm using Core Animation. In the viewWillAppear method I create the animation:
gearRotate = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
gearRotate.repeatCount = HUGE_VALF;
gearRotate.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
gearRotate.duration = 2;
gearRotate.fromValue = 0;
gearRotate.toValue = [NSNumber numberWithFloat:(360*M_PI)/180];
[gearButton.imageView.layer addAnimation:gearRotate forKey:#"transform.rotation"];
[self stopGear];
I'm calling stopGear initially to pause the animation. I did have this code in viewDidLoad to start with. Anyway, when the animation is called it works fine:
-(void)startGear {
CFTimeInterval pausedTime = [gearButton.imageView.layer timeOffset];
gearButton.imageView.layer.speed = 1.0;
gearButton.imageView.layer.timeOffset = 0.0;
gearButton.imageView.layer.beginTime = 0.0;
CFTimeInterval timeSincePause = [gearButton.imageView.layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
gearButton.imageView.layer.beginTime = timeSincePause;
}
And this pause method works fine too:
-(void)stopGear {
CFTimeInterval pausedTime = [gearButton.imageView.layer convertTime:CACurrentMediaTime() fromLayer:nil];
gearButton.imageView.layer.speed = 0.0;
gearButton.imageView.layer.timeOffset = pausedTime;
}
However, this all fails if I segue to another view then back to the main view. The app runs fine but the animation will never run if I've been to another view.
This is why I initially moved this code to viewWillAppear, thinking I needed to re-create my animation, but no beans. Any ideas?
Thanks.
OK, so I solved this by re-thinking how animations work. I'm now simply creating the animation each time I want it to run:
-(void)startGear {
gearRotate = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
gearRotate.repeatCount = HUGE_VALF;
gearRotate.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
gearRotate.duration = 2;
gearRotate.fromValue = 0;
gearRotate.toValue = [NSNumber numberWithFloat:(360*M_PI)/180];
[[gearButton.imageView layer] addAnimation:gearRotate forKey:#"transform.rotation"];
}
And when I want to pause it, I simply remove it:
-(void)stopGear {
[[gearButton.imageView layer] removeAnimationForKey:#"transform.rotation"];
}
I'm not sure currently if this is the Apple preferred method, but it works solidly.
Instead of using gearRotate.repeatCount = HUGE_VALF; you could have used the following approach in order to keep your animation running after performing a segue to another view controller:
-(void)startGear {
[[gearButton.imageView layer] removeAnimationForKey:#"transform.rotation"];
gearRotate = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
gearRotate.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
gearRotate.duration = 2;
gearRotate.fromValue = 0;
gearRotate.toValue = [NSNumber numberWithFloat:(360*M_PI)/180];
[[gearButton.imageView layer] addAnimation:gearRotate forKey:#"transform.rotation"];
[self performSelector:#selector(startGear) withObject:nil afterDelay:gearRotate.duration];
}
Related
In this code i am using animation.But at a time i need to change the image alpha value also.
-(void)animation
{
CGPoint point = CGPointMake(imgView.frame.origin.x, imgView.frame.origin.y);
imgView.layer.position = point;
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:#"position.x"];
anim.fromValue = [NSValue valueWithCGPoint:point];
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(point.x + 50, point.y)];
anim.duration = 10.0f;
anim.repeatCount =1;
anim.removedOnCompletion = YES;
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[imgView.layer addAnimation:anim forKey:#"position.x"];
imgView.layer.position = point;
}
You can use the opacity key of CABasicAnimation for doing this:
CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
alphaAnimation.fromValue = [NSNumber numberWithFloat:1.0];
alphaAnimation.toValue = [NSNumber numberWithFloat:0.0];
[imgView.layer addAnimation:alphaAnimation forKey:#"opacity"];
Edit:
For animating through specified values you can use CAKeyframeAnimation:
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:#"opacity"];
animation.duration = 10.0f;
animation.repeatCount = 1;
animation.values = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:1.0,
[NSNumber numberWithFloat:0.5],
[NSNumber numberWithFloat:1.0],nil];
animation.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:5.0],
[NSNumber numberWithFloat:10.0], nil];
[imgView.layer addAnimation:animation forKey:#"opacity"];
In order to decrease the alpha as the same time/rate the x position of your view is moving, just put the position setting code together with the alpha setting code in the same block of animation, like below:
CGPoint finalPoint = CGPointMake(500, imgView.center.y); //change for any final point you want
CGFloat finalAlpha = 0.0; //change the final alpha as you want
UIView animateWithDuration:1.0 animations:^{ //change the duration as you want
imgView.alpha = finalAlpha;
imgView.center = finalPoint;
}];
This "fades to invisible" self.view in 500ms.
Anything you do prior to invoking it will be set "immediately", everything you set within the `animation' block (like setting new frame coordinates) will be interpolated over the specified duration.
[UIView animateWithDuration:0.50
delay:0.0
options:( UIViewAnimationOptionAllowUserInteraction
| UIViewAnimationOptionBeginFromCurrentState
| UIViewAnimationOptionCurveEaseInOut)
animations:^ {
self.view.alpha = 0.0f ;
}
completion: ^(BOOL){
[self.view removeFromSuperview] ;
self.view = nil ;
}
] ;
You may use a CABasicAnimation object (a different one because you will animate a different KeyPath, namely alpha, for this) and use NSNumbers for fromValue and toValue.
Another (and easiest) way is to use the UIView helper methods dedicated to animation ( animateWithDuration:… and all), especially if you have to animate multiple properties at the same time (you may animate both the frame and the alpha with the same animation block if it fits your needs and simplify your code).
You can also mix CABasicAnimation for the frame and [UIView animateWithDuration:…] for the alpha, whatever combination you need depending on if your animations are complex and need to be customized (custom timing function, non-linear animation, …) or not.
//your code of changing x position will be here
now implement my code which is written below.
UIView animateWithDuration:1.0 animations:^{
imgView.alpha = 0.5;//must be in between 0 to 1
}];
now when your imageview move to next position as you are saying, write below code
//your code for imageview for next position..
now implement below code...
UIView animateWithDuration:0.5 animations:^{
imgView.alpha = 1.0;//must be in between 0 to 1
}];
let me know it is working or not!!!! Hope it helps...
Happy Coding!!!
I have an image on the UIButton that I wish to glow in when I click button and glow out when I click it again.
Everytime I click, it doesn't glow out, it only glows in making it brighter
.
I have tried UIView animateWithDuration as well as CATransition and CABasicAnimation..
Something is wrong. Probably something basic that I should know about.
I'd appreciate the help.
Heres my code:
-(void)didTapButton:(UIButton *)button {
button.selected = !button.selected;
UIColor *glowColor = [self.arrayOfGlowColor objectAtIndex:button.tag];
UIImageView *imageView = button.imageView;
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, [UIScreen mainScreen].scale);
[imageView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0,0,imageView.bounds.size.width,imageView.bounds.size.height)];
[glowColor setFill];
[path fillWithBlendMode:kCGBlendModeSourceAtop alpha:1.0];
UIImage *imageContext_image = UIGraphicsGetImageFromCurrentImageContext();
UIView *glowView = [[UIImageView alloc] initWithImage:imageContext_image];
glowView.center = imageView.center;
[imageView.superview insertSubview:glowView aboveSubview:imageView];
glowView.alpha = 0;
glowView.layer.shadowColor = glowColor.CGColor;
glowView.layer.shadowOffset = CGSizeZero;
glowView.layer.shadowRadius = 10;
glowView.layer.shadowOpacity = 1.0;
/*
[UIView animateWithDuration: 1.0 animations:^(void) {
glowView.alpha = (button.selected) ? 1.0 : 0.0f;
}];
NSLog(#"glowView.alpha:%f",glowView.alpha);
NSLog(button.selected ? #"YES" : #"NO");
*/
/*
if (button.selected) {
CATransition *fadeIn = [CATransition animation];
fadeIn.duration = 1.0;
fadeIn.startProgress = 0.0f;
fadeIn.endProgress = 1.0f;
[fadeIn setType:kCATransitionFade];
fadeIn.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[fadeIn setFillMode:#"extended"];
[glowView.layer addAnimation:fadeIn forKey:nil];
}
if (!button.selected) {
CATransition *fadeOut = [CATransition animation];
fadeOut.duration = 1.0;
fadeOut.startProgress = 1.0f;
fadeOut.endProgress = 0.0f;
[fadeOut setType:kCATransitionFade];
fadeOut.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[fadeOut setFillMode:#"extended"];
[glowView.layer addAnimation:fadeOut forKey:nil];
}
*/
if (button.selected) {
//Create a one-way animation that fades in the glow.
glowView.layer.opacity = 1.0;
CABasicAnimation *glowFadeInAnim = [CABasicAnimation animationWithKeyPath:#"opacity"];
glowFadeInAnim.fromValue = [NSNumber numberWithDouble:0.0];
glowFadeInAnim.toValue = [NSNumber numberWithDouble:1.0];
glowFadeInAnim.repeatCount = 1;
glowFadeInAnim.duration = 1.0;
glowFadeInAnim.autoreverses = FALSE;
glowFadeInAnim.fillMode = kCAFillModeForwards;
glowFadeInAnim.removedOnCompletion = NO;
glowFadeInAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[glowView.layer addAnimation:glowFadeInAnim forKey:nil];
}
if (!button.selected) {
glowView.layer.opacity = 1.0;
CABasicAnimation *glowFadeOutAnim = [CABasicAnimation animationWithKeyPath:#"opacity"];
glowFadeOutAnim.fromValue = [NSNumber numberWithDouble:1.0];
glowFadeOutAnim.toValue = [NSNumber numberWithDouble:0.0];
glowFadeOutAnim.repeatCount = 1;
glowFadeOutAnim.beginTime = 2;
glowFadeOutAnim.duration = 2.0;
glowFadeOutAnim.autoreverses = FALSE;
glowFadeOutAnim.fillMode = kCAFillModeForwards;
glowFadeOutAnim.removedOnCompletion = NO;
glowFadeOutAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[glowView.layer addAnimation:glowFadeOutAnim forKey:nil];
glowView.layer.opacity = 0.0;
}
NSLog(#"glowView.opacity:%f",glowView.layer.opacity);
NSLog(button.selected ? #"YES" : #"NO");
}
If you create a new glowView every time the button is pressed and add it to the button, then obviously it will just keep getting brighter, as more and more of them are being added to the button. You need to create the glowView once, for example in your viewDidLoad method, and store it as an instance variable so you don't lose it:
#interface MyViewController : UIViewController {
UIView *_glowView;
}
...
- (void)viewDidLoad {
[super viewDidLoad];
_glowView = ... // Initialise it here
...
[imageView.superview insertSubview:_glowView aboveSubview:imageView];
}
Then in your didTapButton: method, you handle the tap as you do (adding or removing the _glowView, but make sure you don't set it to nil so the reference to it is always retained). This way, you only create and add it once, and the problem should be solved.
In animationDidStart (CABasicAnimation delegate), I want to update a CATextLayer. However, if the user touches the screen, I want to remove all the Animations that are going on by [self.maskLayer removeAllAnimations]; (All my Animations are played sequentially).
However, after removeAllAnimations, somehow, animationDidStart AND animationDidStop are still called, the animation itself is NOT shown. This is NOT what I want, obviously.
The animations are added as follows:
- (void)addAnimations {
for (int i=1; i<6; i++) {
NSString* intValue = [NSString stringWithFormat:#"%d", i];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"path"];
animation.duration = 0.5;
animation.delegate = self;
animation.repeatCount = 0;
animation.autoreverses = NO;
[animation setValue:intValue forKey:#"animationString"];
animation.timingFunction = nil;
[animation setRemovedOnCompletion:NO];
[animation setFillMode:kCAFillModeForwards];
animation.fromValue = (id) [self getCGRectForZoomLevel:i];
animation.toValue = (id) [self getCGRectForZoomLevel:i + 1 ];
animation.beginTime = CACurrentMediaTime() + i * 2;
[self.shapeLayer addAnimation:animation forKey:intValue];
}
}
How to prevent this? This issue has taken me several hours by now :(
thanks!
So, I have read in the docs, that use of blocks like
beginAnimation
commitAnimation
is discouraged from os4.0.
So I have tried to get my code to work by using CABasicAnimation. I want to achieve, that an image's frame is resized from its thumbnail size, somewhere within my view, to a full width position e.g. (0, 120, 320, 240) - on my iPhone.
What I have so far:
[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:1.0] forKey:kCATransactionAnimationDuration];
CABasicAnimation *scalingAnimation;
scalingAnimation = [CABasicAnimation animationWithKeyPath:#"transform"];
scalingAnimation.duration=1.0/2;
scalingAnimation.autoreverses=YES;
scalingAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
scalingAnimation.fromValue=[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)];
scalingAnimation.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeScale(4, 4, 1)];
[b.layer addAnimation:scalingAnimation forKey:#"scaling"];
[CATransaction commit];
My nextstep would be to first try to move the image to a centered position then scale it to the correct size. However, I doubt I'm doin it the right way. Can anyone comment on my code/approach.... is there a better way?
Am pretty sure you have solved this by now, but in any case.
You shouldn't need the [CATransaction begin]; and [CATransaction commit];
The simplest way that I have found to do this kind of thing is to use CAAnimationGroup and and add the animations one by one.
An example would be
CABasicAnimation *scaleX = [CABasicAnimation animationWithKeyPath:#"transform.scale.x"];
//this is not used, as the group provides the duration
scaleX.duration = duration;
scaleX.autoreverses = NO;
scaleX.toValue = [NSNumber numberWithFloat:1.0];
scaleX.fromValue = [NSNumber numberWithFloat:scaleFrom];
scaleX.fillMode = kCAFillModeForwards;
scaleX.removedOnCompletion = NO;
CABasicAnimation *scaleY = [CABasicAnimation animationWithKeyPath:#"transform.scale.y"];
//this is not used, as the group provides the duration
scaleY.duration = duration;
scaleY.autoreverses = NO;
scaleY.toValue = [NSNumber numberWithFloat:1.0];
scaleY.fromValue = [NSNumber numberWithFloat:scaleFrom];
scaleY.fillMode = kCAFillModeForwards;
scaleY.removedOnCompletion = NO;
//add in the translation animations
NSMutableArray* animationsArray = [NSMutableArray arrayWithObjects:scaleX,
scaleY,
//and any other animations you want in the group
nil];
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 1.0/2;
animationGroup.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseIn];
animationGroup.animations = animationsArray;
animationGroup.delegate = self;
animationGroup.removedOnCompletion = YES;
animationGroup.fillMode = kCAFillModeForwards;
[animationGroup setValue:#"imageTransform" forKey:#"AnimationName"];
[b.layer addAnimation:animationGroup forKey:#"imageTransform"];
There are a few gotchas though. Animations are purely visual, so before running the animations, set your eventual view frame.
You will notice that the scales end at 1, this is to ensure that you dont end up with a scaled image layer. Instead we start it scaled and bring it back to normal.
Translations should be done in the same way.
Hope this helps
//in Event Method Copy Below code to place the image to the center
CABasicAnimation* positionAnimation;
positionAnimation = [CABasicAnimation animationWithKeyPath:#"position"];
positionAnimation.fromValue = [NSValue valueWithCGPoint:imageView.layer.position];
positionAnimation.toValue = [NSValue valueWithCGPoint:centerPointofView];
positionAnimation.duration = 2.0;
positionAnimation.fillMode = kCAFillModeForwards;
positionAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
positionAnimation.removedOnCompletion = NO;
positionAnimation.delegate = self;
[imageView.layer addAnimation:positionAnimation forKey:#"positionAnimation"];
// For Scale After image is in center copy below code
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag{
CAAnimation *animation = [imageView.layer animationForKey:#"positionAnimation"];
if (animation == theAnimation)
{
CABasicAnimation* scaleAnimation;
scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:1];
scaleAnimation.toValue = [NSNumber numberWithFloat:4.0];
scaleAnimation.duration = 2.2;
scaleAnimation.fillMode = kCAFillModeForwards;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
scaleAnimation.removedOnCompletion = NO;
scaleAnimation.delegate = self;
[imageView.layer addAnimation:scaleAnimation forKey:#"scaleAnimation"];
}
else
{
//if you want changes to image should remain forever
//place your code for scale & transform here
....................
//now simple remove animation from layer
[imageView.layer removeAllAnimations];
}
}
Cant you use
[UIView animateWithDuration:2.0
animations:^{
//animations
}
completion:^(BOOL finished){
// completion methods
}];
I'm using following code to animate a view. It basically rotates the view by 225 degrees angle.
[viewToOpen.layer removeAllAnimations];
viewToOpen.hidden = NO;
viewToOpen.userInteractionEnabled = NO;
if (viewToOpen.layer.anchorPoint.x != 0.0f) {
viewToOpen.layer.anchorPoint = CGPointMake(0.0f, 0.5f);
viewToOpen.center = CGPointMake(viewToOpen.center.x - viewToOpen.bounds.size.width/2.0f, viewToOpen.center.y);
}
CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:#"transform"];
transformAnimation.removedOnCompletion = NO;
transformAnimation.duration = duration;
transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
CATransform3D endTransform = CATransform3DMakeAffineTransform(CGAffineTransformMakeRotation(225));
transformAnimation.toValue = [NSValue valueWithCATransform3D:endTransform];
CAAnimationGroup *theGroup = [CAAnimationGroup animation];
theGroup.delegate = self;
theGroup.duration = duration;
[theGroup setValue:[NSNumber numberWithInt:viewToOpen.tag] forKey:#"viewToOpenTag"];
theGroup.animations = [NSArray arrayWithObjects:transformAnimation, nil];
theGroup.removedOnCompletion = NO;
[viewToOpen.layer addAnimation:theGroup forKey:#"flipViewOpen"];
But the problem is that, at the end of animation, the view is coming back to original position. I would like to keep the view in same position even after animation completes. How can I do it?
I believe you're experiencing the same issue as can be seen in this question and this one. You either need to set fillMode to kCAFillModeForwards or set the transform of the layer when the animation has been completed.