iOS 图片折叠效果

作者: Codepgq | 来源:发表于2016-08-26 17:15 被阅读207次

    原理:

    1、创建工程-打开Main.storyboard-拖入两个ImageView

    1 ![Uploading 2_500742.png . . .]

    .

    调整位置


    调整位置

    .
    设置图片

    设置图片后

    2、拖线

    .

    拖线

    把两个图片重叠在一起,并且bottom ImageV在上面,Top ImageV在下面

    效果

    3、在上面添加一个透明的View,大小和位置与图片一样

    效果
    调整位置大小
    • 把图片设置为200 100 并且居中
    • 把View设置为200 200并且居中
      最后如下:


      设置如下效果

    .
    .

    为透明VIew添加手势
    添加手势

    .
    .
    .

    把手势事件添加到VC中
    效果下

    4、处理量ImageVIew,让他们都各自显示一半

        self.topImageV.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
        self.topImageV.layer.anchorPoint = CGPointMake(0.5, 1);
        
        self.bottomImageV.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
        self.bottomImageV.layer.anchorPoint = CGPointMake(0.5, 0);
    

    5、手势动画

     CGPoint curP = [sender locationInView:sender.view];
             
                //angle
                CGFloat angle = curP.y * M_PI / 180.0;
                self.topImageV.layer.transform = CATransform3DMakeRotation(-angle, 1, 0, 0);
    

    .
    .
    .

    6、添加阴影效果

    • 要使用到一个类:CAGradientLayer
      基本属性介绍:
    • colors:颜色数组
    • startPoint:开始点
    • endPoint:结束点
    • locations:颜色开始的位置
    • 注意要设置大小,可以通过opacity来设置不透明度
    CAGradientLayer * gradientL = [CAGradientLayer layer];
        gradientL.frame = self.bottomImageV.bounds;
        gradientL.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
        self.gradientL = gradientL;
        self.gradientL.opacity = 0;
        [self.bottomImageV.layer addSublayer:gradientL];
    

    .
    .
    .

    最终的手势代码:
    - (IBAction)foldImage:(UIPanGestureRecognizer *)sender {
        
        switch (sender.state) {
            case UIGestureRecognizerStateEnded:
            {
                [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.25 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
                    self.gradientL.opacity = 0;
                    self.topImageV.layer.transform = CATransform3DIdentity;
                } completion:^(BOOL finished) {
                    
                }];
            }
                break;
            case UIGestureRecognizerStateChanged:{
                CGPoint curP = [sender locationInView:sender.view];
                
                //angle
                CGFloat angle = curP.y * M_PI / 180.0;
                
                //创建阴影效果
                self.gradientL.opacity = curP.y * 1 / 256.0;
                self.topImageV.layer.transform = CATransform3DMakeRotation(-angle, 1, 0, 0);
            }
                break;
                
            default:
                break;
        }
    }
    

    最终效果如下:

    图片压缩厉害,可能看不出来效果图
    最终效果

    demo地址

    相关文章

      网友评论

        本文标题:iOS 图片折叠效果

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