图片翻折

图片的翻折效果

• 实现的功能:翻折图片,类似翻书效果,松手恢复到原位
• 思路: 翻折可以利用图层的transform来实现,但是这里将图片对折,一张图片实现起来太过复杂,所以这里通过2张图片,利用锚点将两者图片拼接成起来.再通过手势,来旋转图片

1.添加图片

• 如何将两张图片拼接成一张??
  • 创建2张相同尺寸的图片,设置图片layer 的 position 都为屏幕中心,将左边图片的锚点设置为右边的中点. 将右边图片锚点设置成左边的中点.这样拼接图片.

  //设置左边图片的锚点
  left.layer.anchorPoint = CGPointMake(1, 0.5);
  left.layer.position = self.view.center;
  

Snip20160309_18.png

• 但是实际情况显示的图片还是2张图片

Snip20160309_19.png

• 下一步,我们只需要调整2张图片的显示内容,让图片看起来像一张图片,调整图片的显示内容.这里需要利用图层的属性,contentsRect - 用来设置图片的显示尺寸.所以这里只需要将左边图片,只显示整张图片的左半部,右边图片以此类推.

  //设置图片的显示尺寸(只显示左边的尺寸)
  _left.layer.contentsRect = CGRectMake(0, 0, 0.5, 1);
  

Snip20160309_15.png

• 右边图片同样设置,图片就拼接完成

Snip20160309_16.png

2.添加手势

• imageView的属性userInteractionEnabled默认为NO,是不交互的,所以我们要修改图片为交互,然后分别给2张图片添加手势? 但是这样做太过繁琐,我们能不能只通过某个媒介同时控制2张图片呢?这样只需要给一个控件添加手势, 所以我们这里在2张图片上覆盖一个透明的View, 专门用来处理手势.

3.给View添加平移手势

UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [view addGestureRecognizer:pan];

4.翻折图片

• 图片的翻折,其实就是将图片旋转,所以我们可以通过触控手势的平移量来计算出旋转的角度,在通过图片layer的transform属性,将图片绕着Y轴旋转即可.

  • 通过偏移量计算出旋转的角度

        //获取偏移量
        CGPoint transPoint = [pan translationInView:self.panView];
        //通过偏移量,计算出图片翻折的比例
        CGFloat transAngle = transPoint.x / self.panView.bounds.size.width * M_PI;
    

  • 旋转图片,添加立体效果

     CATransform3D trans = CATransform3DMakeRotation(transAngle, 0, 1, 0);
    self.left.layer.transform = trans;
    

  • 设置图片的回弹效果

    • 当手指抬起,将旋转的图片还原

            //设置图片的回弹效果
    if (pan.state == UIGestureRecognizerStateEnded) {//判断手势结束
        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            self.left.layer.transform = CATransform3DIdentity;
            self.rightlayer.opacity = 0;
        } completion:^(BOOL finished) {
    

  • 为了能够有更加真实的效果,我们还可以增加阴影的效果,这里就需要利用到了一个图层CAGradientlayer(阴影图层)

    • 初始化一个阴影图层

      CAGradientLayer *rightLayer = [CAGradientLayer layer];
      

    • 设置图层的尺寸,渐变的颜色

        rightLayer.bounds = CGRectMake(0, 0, 100, 200);
        rightLayer.anchorPoint = CGPointMake(0, 0);
        rightLayer.startPoint = CGPointMake(0, 1);
    

    • 将图层添加到图片上,另外一部分重复操作即可

    [self.right.layer addSublayer:rightLayer];
    

    • 开始设置阴影图层为隐藏状态, 不透明值随着手势偏移量的比例增加,当手势结束,将阴影图层隐藏

      //设置阴影效果
      self.rightlayer.opacity = transPoint.x / self.panView.bounds.size.width;
      ```