Core Animation - Play 2 Animations in Sequence - ios

I'm trying to put together an animation that works a little like a speedometer.
The first animation gets the needle
CFTimeInterval localMediaTime = [needle convertTime:CACurrentMediaTime() fromLayer:nil];
CABasicAnimation *needAni = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
needAni.duration = 0.5f;
needAni.fromValue = [NSNumber numberWithFloat:0.0];
needAni.toValue = [NSNumber numberWithFloat:(rotVal * M_PI / 180.0)];
needAni.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.195: 0.600: 0.790: 0.405];
needAni.fillMode = kCAFillModeBackwards;
[needle.layer addAnimation:needAni forKey:nil];
After that plays I would like to have the needle bounce back and forth a little when its reached full speed. This animation does just that:
CABasicAnimation *needAni2 = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
needAni2.duration = 0.1f;
needAni2.fromValue = [NSNumber numberWithFloat:(rotVal * M_PI / 180.0)];
needAni2.toValue = [NSNumber numberWithFloat:((rotVal+5) * M_PI / 180.0)];
needAni2.fillMode = kCAFillModeBackwards;
needAni2.autoreverses = YES;
needAni2.repeatCount = HUGE_VAL;
needAni2.beginTime = localMediaTime + 0.5f;
[needle.layer addAnimation:needAni2 forKey:nil];
Now when I put this together only the second animation plays.
I tired putting these two animations into a group, but I can't seem to just repeat the second animation, it repeats the whole process. Is there a performance problem if I put the group duration equal to HUGE_VAL or is there a better way to do this?
Thanks

I think you can just stick with your method, as this seems to be the intended usage of CAGroupAnimation. Just make sure you set an appropriate duration for the group. If you make the duration for the group shorter than your intended animations, it will cut your animations short. If you make the duration longer than your animations, the animation objects might possibly linger in memory until that duration is over.
Another option would be to implement the delegate method -animationDidStop:finished: , and add the second animation when that gets called by the first animation.
CAAnimation reference:
https://developer.apple.com/library/ios/#documentation/GraphicsImaging/Reference/CAAnimation_class/Introduction/Introduction.html#//apple_ref/occ/cl/CAAnimation

Related

CAAnimation is overriding previous CAAnimation animation

I have one this scenario:
I add to a layer CAAnimation that transforms it to a specific frame. with a starting time of 0.
Then I add another CAAnimation that transforms it to a different frame. with a starting time of 0.5.
what happens is that the layer immediately gets the second frame (with no animation) and after the first animation time passes the second animation is completed correctly.
This is the animation creation code:
+ (CAAnimation *)transformAnimation:(CALayer *)layer
fromFrame:(CGRect)fromFrame
toFrame:(CGRect)toFrame
fromAngle:(CGFloat)fromAngle
toAngle:(CGFloat)toAngle
anchor:(CGPoint)anchor
vertical:(BOOL)vertical
begin:(CFTimeInterval)begin
duration:(CFTimeInterval)duration {
CATransform3D fromTransform = makeTransform(layer, fromFrame, fromAngle, anchor, vertical);
CATransform3D midTransform1 = makeTransformLerp(layer, fromFrame, toFrame, fromAngle, toAngle, anchor, 0.33, vertical);
CATransform3D midTransform2 = makeTransformLerp(layer, fromFrame, toFrame, fromAngle, toAngle, anchor, 0.66, vertical);
CATransform3D toTransform = makeTransform(layer, toFrame, toAngle, anchor, vertical);
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:#"transform"];
animation.values = #[[NSValue valueWithCATransform3D:fromTransform],
[NSValue valueWithCATransform3D:midTransform1],
[NSValue valueWithCATransform3D:midTransform2],
[NSValue valueWithCATransform3D:toTransform]
];
animation.beginTime = begin;
animation.duration = duration;
animation.fillMode = kCAFillModeBoth;
animation.calculationMode = kCAAnimationPaced;
animation.removedOnCompletion = NO;
return animation;
}
EDIT
in most scenarios, this code works well and the animations are sequenced correctly. But if I set 1 transform animation to start after 2 seconds and then set another transform to start after 4 seconds. the first transform is applied immediately to the layer and the second animation starts from there.
Any Idea how can I separate the animation to run one after the other?
(I prefer not using a completion block)
Thanks
The easiest and most glaring early fix would be to change the fill mode so that the second animation is not clamped on both ends overriding the previous animation.
animation.fillMode = kCAFillModeForwards;
Also I would adjust the begin time to be
animation.beginTime = CACurrentMediaTime() + begin;
If it is a matter of overlapping begin times and durations and not this let me know and I can provide that as well.

Custom animation for CAEmitterCell

