Keyframe Animation- Transform

The designated initializer for a CALayer is simply init. After you instantiate a layer, you set its size, position, and contents.

-(id) initWithFrame: (CGRect) r
{
self = [super initWithFrame:r];
if(self){
[self setBackgroundColor:[UIColor clearColor]];
[self setCircleColor:[UIColor lightGrayColor]];

boxLayer = [[CALayer alloc]init];
[boxLayer setBounds:CGRectMake(0.0,0.0,85.0,85.0)];

[boxLayer setPosition:CGPointMake(160.0,100.0)];
//make it a sublayer of the view's layer
[[self layer] addSubLayer:boxLayer];
}
}

With a UIView, we typically define the frame of the view to establish its size and position.

For a CALayer, instead of defining a frame, you set the bounds and position properties of the layer.

The default setting for position is the center of the layer in its superlayer(anchorPoint (0.5,0.5),center).

 

To complete control over your animations.

The term keyframe animationcomes from film animation. Before the advent of rendering farms and green screens, artists would use old-fashioned pencil and paper to draw the primary or key frames of an animation. Artists could then flip between the different frames to ensure that the basic anima-tion was occurring the way they had envisioned it. Next the keyframes would be handed off to another artist to do the grunt work of drawing the frames that would come in between and enable the animation to be played back at the industry standard 24 frames per second (fps).

scale transform

- (IBAction)scaleTransform:(id)sender
{
NSValue*value = nil;
CABasicAnimation*animation = nil;
CATransform3Dtransform;
[[self workLayer] removeAllAnimations];
animation = [CABasicAnimation animationWithKeyPath:@”transform”];
transform = CATransform3DMakeScale(0.5f, 0.5f, 1.0f);
value = [NSValue valueWithCATransform3D:transform];
[animation setToValue:value];
transform = CATransform3DMakeScale(1.0f, 1.0f, 1.0f);
value = [NSValue valueWithCATransform3D:transform];
[animation setFromValue:value];
[animation setAutoreverses:YES];
[animation setDuration:1.0f];
[animation setRepeatCount:100];
[workLayer addAnimation:animation forKey:kScaleKey];
}

 rotate transform

- (IBAction)rotateTransform:(id)sender;
{
NSValue*value = nil;
CABasicAnimation*animation = nil;
CATransform3Dtransform;
[[self workLayer] removeAllAnimations];
animation = [CABasicAnimation animationWithKeyPath:@”transform”];
transform = CATransform3DMakeRotation(1.57f, 0.0f, 0.0f, 1.0f);
value = [NSValue valueWithCATransform3D:transform];
[animation setToValue:value];
transform = CATransform3DMakeRotation(0.0f, 0.0f, 0.0f, 1.0f);
value = [NSValue valueWithCATransform3D:transform];
[animation setFromValue:value];
[animation setAutoreverses:YES];
[animation setDuration:1.0f];
[animation setRepeatCount:100];
[workLayer addAnimation:animation forKey:kScaleKey];
}

this example uses four para-meters: the first parameter is the angle, expressed in radians, and the next three are the x-,y-, and z-axes. The layer is rotated by 1.57 radians (that is, 90 degrees) on the x-axis. The values for the x-,y-, and z-axes are a bit unusual. These values refer to the magnitudeof the rotation and accept a value between -1.0 and1.0. The rotation is set to be a full positive magnitude along the z-axis,
which produces what appears to be a 2D rotation in a clockwise direction.

To trans-late degrees into radians, use the formula
X∏/180. For example:

90∏/ 180 = 45(3.1415) / 180 = 0.7853

The next example takes the previous one a step further by rotating the layer along two axes.

- (IBAction)rotate3DTransform:(id)sender;
{
NSValue*value = nil;
CABasicAnimation*animation = nil;
CATransform3Dtransform;
[[selfworkLayer] removeAllAnimations];
animation = [CABasicAnimation animationWithKeyPath:@”transform”];
transform = CATransform3DMakeRotation(1.57f, 1.0f, 1.0f, 0.0f);
value = [NSValue valueWithCATransform3D:transform];
[animation setToValue:value];
transform = CATransform3DMakeRotation(0.0f, 1.0f, 1.0f, 0.0f);
value = [NSValue valueWithCATransform3D:transform];
[animation setFromValue:value];
[animation setAutoreverses:YES];
[animation setDuration:1.0f];
[animation setRepeatCount:100];
[workLayer addAnimation:animation forKey:kScaleKey];
}

nearly identical to previous example except for the values passed into the CATransform3DMakeRotationmethod. This example sets both the x- and y-axes to 1.0, which produces a rotation on both axes and gives the illusion that the layer is flipping diagonally.

 

Combine the rotate and scale

- (IBAction)action:(id)sender;
{
NSRect frame = [[[selfwindow] contentView] frame];
floatx = frame.origin.x+ frame.size.width- 30;
floaty = frame.origin.y+ frame.size.height- 30;
CATransform3D rotate;
CATransform3D scale;
CATransform3D combine;
[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:5.0f]
forKey:kCATransactionAnimationDuration];
[layer setPosition:CGPointMake(x, y)];
scale = CATransform3DMakeScale(0.1f, 0.1f, 1.0f);
rotate = CATransform3DMakeRotation(1.57f, 0.0f, 0.0f, 1.0f);
combine = CATransform3DConcat(rotate, scale);
[layer setTransform:combine];
[CATransaction commit];
}