I'm attempting to create an animated CALayer that uses a CABasicAnimation in order to animate an object that rotates at discrete intervals between two angles. Note the word discrete: I'm not trying to create a continuous animation between two points, but rather I want to calculate fixed increments between each angle in order to create a discrete movement feel.
Here's a diagram:
I've looked into setting the byValue attribute of the CABasicAnimation, but I can't seem to get it to work since you can't use fromValue, ToValue, and byValue in one animation. fromValue is always from zero, so I guess that could be dropped, but it still never animates correctly when using the current endAngle as the toValue and a byValue of 0.1 (arbitrarily chosen but should work for testing). Any ideas on how to implement this? Here's code I'm using:
anim = [CABasicAnimation animationWithKeyPath:#"currentEndAngle"];
anim.duration = 0.5f;
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
anim.toValue = [NSNumber numberWithFloat:self.endAngle];
anim.byValue = [NSNumber numberWithFloat:0.1f];
anim.repeatCount = HUGE_VALF;
[anim setDelegate:self];
[self addAnimation:anim forKey:#"animKey"];
Thanks!
Related
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.
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?
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've created a 3D cube view transition that does the following:
Creates a layer container.
Adds the current view in 2D space.
Adds the next view to the right and rotated 90 degrees (like in a cube)
Performs an animation to rotate the cube.
Here's the code for that - its working fine. . . actual problem below:
- (CAAnimation*)makeRotationWithMetrics:(BBRotationMetrics*)metrics
{
[CATransaction flush];
CAAnimationGroup* group = [CAAnimationGroup animation];
group.delegate = self;
group.duration = metrics.duration;
group.fillMode = kCAFillModeForwards;
group.removedOnCompletion = NO;
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
CABasicAnimation* translationX = [CABasicAnimation animationWithKeyPath:#"sublayerTransform.translation.x"];
translationX.toValue = metrics.translationPointsX;
CABasicAnimation* rotation = [CABasicAnimation animationWithKeyPath:#"sublayerTransform.rotation.y"];
rotation.toValue = metrics.radians;
CABasicAnimation* translationZ = [CABasicAnimation animationWithKeyPath:#"sublayerTransform.translation.z"];
translationZ.toValue = metrics.translationPointsZ;
group.animations = [NSArray arrayWithObjects:rotation, translationX, translationZ, nil];
return group;
}
At the end of the animation, I would like to perform a jiggle, as though the cube was mounted on a spring. I've tried playing a series of animations to rotate around the Y axis, gradually decaying.
I've set up a series of animations, but each ones starts from the origin, instead of the last point the layer got to. . . how can I fix that? One way would be to set the tranform on the layer first,
But is there a way to do 3D transforms with key-points ?
It sounds to me like you are looking for CAKeyframeAnimation. Instead of specifying a toValue you pass an array of values and optionally keyTimes including start and end values.
The starts from the origin problem comes from using removedOnCompletion. By doing so you are introducing a difference between the presentation (what is shown on screen) and the model (the property value of your layer). A cleaner approach is to explicitly set the end value and animate from the previous value to the end value. That will leave you in a clean state when the animation finishes.
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.