I have 3 CABasicAnimation of 3 color bars which is following each other. After the third is completed, 3 bars will stay at their final position. Until here, everything is good, here is the code:
- (void)animationDidStop:(CABasicAnimation *)theAnimation finished:(BOOL)flag {
NSString* value = [theAnimation valueForKey:#"id"];
if([value isEqualToString:#"position1"]){
[self playVideoAtIndex:1];
}
else if([value isEqualToString:#"position2"]){
[self playVideoAtIndex:2];
}
else if([value isEqualToString:#"position3"]){
}
}
Before that, I created 3 animations like this:
-(void)createAnimationAtIndex:(NSInteger)index{
UILabel *label = (UILabel *)[barLabelArray objectAtIndex:index];
if(index==0){
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position"];
animation.delegate = self;
//SOMETHING HERE
[label.layer addAnimation:animation forKey:#"position1"];
}
else if(index==1){
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position"];
animation.delegate = self;
//SOMETHING HERE
[self.delegate startPlayVideoAtIndex:1];
[label.layer addAnimation:animation forKey:#"position2"];
}
else if(index==2){
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position"];
animation.delegate = self;
//SOMETHING HERE
[label.layer addAnimation:animation forKey:#"position3"];
}
}
So if I wait until all animations stop, when I come back, they will start animation properly again. But sometimes I need stoping the animation in the middle of it. And then when I come back and start the animation again, all is messed up. Here is code for stoping animations:
-(void)reset{
for(UILabel *label in barLabelArray){
[label.layer removeAllAnimations];
}
}
So do you know what I am doing wrong here and how to fix it? Thank you !!
There is a way pause and resume any animations. Here is several good strings which can help you if I understand correctly
- (void) pauseLayer
{
CFTimeInterval pausedTime = [label.layer convertTime:CACurrentMediaTime() fromLayer:nil];
label.layer.speed = 0.0;
label.layer.timeOffset = pausedTime;
}
- (void) resumeLayer
{
CFTimeInterval pausedTime = [label.layer timeOffset];
label.layer.speed = 1.0;
label.layer.timeOffset = 0.0;
label.layer.beginTime = 0.0;
CFTimeInterval timeSincePause = [label.layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
label.layer.beginTime = timeSincePause;
}
Related
I have got an UIButton animation implemented, as for now it zooms but I also want to cross fade the UIButton while it disappears.
This is my sample code for button animation.
(void)centerButtonAnimation{
CAKeyframeAnimation *centerZoom = [CAKeyframeAnimation animationWithKeyPath:#"transform"];
centerZoom.duration = 1.5f;
centerZoom.values = #[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.5, 1.5, 1.5)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(4, 4, 4)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(5, 5, 5)]];
centerZoom.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
centerButton.transform = CGAffineTransformMakeScale(5, 5);
[centerButton.layer addAnimation:centerZoom forKey:#"buttonScale"];
[centerButton setUserInteractionEnabled:NO];
}
To chain the animations, you can set your class to be a delegate for the animation.
#property CAKeyframeAnimation *centerZoom;
- (void) centerButtonAnimation
{
self.centerZoom = [CAKeyframeAnimation animationWithKeyPath:#"transform"];
// Set the delegate to this instance.
centerZoom.delegate=self;
centerZoom.duration = 1.5f;
centerZoom.values = #[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.5, 1.5, 1.5)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(4, 4, 4)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(5, 5, 5)]];
centerZoom.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
centerButton.transform = CGAffineTransformMakeScale(5, 5);
[centerButton.layer addAnimation:centerZoom forKey:#"buttonScale"];
[centerButton setUserInteractionEnabled:NO];
}
- (void) crossFadeAnimation
{
// Insert animation code for cross fade.
}
Then implement the delegate function to detect the end of the animation. If its the end of a zoom, start the cross fade.
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
if ((theAnimation == self.centerZoom) && flag){
[self crossFadeAnimation];
}
}
I have a cycle animate in viewController
- (void)moveAnimating
{
[UIView animateWithDuration:2.0f animations:^{
_backgroundView.center = CGPointMake(self.center.x , self.center.y - kMoveDistanceHeight);
} completion:^(BOOL finished) {
if (_backgroundView.animating)
{
[_backgroundView moveAnimating];
}
}];
}
I want stop this animate When the viewController viewWillDisappear:
- (void)viewWillDisappear:(BOOL)animated
{
[super viewWillDisappear:animated];
_backgroundView.animating = NO;
[_backgroundView.layer removeAllAnimations];
}
Because the animation is conflict with dismissViewcontrollerAnimation.
Question:
[_backgroundView.layer removeAllAnimations];
not work...
How to stop the animation?
Help me,thanks.
You are canceling animations correctly:
[_backgroundView.layer removeAllAnimations];
But you might forget about importing QuartzCore.h:
#import <QuartzCore/QuartzCore.h>
If it doesn't help try this:
[CATransaction begin];
[_backgroundView.layer removeAllAnimations];
[CATransaction commit];
If it doesn't help try to add this line to the code above:
[CATransaction flush];
Te solution from #KlimczakM didn't work for me.
I'm running an 'animateWithDuration' block that moves and image, and I use the next code to pause and resume the animation:
-(void)pauseLayer:(CALayer*)layer {
CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
layer.speed = 0.0;
layer.timeOffset = pausedTime;
}
-(void)resumeLayer:(CALayer*)layer {
CFTimeInterval pausedTime = [layer timeOffset];
layer.speed = 1.0;
layer.timeOffset = 0.0;
layer.beginTime = 0.0;
CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
layer.beginTime = timeSincePause;
}
This is from the Apple Documentation at this link.
there.
in iOS app, Core animation callback don't work.
- (void)startAnim {
CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
anim.fromValue = startAngle;
anim.toValue = endAngle;
anim.duration = 2;
anim.delegate = self;
[self.target addAnimation:anim forKey:nil]; // self.target is CALayer instance, it's sublayer of Custom UIView
}
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
[self.target setValue:#(endAngle) forKeyPath:#"transform.rotation.z"];
}
But animationDidStop never be called.
If I change the code like as following, completion blocked is called.
- (void)startAnim {
CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
anim.fromValue = startAngle;
anim.toValue = endAngle;
anim.duration = 2;
anim.delegate = self;
[CATransaction begin];
[CATransaction setCompletionBlock:^{
[self.target setValue:#(endAngle) forKeyPath:#"transform.rotation.z"];
}];
[self.target addAnimation:anim forKey:nil];
[CATransaction commit];
}
But I don't want to use CATransaction.
Why is not animationDidStop called?
Update:
There is a way to set final value like as
- (void)startAnim {
CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
anim.fromValue = startAngle;
anim.toValue = endAngle;
anim.duration = 2;
anim.delegate = self;
[self.target setValue:#(endAngle) forKeyPath:#"transform.rotation.z"];
[self.target addAnimation:anim forKey:nil];
}
But final assignment should be done when the animation is finished. Because there are multiple dynamic animations of layer, so I don't know final value.
I found the reason why animationDidStop is not called.
Because animation was added in loop of other thread,
So I fixed like as following.
- (void)startAnim {
dispatch_async(dispatch_get_main_queue(), ^{
CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
anim.fromValue = startAngle;
anim.toValue = endAngle;
anim.duration = 2;
anim.delegate = self;
[self.target addAnimation:anim forKey:nil];
});
}
To me it sounds like you dont want the animation to reset its position, this is quite simple and achieved with a couple lines of code when setting up the animation.
It can be easily placed in your code like such:
anim.fillMode = kCAFillModeForwards;
anim.removedOnCompletion = NO;
What this means is when your animation has finished it will remain at the end and any further animations will be from that state.
Last year I use animation of UIView instead CABasicAnimation, but if my memory does not fail you have to set endAngle befor add animation, so try this:
- (void)startAnim {
CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
anim.fromValue = startAngle;
anim.toValue = endAngle;
anim.duration = 2;
anim.delegate = self;
[self.target setValue:#(endAngle) forKeyPath:#"transform.rotation.z"];
[self.target addAnimation:anim forKey:nil];
}
UPD:
You are setting anim.toValue = endAngle; before start animation, so its not good that end value changes after animation complete. Anyway you can set it again in animationDidStop
- (void)startAnim {
CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
anim.fromValue = startAngle;
anim.toValue = endAngle;
anim.duration = 2;
anim.delegate = self;
intermediateAngle = endAngle;
[self.target setValue:#(endAngle) forKeyPath:#"transform.rotation.z"];
[self.target addAnimation:anim forKey:nil];
}
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
if (intermediateAngle != endAngle) {
startAngle = intermediateAngle;
[self startAnim]; // or just [self.target setValue:#(endAngle) forKeyPath:#"transform.rotation.z"];
}
}
I have a UIView whose backing layer has a CAKeyframeAnimation with a simple straight line path set as its `path`.
Can I have the animation "frozen", so to speak, and manually change its progress?
For example:
If the path is 100 points in length, setting the progress (offset?) to 0.45 should have the view move 45 points down the path.
I remember seeing an article that did something similar (moving a view along a path based on the value from a slider) via CAMediaTiming interfaces, but I haven't been able to find it, even after a few hours of searching. If I'm approaching this in a completely wrong way, please do let me know. Thanks.
Here's some sample code, if the above isn't clear enough.
- (void)setupAnimation
{
CAKeyFrameAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_label.layer.position];
[path addLineToPoint:(CGPoint){200, 200}];
animation.path = path.CGPath;
animation.duration = 1;
animation.autoreverses = NO;
animation.removedOnCompletion = NO;
animation.speed = 0;
// _label is just a UILabel in a storyboard
[_label.layer addAnimation:animation forKey:#"LabelPathAnimation"];
}
- (void)sliderDidSlide:(UISlider *)slider
{
// move _label along _animation.path for a distance that corresponds to slider.value
}
This is based on what Jonathan said, only a bit more to the point. The animation is set up correctly, but the slider action method should be as follows:
- (void)sliderDidSlide:(UISlider *)slider
{
// Create and configure a new CAKeyframeAnimation instance
CAKeyframeAnimation *animation = ...;
animation.duration = 1.0;
animation.speed = 0;
animation.removedOnCompletion = NO;
animation.timeOffset = slider.value;
// Replace the current animation with a new one having the desired timeOffset
[_label.layer addAnimation:animation forKey:#"LabelPathAnimation"];
}
This will make the label move along the animation's path based on timeOffset.
Yes you can do this with the CAMediaTiming interface. You can set the speed of the layer to 0 and manualy set the timeOffset. Example of a simple pause/resume method:
- (void)pauseAnimation {
CFTimeInterval pausedTime = [yourLayer convertTime:CACurrentMediaTime() fromLayer:nil];
yourLayer.speed = 0.0;
yourLayer.timeOffset = pausedTime;
}
- (void)resumeAnimation {
CFTimeInterval pausedTime = [yourLaye timeOffset];
if (pausedTime != 0) {
yourLayer.speed = 1.0;
yourLayer.timeOffset = 0.0;
yourLayer.beginTime = 0.0;
CFTimeInterval timeSincePause = [yourLayer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
yourLayer.beginTime = timeSincePause;
}
}
I am trying to make an animation where two layers move to the side, scale down, and rotate a little bit in 3D, all at the same time (then move back with the layer previously at the bottom not on top). I tried several methods, but none seem to work.
I have the 3d transform animation like so:
perspectiveTransformLeft = CATransform3DIdentity;
perspectiveTransformLeft.m34 = 1.0 / 500;
perspectiveTransformLeft = CATransform3DRotate(perspectiveTransformLeft, 35.0f * M_PI / 360.0f, 0.0f, 1.0f, 0.0f);
I've tried adding a scale transform that didn't work:
perspectiveTransformLeft = CATransform3DMakeScale(0.75, 0.75, 1);
I've tried to scale the layer in an animation block, but that didn't work either:
[UIView animateWithDuration:1.0f
delay:0.0f
options: UIViewAnimationOptionCurveEaseInOut
animations:^{
endingLayer.frame = CGRectMake(20.0f, 0.0f, 724.0f, 538.0f);
switchViewBottom.layer.transform = perspectiveTransformRight;
}
completion:^(BOOL finished){
[delegate switchAnimationFinished];
}
];
I am at a loss. Can someone help me?
Do some reading on CAAnimationGroup and use CABasicAnimations instead.
That should held you achieve what you're after. I'll search for an example in my code (I previously used it) if you'll have issues implementing it.
Edit: Here's some code
typedef void (^animationCompletionBlock)(void);
typedef void (^animationStartedBlock)(void);
- (void)addAnimations:(NSArray *)animations withDuration:(CGFloat)animationDuration onView:(UIView *)aView {
animationStartedBlock startBlock = ^void(void) {
// Additional Animation start code here
};
animationCompletionBlock endBlock = ^void(void) {
// Additional animation completed code here
};
CAAnimationGroup *group = [CAAnimationGroup animation];
group.fillMode = kCAFillModeForwards;
group.removedOnCompletion = NO;
group.duration = animationDuration;
[group setAnimations:animations];
group.delegate = self;
[group setValue:startBlock forKey:#"animationStartedBlock"];
[group setValue:endBlock forKey:#"animationCompletionBlock"];
[aView.layer addAnimation:group forKey:#"yourAnimationName"];
}
This will have your completion blocks called in your delegate
// Animation Delegate
- (void)animationDidStart:(CAAnimation *)anim {
animationStartedBlock animationStartedBlock = [anim valueForKey:#"animationStartedBlock"];
if (animationStartedBlock) {
animationStartedBlock();
}
}
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
animationCompletionBlock animationCompleteBlock = [theAnimation valueForKey:#"animationCompletionBlock"];
if (animationCompleteBlock) {
animationCompleteBlock();
}
}
How you create the animations and add them to an array to pass to this method is up to you, depending on what animations you want.
This is an example for two scale / fade animations:
// Scale
- (CABasicAnimation *)scaleAnimationForImageView:(UIImageView *)imageView withDuration:(CGFloat)duration {
CGRect imageFrame = imageView.frame;
CABasicAnimation *resizeAnimation = [CABasicAnimation animationWithKeyPath:#"bounds.size"];
[resizeAnimation setToValue:[NSValue valueWithCGSize:CGSizeMake(40.0f, imageFrame.size.height * (40.0f / imageFrame.size.width))]];
resizeAnimation.fillMode = kCAFillModeForwards;
resizeAnimation.duration = duration;
resizeAnimation.removedOnCompletion = NO;
return resizeAnimation;
}
// Fade
- (CABasicAnimation *)fadeAnimationWithFinalOpacity:(CGFloat)opacity withDuration:(CGFloat)duration {
CABasicAnimation *fadeOutAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
[fadeOutAnimation setToValue:[NSNumber numberWithFloat:opacity]];
fadeOutAnimation.fillMode = kCAFillModeForwards;
fadeOutAnimation.removedOnCompletion = NO;
fadeOutAnimation.duration = duration;
return fadeOutAnimation;
}