I have a CAEmitterLayer and I'd like to have a simple animation run over the course of each particle's life.
As soon as particle pops in, I'd like it to scale up to about 1.2, then after a short time have it scale back to 1.0 and stay that way until it's lifetime expires.
I know about the scale, scaleRange and scaleSpeed properties of the CAEmitterCell but they're way too random for what I need.
Is this possible to do? I've tried adding a CABasicAnimation like this (my CAEmitterCell's name is "heart"):
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:#"emitterCells.heart.scale"];
anim.fromValue = #(1.0);
anim.toValue = #(2.0);
anim.duration = 3.0;
anim.fillMode = kCAFillModeForwards;
anim.repeatCount = CGFLOAT_MAX;
[self.heartsEmitter addAnimation:anim forKey:#"scaleAnimation"];
but it doesn't work, the particles just appear at a random scale, they don't animate at all.
I'm not completely sure, but it seems to me that you are applying the animation to the emitter instead of the cells.
If the CAEmitterCell's name is heart try this: [self.heart addAnimation:anim forKey:#"scaleAnimation"];. Does this help?

CABasicAnimation stop animation on completion - iOS

I have an iOS app which is using a CABasicAnimation on repeat:
CABasicAnimation *fadeAnim = [CABasicAnimation animationWithKeyPath:#"opacity"];
fadeAnim.fromValue = [NSNumber numberWithFloat:1.0];
fadeAnim.toValue = [NSNumber numberWithFloat:0.2];
fadeAnim.duration = 1.0;
fadeAnim.autoreverses = YES;
fadeAnim.repeatCount = INFINITY;
[colourbutton.titleLabel.layer addAnimation:fadeAnim forKey:#"opacity"];
I have a button which when pressed is meant to stop the animation.
-(IBAction)stopAnim {
[colourbutton.titleLabel.layer removeAllAnimations];
}
It works fine but one thing I am noticing is that is stops the animation suddenly, it doesn't let the animation finish. So how can I get it to finish the current animation and then stop. (Or in other words how can I get it to removeAllAnimations....withAnimation?).
On a side note, do I need to include CoreAnimation framework for this to work. So far the animation is running and I havn't imported the CoreAnimation framework.
Thanks, Dan.
Just add another animation and after that remove the first one like this:
CABasicAnimation *endAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
endAnimation.fromValue = #(((CALayer *)colourbutton.titleLabel.layer.presentationLayer).opacity);
endAnimation.toValue = #(1);
endAnimation.duration = 1.0;
[colourbutton.titleLabel.layer addAnimation:endAnimation forKey:#"end"];
[colourbutton.titleLabel.layer removeAnimationForKey:#"opacity"];
The key here is to use the presentation layer to get the current state. Don't forget to set the actual end state of the layer, because the animation will be removed on completion.
In NKorotov's answer, he uses the presentationLayer to find out where you are in the animation. That is the correct way to go.
You could go with this solution, although IMO you would also have to calculate the duration animation correctly (based on the duration of the original animation and on how far you are along the animation path currently).
If you find it "silly" to add a new animation, you could perhaps call removeAllAnimations using dispatch_after at the correct time.

Add time to AVCoreAnimationBeginTimeAtZero in iOS

Below is the code for my animation on the layer:
CABasicAnimation *flipAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
flipAnimation.toValue = [NSNumber numberWithDouble:-M_PI_2];
flipAnimation.beginTime = AVCoreAnimationBeginTimeAtZero;
flipAnimation.duration = 0;
flipAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
flipAnimation.fillMode = kCAFillModeForwards;
flipAnimation.removedOnCompletion = NO;
[overlayLayer addAnimation:flipAnimation forKey:#"qddq"];
Now for the beginTime property, I want my animation to start after some delay.
I have tried CACurrentMediaTime() + myDelay; but it does not solve the purpose.
****I dont want my animation to start after some delay****
Is that a typo? Because the title of the question makes me think that you want to start your animation after some delay.
If you want to start your animation immediately then flipAnimation.beginTime = AVCoreAnimationBeginTimeAtZero; is absolutely correct. If you want to start your animation after some delay then simply do this:
flipAnimation.beginTime = delayTime; // double delayTime = 5.0, animation will begin after 5 seconds.
Also, I'm not an expert at CoreAnimation, but I think that animation duration should be more than zero
flipAnimation.duration = 0; // maybe that's a mistake?

how to speed up CABasicAnimation?

I am using the following CABasicAnimation. But, its very slow..is there a way to speed it up ? Thanks.
- (void)spinLayer:(CALayer *)inLayer duration:(CFTimeInterval)inDuration
direction:(int)direction
{
CABasicAnimation* rotationAnimation;
// Rotate about the z axis
rotationAnimation =
[CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
// Rotate 360 degress, in direction specified
rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 * direction];
// Perform the rotation over this many seconds
rotationAnimation.duration = inDuration;
// Set the pacing of the animation
rotationAnimation.timingFunction =
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
// Add animation to the layer and make it so
[inLayer addAnimation:rotationAnimation forKey:#"rotationAnimation"];
}
Core Animation animations can repeat a number of times, by setting the repeatCount property on the animation.
So if you'd like to have an animation run for a total 80 seconds, you need to figure out a duration for one pass of the animation – maybe one full spin of this layer – and then set the duration to be that value. Then let the animation repeat that full spin several times to fill out your duration.
So something like this:
rotationAnimation.repeatCount = 8.0;
Alternatively, you can use repeatDuration to achieve a similar affect:
rotationAnimation.repeatDuration = 80.0;
In either case, you need to set the duration to the time of a single spin, and then repeat it using ONE of these methods. If you set both properties, the behavior is undefined. You can check out the documentation on CAMediaTiming here.

Resources