iOS - 图片实现多层折叠效果

iOS - 图片实现多层折叠效果

2016-01-04 10:27  编辑： suiling  分类：iOS开发  来源：Resory 投稿

6  5963

图片多层折叠折叠效果

招聘信息：

• 手机视频剪辑字幕配音工具iOS类app
• 点读笔开发
• UI设计
• app推广与运营
• 技术合伙人
• 移动应用开发项目经理
• 算法工程师
• Mac开发
• 微信书城开发
• 数字图书商城开发
• iOS维护

 

本文是投稿文章，作者：Resory

---

序

在网上能找到挺多图片折叠效果的教程，但大多数是一层折叠，在他们的教程的基础上，我试着实现了一下多层折叠的效果。操作如下~

效果

Demo

Demo地址：https://github.com/Resory/RYMutipleFoldImageView

如果官人喜欢的话不妨给个星星吧。

逻辑

• 在做图片折叠效果的时候，我们可以理解为把图片分成几部分，然后分别对各部分做动效来实现折叠效果。

• 根据动态图,可以看到这是一张大图"分成"4个小imageView。从上至下，我们分别命名为one,two,three,four

• 对one,two,three,four这四个小imageView进行旋转+移动。旋转的时候，关键是看各个imageView的anchorPoint是多少.而我们这里,可看p1图中的红点。

   1.a1代表one的anchorPoint为(0.5,0.0)

   2.a2代表two的anchorPoint为(0.5,1.0)

   3.a3代表three的anchorPoint为(0.5,0.0)

   4.a4代表four的anchorPoint为(0.5,1.0)

• 旋转：我们这里的imageView都是旋转45°或者是-45°,这个用CATransform3DRotate即可完成。

• 移动（关键）：

   1.旋转后，各个imageView都会变形并且都一样大小，只有位置不一样，我们要根据这个旋转后的imageView高度来进行移动。

   2.比如two要和one对接。根据动态图,one只有旋转，没有移动。而two则旋转和移动了。那么移动了多少呢。在没有折叠前，所有的imageView高度都是50px。也就是one和two总共加起来是100px。而折叠后。one和two都变小了。就是因为他们两个都变小了。所以中间就出现了缝隙，这个缝隙就是我们要移动的距离。而我们知道在二维空间中，总长度是100px,one,two的高度在旋转后是可以算出来的,也就是说缝隙的二维空间距离是:100-2*(one.frame.size.height)。,然后再经过CATransform3DMakeAffineTransform方法的转换得到真实地三维空间移动的距离。

实现

• 初始化4个小imageView(contentsRect的运用)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

- (void)configFourFoldImage {      UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(10, 100, 300, IMAGE_PER_HEIGIT*4)];      [self.view addSubview:bgView];            // 把kiluya这张图，分成平均分成4个部分的imageview      _one = [[UIImageView alloc] init];      _one.image = [UIImage imageNamed:@ "Kiluya.jpg" ];      _one.layer.contentsRect = CGRectMake(0, 0, 1, 0.25);      _one.layer.anchorPoint = CGPointMake(0.5, 0.0);      _one.frame = CGRectMake(0, 0, 300, IMAGE_PER_HEIGIT);            _two = [[UIImageView alloc] init];      _two.image = [UIImage imageNamed:@ "Kiluya.jpg" ];      _two.layer.contentsRect = CGRectMake(0, 0.25, 1, 0.25);      _two.layer.anchorPoint = CGPointMake(0.5, 1.0);      _two.frame = CGRectMake(0, IMAGE_PER_HEIGIT, 300, IMAGE_PER_HEIGIT);            _three = [[UIImageView alloc] init];      _three.image = [UIImage imageNamed:@ "Kiluya.jpg" ];      _three.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.25);      _three.layer.anchorPoint = CGPointMake(0.5, 0.0);      _three.frame = CGRectMake(0, IMAGE_PER_HEIGIT*2, 300, IMAGE_PER_HEIGIT);            _four = [[UIImageView alloc] init];      _four.image = [UIImage imageNamed:@ "Kiluya.jpg" ];      _four.layer.contentsRect = CGRectMake(0, 0.75, 1, 0.25);      _four.layer.anchorPoint = CGPointMake(0.5, 1.0);      _four.frame = CGRectMake(0, IMAGE_PER_HEIGIT*3, 300, IMAGE_PER_HEIGIT);            [bgView addSubview:_one];      [bgView addSubview:_two];      [bgView addSubview:_three];      [bgView addSubview:_four];            // 给第一张和第三张添加阴影      _oneShadowView = [[UIView alloc] initWithFrame:_one.bounds];      _oneShadowView.backgroundColor = [UIColor blackColor];      _oneShadowView.alpha = 0.0;            _threeShadowView = [[UIView alloc] initWithFrame:_three.bounds];      _threeShadowView.backgroundColor = [UIColor blackColor];            _threeShadowView.alpha = 0.0;      [_one addSubview:_oneShadowView];      [_three addSubview:_threeShadowView]; }

