I'm trying to animate a layer's position. It animates, but it's frame property is not updated at the end of the animation, it seems only its presentationLayer is. Here's what I'm doing:
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint (path, NULL, layer.frame.origin.x, layer.frame.origin.y);
CGPathAddLineToPoint(path, NULL, 20, 20);
CGPathAddLineToPoint(path, NULL, 20, 460);
CGPathAddLineToPoint(path, NULL, 300, 460);
CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
animation.path = path;
animation.calculationMode = kCAAnimationPaced;
animation.repeatCount = 0;
animation.autoreverses = NO;
CAAnimationGroup *theGroup = [CAAnimationGroup animation];
theGroup.animations = [NSArray arrayWithObject:animation];
theGroup.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
theGroup.duration = 2;
theGroup.removedOnCompletion = NO;
theGroup.fillMode = kCAFillModeForwards;
CFRelease(path);
[layer addAnimation:theGroup forKey:#"animatePosition"];
After the animation completes, the layer is sitting at its correct destination, but when I query its frame value, it says it's still at its original location! When/where/how are we supposed to bring the frame property in sync with the presentationLayer frame property of the layer?
Thanks
Animation doesn't actually change any values on the underlying layer. To update the actual frame value, immediately after your last line, just set the frame to the new value. Then you can probably get rid of the removedOnCompletion = NO;
As long as the animation isn't additive, the animation will run based on the data you entered, and setting the actual frame will have no effect on the display until the animation completes.
Related
I am making an iPhone app that draws a circle on the screen. I use a timer (every 5 second), so that I can 'grow' the circle, then wait 5 seconds then grow again. Now I am having trouble when animating the increase in size of the circle (I use paths and a CAShapeLayer layer). The size (from and to) are fine with the animation, its just when it starts the circle moves to the upper left hand side and grows from there. Any help or suggestions would be great. Thanks
The class where this is implemented is a UIControl, which is added to a UIView.
//Called in init method
(void) initalPop {
//Circle
self.bubble = [CAShapeLayer layer];
self.bubble.bounds = self.bounds;
self.bubble.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
self.bubble.fillColor = [
[UIColor greenColor] CGColor
];
self.bubble.strokeColor = [
[UIColor greenColor] CGColor
];
self.bubble.lineWidth = 4.0;
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, nil, self.bounds);
self.bubble.path = path;
[self.layer addSublayer: self.bubble];
}
//Called when timer goes off
- (void) StageGrow {
CGFloat growSize = 50.0;
//Change the size of us and center the circle (but dont want to animate this
[CATransaction begin];
[CATransaction setValue: (id) kCFBooleanTrue forKey: kCATransactionDisableActions];
self.bounds = CGRectMake(0, 0, self.bounds.size.width + growSize, self.bounds.size.height + growSize);
self.bubble.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
[CATransaction commit];
[self ActualGrowCircle];
} - (void) ActualGrowCircle {
CGMutablePathRef oldPath = CGPathCreateMutable();
CGPathAddEllipseInRect(oldPath, nil, self.bubble.bounds);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, nil, self.bounds);
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: #"path"];
animation.duration = 2.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = 1;
animation.delegate = self;
animation.autoreverses = NO;
animation.fromValue = (__bridge id) oldPath;
animation.toValue = (__bridge id) path;
self.bubble.bounds = self.bounds;
self.bubble.path = path;
[self.bubble addAnimation: animation forKey: #"animatePath"];
}
Let's say you're growing the bubble from size (100, 100) to size (150, 150).
You create oldPath as an ellipse in the rectangle (0, 0, 100, 100).
You create path as an ellipse in the rectangle (0, 0, 150, 150).
You set the bounds of the bubble layer to (0, 0, 150, 150), and you don't animate this change.
That means that oldPath will appear aligned to the top and left edges of the bubble layer.
One way to fix this is to create oldPath in a rectangle that is centered in the bubble's new bounds:
CGRect oldBubbleRect = CGRectInset(self.bounds, growSize / 2, growSize / 2);
CGPathRef oldPath = CGPathCreateWithEllipseInRect(oldBubbleRect, NULL);
By the way, you are leaking the paths you're creating. You need to call CGPathRelease on them after you're done with them.
Worked it out. In the long run I grouped the animations together and all became good (see code below). Thanks for your help Rob.
-(void)ActualGrowCircle {
CGMutablePathRef newPath = CGPathCreateMutable();
CGPathAddEllipseInRect(newPath, nil, self.bounds);
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"path"];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = 1;
animation.autoreverses = NO;
animation.fromValue = (__bridge id)self.bubble.path;
animation.toValue = (__bridge id)newPath;
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:#"bounds"];
animation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation2.repeatCount = 1;
animation2.autoreverses = NO;
animation2.fromValue = [NSValue valueWithCGRect:self.bubble.bounds];
animation2.toValue = [NSValue valueWithCGRect:self.bounds];
CAAnimationGroup *group = [CAAnimationGroup animation];
[group setAnimations:[NSArray arrayWithObjects: animation2, animation, nil]];
group.duration = 0.5;
group.delegate = self;
self.bubble.bounds = self.bounds;
self.bubble.path = newPath;
[self.bubble addAnimation:group forKey:#"animateGroup"];
CGPathRelease(newPath);
}
I am developing a small game in iphone... Game concept is place an object in top of the bar...Rotating a bar using accelerometer. When bar rotating , i need to move an object with respect to bar. How to implement this concept...Any examples or references?
Rotating both img:
barImg,objImg //UIImageView
barImg.transform = CGAffineTransformMakeRotation(Ypos);
objImg.transform=CGAffineTransformMakeRotation(Ypos);
So for rotating 360 Degree with animation:
CABasicAnimation *rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat:-M_PI * 2.0]; // full rotation*/ * rotations * duration ];
rotationAnimation.duration = 1;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = MAXFLOAT;
[rotatingTelIamgeview.layer addAnimation:rotationAnimation forKey:#"rotationAnimation"];
you can play with toValue for changing the angle.
For moving an object:
CGPoint startPoint = CGPointMake(lvMessageInputBar.animationBubbleImageView.layer.frame.origin.x+lvMessageInputBar.animationBubbleImageView.layer.frame.size.width/2
, lvMessageInputBar.animationBubbleImageView.layer.frame.origin.y +lvMessageInputBar.animationBubbleImageView.layer.frame.size.height/2 );
CGPoint endPoint = CGPointMake(endPoint.origin.x+Endpoint.size.width/2, bubleRect.origin.y+bubleRect.size.height/2);
CGPoint middlePoint = // any point between start and end corrdinates
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, startPoint.x, startPoint.y);
CGPathAddQuadCurveToPoint(path, NULL,middlePoint.x, middlePoint.y,endPoint.x,endPoint.y);
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.delegate = self;
pathAnimation.removedOnCompletion = NO;
pathAnimation.path = path;
[pathAnimation setCalculationMode:kCAAnimationCubic];
[pathAnimation setFillMode:kCAFillModeForwards];
pathAnimation.duration = 0.3;
[lvMessageInputBar.animationBubbleImageView.layer addAnimation:pathAnimation forKey:nil];
The above example moves the layer of the object over a path.but CGPathAddQuadCurveToPoint makes the path not diagonal rather circular path (curve).
you can use CGPathAddPath if you do not want this effect.
If you are new to iPhone I would start with layer tutorial to get the idea behind CALayer and then take a look CALayer animations
CALayers introduction:
https://www.raywenderlich.com/3096-calayers-tutorial-for-ios-introduction-to-calayers
CALayer Animation documentation of from Apple:
https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html
You can also watch Session 424 (Core Animation in Practice, Part 1) and 425 (Core Animation in Practice, Part 2) of WWDC 2010:
https://developer.apple.com/videos/archive/
I've been trying to create a cool text effect with the CAReplicatorlayer, CATextLayer and very basic animations. I'm trying to make the letters look like they are being droped from the top of the screen followed by cool replicators which will become less and less visible. I've managed to do this effect but not completely.
So far this is what I've got:
CATextLayer *messageLayer = [CATextLayer layer];
[messageLayer setForegroundColor:[[UIColor blackColor] CGColor]];
[messageLayer setContentsScale:[[UIScreen mainScreen] scale]];
[messageLayer setFrame:CGRectMake(0, 0, 40, 40)];
[messageLayer setString:#"A"];
CAReplicatorLayer *replicatorX = [CAReplicatorLayer layer];
//Set the replicator's attributes
replicatorX.frame = CGRectMake(0, 0, 40, 40);
replicatorX.anchorPoint = CGPointMake(0,0);
replicatorX.position = CGPointMake(0, 0);
replicatorX.instanceCount = 9;
replicatorX.instanceDelay = 0.15;
replicatorX.instanceAlphaOffset = -0.1;
replicatorX.zPosition = 200;
replicatorX.anchorPointZ = -160;
[replicatorX addSublayer:messageLayer];
[self.view.layer addSublayer:replicatorX];
messageLayer.position = CGPointMake(40, 400);
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position.y"];
animation.fromValue = [NSNumber numberWithInt:0];;
animation.toValue = [NSNumber numberWithInt:400];
animation.duration = 3;
[messageLayer addAnimation:animation forKey:#"s"];
I have two problems:
The replicated layers are starting in the End point.
When the main layer reach his last animated point the animation stops and the replicated layers can't finish their animation.
Setting the correct values to the animation object's fillMode and removedOnCompletion properties will hopefully solve your problems:
"The replicated layers are starting in the End point."
This is caused by the value assigned to instanceDelay property, which delays the animation with 0.15s in your example. To present the animation from the fromValue, you need to account for this delay by setting the animation's fillMode to kCAFillModeBackwards .
animation.fillMode = kCAFillModeBackwards;
"When the main layer reach his last animated point the animation stops
and the replicated layers could not finish their animation."
This happens because by default "the animation is removed from the target layer's animations upon completion."1. You can override this default behavior by setting the animation attribute removedOnCompletion to NO.
animation.removedOnCompletion = NO;
Hope this helps. :)
I want to crossfade between two different UIImages but for a reason i cannot figure out my first UIImage stays when the second one fades in.
Here is the sourcecode of my animation (it does a lot more than just crossfading, but the crossfading is my only problem right now).
I need all of the three animations listed below to be executed at the same time.
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath,NULL,startPoint.x, startPoint.y);
CGPathAddLineToPoint(thePath, NULL, endPoint.x, endPoint.y);
CAKeyframeAnimation *positionAnimation =[CAKeyframeAnimation animationWithKeyPath:#"position"];
positionAnimation.path=thePath;
positionAnimation.duration=ti_duration;
positionAnimation.repeatCount=0;
positionAnimation.delegate = self;
positionAnimation.autoreverses=NO;
positionAnimation.fillMode=kCAFillModeForwards;
positionAnimation.removedOnCompletion = NO;
[self.layer addAnimation:positionAnimation forKey:s_direction];
CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:#"contents"];
crossFade.duration = ti_duration;
crossFade.fromValue = (id)img_startImage.CGImage;
crossFade.toValue = (id)img_transferImage.CGImage;
[self.iv_image.layer addAnimation:crossFade forKey:#"animateContentsToTransferState"];
[self.iv_image setImage:img_transferImage];
CAAnimationGroup *theGroup = [CAAnimationGroup animation];
theGroup.duration = ti_duration;
theGroup.repeatCount = 0;
theGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
theGroup.animations = [NSArray arrayWithObjects:/*positionAnimation,*/ crossFade, nil]; // you can add more
[self.layer addAnimation:theGroup forKey:#"move"];
[UIView beginAnimations:#"changeSize" context:nil];
[UIView setAnimationDuration:duration];
self.bounds = CGRectMake(self.bounds.origin.x, self.bounds.origin.y, self.transferSize.width, self.transferSize.height);
[UIView commitAnimations];
The animation method containing this sourcecode is in a subclass of UIView. This subclass contains several UIImages and one UIImageView where the image to be displayed is contained in.
Have i forgotten some essential thing or why is my first image not fading away?
Can it be because it is animated from some other animation at the same time?
I hope someone can help me with this.
Greets
Maverick
Think of CAAnimations as operations applied to the CALayer. The animations current state do not change the layers original contents.
When the original state seems to snap back at the end of the animation it is actually just the animations operation being removed, and the real layers state is being revealed again.
What you need to do is to register a delegate for your animation, and change the actual self.layer.contents when the animation ends.
First:
crossFade.delegate = self;
Then implement:
- (void)animationDidStop:(CABasicAnimation *)animation finished:(BOOL)flag {
self.layer.contents = animation.toValue;
}
Try this code...It worked for me.
-(void)crossFadeImage{
CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:#"contents"];
crossFade.duration = 2.0;
crossFade.fromValue = img1.CGImage;
crossFade.toValue = img2.CGImage;
[self.background.layer addAnimation:crossFade forKey:#"animateContents"];
self.background.image = img2;
}
I want to slide in a uiimage from right (out of screen) to the middle and then from the middle to the left (out of screen). When the image arrived (first point of the animation path) in the middle I want to call a custom function. How can I realize that?
thanks for help.
Thats what I tried, but its lagging a little bit in the middle (beginning of the second animation). I think its better to have one animation
my code:
- (void) animateFromRightToMiddlePath {
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = 3;
pathAnimation.repeatCount = 1;
pathAnimation.delegate = self;
[pathAnimation setValue:#"rightToMiddle" forKey:#"AnimationType"];
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, x + (picture.size.width/2), 250);
CGPathAddLineToPoint(curvedPath, NULL, (picture.size.width/2), 250);
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);
imageView = [[UIImageView alloc] initWithImage:picture];
imageView.tag = 1;
imageView.frame = CGRectMake(1, 1, picture.size.width, picture.size.height);
[self addSubview:imageView];
[imageView.layer addAnimation:pathAnimation forKey:#"moveTheSquare"];
}
- (void) animateFromMiddleToLeftPath {
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = 3;
pathAnimation.repeatCount = 1;
pathAnimation.delegate = self;
[pathAnimation setValue:#"middleToLeft" forKey:#"AnimationType"];
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, (picture.size.width/2), 250);
CGPathAddLineToPoint(curvedPath, NULL, -(picture.size.width/2), 250);
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);
[imageView.layer addAnimation:pathAnimation forKey:#"moveTheSquare"];
}
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag{
NSString *aniType = [theAnimation valueForKey:#"AnimationType"];
if ([aniType isEqualToString:#"rightToMiddle"]) {
[self animateFromMiddleToLeftPath];
// CUSTOM FUNCTION CALL
}
if ([aniType isEqualToString:#"middleToLeft"]) {
// [self animateFromRightToMiddlePath];
}
}
A way to model this kind of interaction is the following:
your image moves through the screen according to its own logic (a fixed animation, you drag it, etc);
you define a timer so that at each tick a handler function is called; this handler has the responsibility (in your specific case) of checking the position of the image;
when the position is what you want, the handler fires your other function.
This could seem complex, but it is not really. It allows you to solve this problem in a modular and reusable way, and it is inspired by how games deal with this kind of problem.