美文网首页
iOS CALayer综合学习

iOS CALayer综合学习

作者: Zonpai | 来源:发表于2018-08-12 15:55 被阅读0次

    实现图片随者手势拖动进行翻转

    效果图:

    图片翻转.gif
    - (void)viewDidLoad {
        [super viewDidLoad];
        UIPanGestureRecognizer *panGs = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(PanAction:)];
        [self.view addGestureRecognizer:panGs];
        self.panGs = panGs;
        [self setImage];
    }
    //设置图片
    - (void)setImage {
        //设置顶图
        //contentsRect设置图片的内容区域
        self.topImage.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
        self.topImage.layer.anchorPoint = CGPointMake(0.5, 1);
        //设置底图
        self.bottomImage.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
        self.bottomImage.layer.anchorPoint = CGPointMake(0.5, 0);
        //设置底部image的渐变层
        CAGradientLayer *gradient = [CAGradientLayer layer];
        gradient.frame = self.bottomImage.bounds;
        gradient.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
    #pragma  mark  - 渐变层
        //设置渐变层渐变的区间
        //其location属性可以设置开始渐变的区域
        //下面为设置渐变qujian
        //layer中有很多属性其取值范围在0~1之间
        gradient.startPoint = CGPointMake(0, 0);
        gradient.endPoint = CGPointMake(0, 1);
        //opacity--->不透明度
        gradient.opacity = 0;
        self.gradient = gradient;
        [self.bottomImage.layer addSublayer:gradient];
    }
    - (void)PanAction:(UIPanGestureRecognizer *)sender {
        CGPoint curPoint = [sender translationInView:self.touchView];
        CGFloat angle = (curPoint.y / 200) *M_PI;
        CATransform3D transform = CATransform3DIdentity;
        //设置立体效果,注意要加上“.0“;
        transform.m34 = -1/300.0;
        self.topImage.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0);
        self.gradient.opacity = curPoint.y/200;
        if (sender.state == UIGestureRecognizerStateEnded) {
            [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:1 options:UIViewAnimationOptionCurveEaseOut animations:^{
                //重置transForm
                self.topImage.layer.transform = CATransform3DIdentity;
                self.gradient.opacity = 0;
            } completion:nil];
        }
    }
    

    CAlayer复制层CAReplicatorLayer

    实现效果也:音量振动条

    效果图: 音量震动条.gif
    - (void)setLayer {
        //设置复制层
        CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
        replicator.frame = self.backView.bounds;
        replicator.backgroundColor = [UIColor yellowColor].CGColor;
        replicator.instanceCount = 8;
        replicator.instanceTransform = CATransform3DMakeTranslation(30, 0, 0);
        replicator.instanceDelay = 1;
        //设置子layer
        CALayer *layer = [CALayer layer];
        CGFloat weight = 20;
        CGFloat height = 100;
        CGFloat y = self.backView.bounds.size.height - height;
        CGFloat x = 20;
        layer.anchorPoint = CGPointMake(0.5, 1);
        layer.frame = CGRectMake(x, y, weight, height);
        layer.backgroundColor = [UIColor redColor].CGColor;
        [replicator addSublayer:layer];
        [self.backView.layer addSublayer:replicator];
        //设置动画
        CABasicAnimation *baseAnim = [CABasicAnimation animation];
        baseAnim.keyPath = @"transform.scale.y";
        baseAnim.fromValue = @0;
        baseAnim.toValue = @1.5;
        baseAnim.repeatCount = MAXFLOAT;
        baseAnim.duration = 1;
        baseAnim.autoreverses = YES;
        [layer addAnimation:baseAnim forKey:nil];
    }
    

    相关文章

      网友评论

          本文标题:iOS CALayer综合学习

          本文链接:https://www.haomeiwen.com/subject/ocbsbftx.html