生成折叠动效需要的CATransform3D

1 2 3 4 5 6 7 8 9 10 11 12 13

- (CATransform3D)config3DTransformWithRotateAngle:(double)angle andPositionY:(double)y {      CATransform3D transform = CATransform3DIdentity;      // 立体      transform.m34 = -1/1000.0;      // 旋转      CATransform3D rotateTransform = CATransform3DRotate(transform, M_PI*angle/180, 1, 0, 0);      // 移动(这里的y坐标是平面移动的的距离,我们要把他转换成3D移动的距离.这是关键,没有它,图片就没办法很好地对接。)      CATransform3D moveTransform = CATransform3DMakeAffineTransform(CGAffineTransformMakeTranslation(0, y));      // 合并      CATransform3D concatTransform = CATransform3DConcat(rotateTransform, moveTransform);      return  concatTransform; }

• 折叠

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

// 动效是否执行中 static bool isFolding = NO;   - (IBAction)fold:(id)sender {      if (!isFolding)      {          isFolding = YES;                    [UIView animateWithDuration:1.0                                delay:0               usingSpringWithDamping:1.0                initialSpringVelocity:0                              options:UIViewAnimationOptionCurveLinear                           animations:^{                                         // 阴影显示              _oneShadowView.alpha = 0.2;              _threeShadowView.alpha = 0.2;                            // 折叠              _one.layer.transform = [self config3DTransformWithRotateAngle:-45.0                                                               andPositionY:0];              _two.layer.transform = [self config3DTransformWithRotateAngle:45.0                                                               andPositionY:-100+2*_one.frame.size.height];              _three.layer.transform = [self config3DTransformWithRotateAngle:-45.0                                                                 andPositionY:-100+2*_one.frame.size.height];              _four.layer.transform = [self config3DTransformWithRotateAngle:45.0                                                                andPositionY:-200+4*_one.frame.size.height];          } completion:^(BOOL finished) {              if (finished)              {                  isFolding = NO;              }          }];      } }

• 恢复

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

- (IBAction)reset:(id)sender {      isFolding = NO;      [UIView animateWithDuration:1.0                            delay:0           usingSpringWithDamping:1.0            initialSpringVelocity:0                          options:UIViewAnimationOptionCurveLinear                       animations:^{                                 // 阴影隐藏          _oneShadowView.alpha = 0.0;          _threeShadowView.alpha = 0.0;                    // 图片恢复原样          _one.layer.transform = CATransform3DIdentity;          _two.layer.transform = CATransform3DIdentity;          _three.layer.transform = CATransform3DIdentity;          _four.layer.transform = CATransform3DIdentity;                } completion:^(BOOL finished) {            }]; }

末

这里关键是缝隙的计算，这个想明白了。其他就没什么了。