iOS 动画初步

iOS 动画初步

1. CALayer的使用 (图层) 属于QuartzCore.framework 框架 跨平台

我们在开发中使用的UIKit.framework里面的控件之所以可以看见，主要是由于他拥有了CALayer。

//-------------------------------------------------------------------------
// 图层 部分属性

// shadow 是否透明
self.myView.layer.shadowOpacity = 1.0f;

// shadow 颜色
self.myView.layer.shadowColor = [UIColor redColor].CGColor;

// shadow 半径
self.myView.layer.shadowRadius = 10.0f;

// layer 的圆角半径
self.myView.layer.cornerRadius = 5;

// layer 边框颜色
_myView.layer.borderColor = [UIColor whiteColor].CGColor;

// layer 边框半径
_myView.layer.borderWidth = 10;
//-------------------------------------------------------------------------

CALayer在设置部分属性时，有动画效果，（隐试动画）有 Animatable 相关的注释便自带了隐试动画

如：

/* The shadow offset. Defaults to (0, -3). Animatable. */

@property CGSize shadowOffset;

/* The blur radius used to create the shadow. Defaults to 3. Animatable. */

@property CGFloat shadowRadius;

CALayer的使用

CALayer *lay = [CALayer layer];
lay.backgroundColor = [UIColor redColor].CGColor;
lay.shadowOpacity = 1.0;
lay.shadowColor = [UIColor whiteColor].CGColor;
lay.shadowRadius = 10;
lay.cornerRadius = 5;
lay.masksToBounds = YES;
[self.view.layer addSublayer:lay];

// 设置image
lay.contents = (__bridge id _Nullable)([UIImage imageNamed:@"111"].CGImage);

CALayerd的动画 （使用CATransform3D，一般不用此方法做动画）

// 旋转 rotation
[UIView animateWithDuration:0.3 animations:^{
_layer.transform = CATransform3DMakeRotation(M_PI_4, 0, 0, 0);

// KVC
[_layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 0, 0, 0)] forKeyPath:@"transform"];

// KVC transform.rotation
[_layer setValue:@M_PI forKeyPath:@"transform.rotation"];

}];

// 放大 缩小 Scale
[UIView animateWithDuration:0.3 animations:^{

_layer.transform = CATransform3DMakeScale(0, 0, 0);

// KVC
[_layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0, 0, 0)] forKeyPath:@"transform"];
}];

// 平移 Translation
[UIView animateWithDuration:0.3 animations:^{

_layer.transform = CATransform3DMakeTranslation(0, 0, 0);

// KVC
[_layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 0, 0)] forKeyPath:@"transform"];

[_layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 0, 0)] forKeyPath:@"transform.x"];

}];

// ... CATransform3DMakeAffineTransform
[UIView animateWithDuration:0.3 animations:^{

_layer.transform = CATransform3DMakeAffineTransform(CGAffineTransformMake(0, 0, 0, 0, 0, 0));

// KVC
[_layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(CGAffineTransformMake(0, 0, 0, 0, 0, 0))] forKeyPath:@"transform"];
}];