I'm trying to animate some markers initialised with a picture as follows RMMarker *marker = [[RMMarker alloc] initWithUIImage:lImage anchorPoint:lPoint];
I get a static image on my map with no problem.
Now, I need it to be more visible than other annotations, so I want to make it blink.
Here's what I already tried:
Creating scale animation on annotation layer
[CATransaction begin];
[CATransaction setAnimationDuration:0.70];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
CABasicAnimation *bounceAnimation = [CABasicAnimation animationWithKeyPath:#"transform"];
bounceAnimation.repeatCount = MAXFLOAT;
bounceAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1.0)];
bounceAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.8, 0.8, 1.0)];
bounceAnimation.removedOnCompletion = NO;
bounceAnimation.autoreverses = YES;
[layer addAnimation:bounceAnimation forKey:#"animateScale"];
[CATransaction commit];
This is working well, except that my callout view is also blinking as it shares the same layer (and Mapbox messes with the animation during the tracking mode, resulting in an incorrect orientation as it is reseted with every move of the user anyway).
Creating blink animation on annotation layer
[CATransaction begin];
[CATransaction setAnimationDuration:0.60];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
opacityAnimation.repeatCount = MAXFLOAT;
opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];
opacityAnimation.toValue = [NSNumber numberWithFloat:0.3];
opacityAnimation.removedOnCompletion = NO;
opacityAnimation.autoreverses = YES;
[layer addAnimation:opacityAnimation forKey:#"animateOpacity"];
[CATransaction commit];
This is less noticeable, but the annotation orientation is correct this time. I still have my callout view blinking on the layer though.
What I want to do
I would need a way to animate the marker image without affecting the layer.
The best animation I'd use would be the first one I tried, without the rotation problem.
So far I couldn't animate the UIImage as it doesn't have the addAnimation: forKey: call.
I've never played much with animations, so any help or guidance would be appreciated.
You're on the right track with CABasicAnimation, as this is what is used for the animated user location annotations in the SDK. You can see this around here:
https://github.com/mapbox/mapbox-ios-sdk/blob/509fa7df46ebd654d130ab2f530a8e380bf2bd59/MapView/Map/RMMapView.m#L3593
Could you elaborate on this?
This is working well, except that my callout view is also blinking as it shares the same layer (and Mapbox messes with the animation during the tracking mode, resulting in an incorrect orientation as it is reseted with every move of the user anyway).
You do bring up a good point that the callout is a sublayer, so it would also blink. This use case hasn't been considered — is it possible for you to deselect your annotation and thus hide the callout?
But what is meant by the latter part?
Related
I have a UIImageView that when the user taps it, a border of 4 points toggles on and off. I'm trying to animate the border in and out as follows:
CABasicAnimation *widthAnimation = [CABasicAnimation animationWithKeyPath:#"borderWidth"];
widthAnimation.toValue = self.isSelected ? #4.0 : #0.0;
widthAnimation.duration = 0.1;
[self.imageView.layer addAnimation:widthAnimation forKey:#"borderWidth"];
Now, as I've learned from research and scouring SO, CABasicAnimation just changes the presentation layer, but not the actual model. I've also read that using fillMode and removedOnCompletion is bad practice, since it leads to inconsistencies between the model and what the user sees. So, I tried to change the model with the following line:
self.imageView.layer.borderWidth = self.isSelected ? 4.0 : 0.0;
The problem is, this line seems to set the property straight away, so by the time the animation kicks in, the border width is already at it's desired value. I've tried sticking this line at the beginning of the code, end, and everywhere in between, but to no success. I did manage to find a hacky solution: instead of setting the property, I passed the property setter to performSelector: withObject: afterDelay:, with the delay being the duration of the animation. This works most of the time, but sometimes the cycles don't quite match up, and the animation will run first, then it jumps back to the original state, then it snaps to the new state, presumably as a result of performSelector
So is there any way to smoothly animate a border without performSelector?
Any help is greatly appreciated.
Here is an example of CABasicAnimation I made a while ago :
-(void) animateProgressFrom:(CGFloat)fromValue to:(CGFloat)toValue
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"opacity"];
animation.fromValue = #(fromValue);
animation.toValue = #(toValue);
animation.duration = ABS(toValue - fromValue)*3.0;
[self.layer addAnimation:animation forKey:#"opacity"];
[CATransaction begin];
[CATransaction setDisableActions:YES];
self.layer.opacity = toValue;
[CATransaction commit];
}
I think what you needed is the CATransaction at the end of the layer animation.
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.
I was just wondering if this is the correct way to animate a CALayer with a CABasicAnimation.
On Stack Overflow I have been taught how to animate UI objects by setting a new position before running a CABasicAnimation:
Animating a UI Object Example
gameTypeControl.center = CGPointMake(gameTypeControl.center.x, -slidingUpValue/2);
CABasicAnimation *removeGameTypeControl = [CABasicAnimation animationWithKeyPath:#"transform.translation.y"];
[removeGameTypeControl setFromValue:[NSNumber numberWithFloat:slidingUpValue]];
[removeGameTypeControl setToValue:[NSNumber numberWithFloat:0]];
[removeGameTypeControl setDuration:1.0];
[removeGameTypeControl setTimingFunction:[CAMediaTimingFunction functionWithControlPoints:0.8 :-0.8 :1.0 :1.0]];
[[gameTypeControl layer] addAnimation:removeGameTypeControl forKey:#"removeGameTypeControl"];
Now I've been tried this method on a CALayer but it seems to work differently. For me to get the same result. I have the set the ToValue to the new y position instead of using the value 0 like I've done with my UI object animations.
Animating a CALayer Example
serveBlock2.position = CGPointMake((screenBounds.size.height/4)*3, -screenBounds.size.width/2);
CABasicAnimation *updateCurrentServe2 = [CABasicAnimation animationWithKeyPath:#"position.y"];
updateCurrentServe2.fromValue = [NSNumber numberWithFloat:slidingUpValue/2];
[updateCurrentServe2 setToValue:[NSNumber numberWithFloat:-screenBounds.size.width/2]];
[updateCurrentServe2 setDuration:1.0];
[serveBlock2 addAnimation:updateCurrentServe2 forKey:#"serveBlock2 updateCurrentServe2"];
Is this correct? Am I doing this right?
The problem is that if serveBlock2 is not a view's immediately underlying layer, setting its position, as you do in the first line of the second example, starts a different animation (an implicit animation). The way to prevent that is by turning off implicit animations. Thus this example from my book:
CompassLayer* c = (CompassLayer*)self.compass.layer;
[CATransaction setDisableActions:YES]; // <=== this is important
c.arrow.transform = CATransform3DRotate(c.arrow.transform, M_PI/4.0, 0, 0, 1);
CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:#"transform"];
anim.duration = 0.8;
[c.arrow addAnimation:anim forKey:nil];
That way, I don't have to have a fromValue or a toValue! The old value and the new value are known automatically from the presentation layer and the model layer.
I am creating some animation on my application and the code below zooms out an object till it disappears. I can't figure out how to make the object to disappear and keep that way, ie. how to make the animation stay put after it finishes. Any gotchas on that? Cheers!
CABasicAnimation* zoomOut = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
zoomOut.duration = 1;
zoomOut.toValue = [NSNumber numberWithFloat:0];
[draggedObject addAnimation:zoomOut forKey:nil];
I found it. It also needs the two methods below:
zoomOut.removedOnCompletion = NO;
zoomOut.fillMode = kCAFillModeForwards;
Ok so this happens because the animation doesn't actually change the underlying property, which is why it jumps back after the animation is complete.
Try adding this line before the line starting the animation -
zoomOut.removedOnCompletion = NO;
I have a problem I don't understand regarding UIViews and Core Animation. Here's what I want to do:
A small view is presented above a bigger view by putting it as one of its subviews.
When I click a button inside this view, the view should minimize and move to a specified CGRect.
Then the view is removed from its superview.
The first time I present, minimize-and-move and remove the view, everything works fine. But when I present the view again, it displays at the modified position (even though it's supposed to be set at the original position by a call to theView.frame = CGRectMake(600.0, 160.0, 339.0, 327.0);), while all the different responder elements (buttons, textviews, etc.) contained in the view act as if they were at the original position. It's like the view and the layer gets dissynchronized by the animation, and I do not know how to get them back in sync.
Having something like self.view.layer.frame = CGRectMake(600.0, 160.0, 339.0, 327.0); does not get anything right.
My minimize-and-move animation code is given below:
[CATransaction flush];
CABasicAnimation *scale, *translateX, *translateY;
CAAnimationGroup *group = [CAAnimationGroup animation];
group.delegate = delegate;
group.duration = duration;
scale = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
translateX = [CABasicAnimation animationWithKeyPath:#"transform.translation.x"];
translateY = [CABasicAnimation animationWithKeyPath:#"transform.translation.y"];
scale.toValue = [NSNumber numberWithFloat:0.13];
translateX.toValue = [NSNumber numberWithFloat:137.0];
translateY.toValue = [NSNumber numberWithFloat:-290.0];
group.animations = [NSArray arrayWithObjects: scale, translateX, translateY, nil];
group.fillMode = kCAFillModeForwards;
group.removedOnCompletion = NO;
[theView.layer addAnimation:group forKey:#"MyAnimation"];
How to get the layer back to the view after the animation?
What happens if you remove these two lines?
group.fillMode = kCAFillModeForwards;
group.removedOnCompletion = NO;
What you are telling core animation with those lines is that you want it to continue to display in the forward (final) state of the animation. Meanwhile, you didn't actually set the transform on the layer to have the properties you used for the animation. This would make things appear to be out of sync.
Now, the issue you're going to run into is that removing those lines will cause your transforms to revert back to the starting state when the animation has completed. What you need to do is actually set the transforms on the layer in order for them to hold their position when the animation completes.
Another option is to leave the two lines in and then actually explicitly remove the animation from the layer instead of setting the layer frame as you mentioned when you are ready to revert back to the original state. You do this with:
[theView.layer removeAnimationForKey:#"MyAnimation"];
The -removedOnCompletion property told the layer not to remove the animation when it finished. Now you can explicitly remove it and it should revert back.
HTH.