CAGradientLayer(渐变层)
- 父类是CALayer
CAGradientLayer所有独有属性
//渐变颜色,是一个数组,代表从xx颜色到xx颜色再到xx颜色。。。
@property(nullable, copy) NSArray *colors;
//设置到下一个颜色开始渐变的位置
@property(nullable, copy) NSArray<NSNumber *> *locations;
//渐变方向
//渐变开始点(取值是0~1)
@property CGPoint startPoint;
//渐变结束点(取值是0~1)
@property CGPoint endPoint;
//类型,目前之前“轴向”这种类型,默认
@property(copy) NSString *type;
@end
CAGradientLayer实现折叠效果
- 实现步骤:
- 组合两张相同的图片在同一个位置(即position一样),分别只显示上部与下部,通过锚点,实现两张图片各显示一半而在视觉上组合成一张图片
- 在组合图片上覆盖一个颜色为clearColor,等大的view,在其上增加拖动手势,
实现折叠,阴影,渐变,近大远小立体效果,还原时弹簧效果
;新增一个view的原因是这样才能实现完整的折叠效果,若放在上部图片上,由于其在旋转过程中,导致有些位置已经不能响应事件,继续拖动(请发挥想象力)
@interface ViewController ()
//上部图片
@property (weak, nonatomic) IBOutlet UIImageView *topView;
//下部图片
@property (weak, nonatomic) IBOutlet UIImageView *bottomView;
//渐变层
@property (nonatomic, weak) CAGradientLayer *layer;
@end
@implementation ViewController
//拖动时实现折叠,渐变,近大远小立体效果
- (IBAction)pan:(UIPanGestureRecognizer *)sender {
// 获取当前手指的偏移量
CGPoint transP = [sender translationInView:sender.view];
// 计算下旋转的角度
CGFloat angle = -transP.y / 200.0 * M_PI;//注意是负值,逆时针旋转
// 描述有立体感的形变
CATransform3D transform = CATransform3DIdentity;//清空形变
// 添加立体感,设置形变的M34,什么是立体感,近大远小
// -1 / d, d表示我们的眼睛离手机屏幕的位置
transform.m34 = -1 / 400.0;
transform = CATransform3DRotate(transform, angle, 1, 0, 0);
_topView.layer.transform = transform;
// 设置阴影
_layer.opacity = transP.y / 200.0;
if (sender.state == UIGestureRecognizerStateEnded) { // 手指抬起
// 隐藏阴影
_layer.opacity = 0;
//实现松手时反弹效果
// Damping:弹性系数 值越小 弹簧效果越明显
// initialSpringVelocity:弹簧效果的初始化速度
// options;动画执行过程
[UIView animateWithDuration:.9 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
// 动画代码
// 还原顶部的形变
_topView.layer.transform = CATransform3DIdentity;
} completion:^(BOOL finished) {
}];
}
}
- (void)viewDidLoad {
[super viewDidLoad];
// 设置顶部视图只显示图片的上部分内容
// contentsRect设置图片的显示范围,取值范围0~1
_topView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
// 设置顶部视图的锚点
_topView.layer.anchorPoint = CGPointMake(0.5, 1);
// 设置底部的图片显示范围
_bottomView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
_bottomView.layer.anchorPoint = CGPointMake(0.5, 0);
// 给下部分view添加阴影
// 渐变层
CAGradientLayer *layer = [CAGradientLayer layer];
layer.frame = _bottomView.bounds;
// 设置渐变颜色
layer.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
// 设置不透明 0 : 透明
layer.opacity = 0;
// 设置到下一个颜色开始渐变的位置
// layer.locations = @[@0.2,@0.2];
// 设置渐变的方向
// layer.startPoint = CGPointMake(0, 0);
// layer.endPoint = CGPointMake(1, 1);
_layer = layer;
[_bottomView.layer addSublayer:layer];
}
网友评论