🙎🏿个人喜欢,收藏iOS 技术iOS开发的那些事儿。。。

【图片折叠效果】 |那些人追的干货

2015-07-15  本文已影响6286人  袁峥

前言

此次文章,讲述的是Layer的一个属性contentsRect,利用它可以控制图层内容的展示,然后还有利用渐变层(CAGradientLayer)做阴影效果。

如果喜欢我的文章,可以关注我,随着后续不断学习Swift中,陆续还会有更新ing....

0.什么是折叠效果?

就是让一张图片的某一部分,沿着X轴或者Y轴旋转,不能拿着整张图片旋转,整张图片会一起旋转,就不会有折叠效果了。但是有个疑问,如何让一整张图片的部分旋转。

折叠.gif

1.如何制作图片折叠效果?

把一张图片分成两部分显示,上面一部分,下面一部分,折叠上面部分的内容。

2.如何把一张图片分成两部分显示。

搞两个控件,一个显示上半部分,一个显示下半部分,需要用到Layer(图层)的一个属性contentsRect,这个属性是可以控制图片显示的尺寸,可以让图片只显示上部分或者下部分,注意:取值范围是0~1.

CGRectMake(0, 0, 1, 0.5) : 表示显示上半部分

CGRectMake(0, 0.5, 1, 0.5) : 表示显示下半部分

Snip20150715_1.png

3.如何快速的把两部分拼接成一张完整的图片。

3.1 首先了解折叠,折叠其实就是旋转,既然需要旋转就需要明确锚点,因为默认都是绕着锚点旋转的。

3.2 上部分内容绕着底部中心旋转,所以设置上部分的锚点为(0.5,1)

3.3 锚点设置好了,就可以确定位置了,这里需要了解其实View的中心点就是layer的position,锚点是决定layer上的哪个点显示在position上

3.4 可以把上下部分重合在一起,然后分别设置上下部分的锚点,如图红色部分就是position点,上部分图层上的哪个点需要显示到这个位置,由锚点决定,上部分的锚点为(0.5,1),下部分的锚点为(0.5,0),就能快速重叠了。

Snip20150619_2.png

4.如何折叠上部分内容。

因为整个图片都需要拖动,因此可以创建一个透明的view放在上面,给他提供拖动手势,这样就造成整个图片都能拖动的假象。

在拖动视图的时候,旋转上部分控件。修改transform属性。

 // 获取手指偏移量
    CGPoint transP = [sender translationInView:_containV];

// 初始化形变
    CATransform3D transform3D = CATransform3DIdentity;

// 设置立体效果
    transform3D.m34 = -1 / 1000.0;

// 计算折叠角度,因为需要逆时针旋转,所以取反
    CGFloat angle = -transP.y / 200.0 * M_PI;

    _topView.layer.transform = CATransform3DRotate(transform3D, angle, 1, 0, 0);

// 设置M34就有立体感(近大远小)。 -1 / z ,z表示观察者在z轴上的值,z越小,看起来离我们越近,东西越大。
transform3D.m34 = -1 / 1000.0;

反弹效果

当手指抬起的时候,应该把折叠图片还原,其实就是把形变清空。

   if (sender.state == UIGestureRecognizerStateEnded) { // 手指抬起
        // 还原
        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:3 options:UIViewAnimationOptionCurveEaseInOut animations:^{

            _topView.layer.transform = CATransform3DIdentity;

        } completion:nil];
    }

阴影效果

当折叠图片的时候,底部应该有个阴影渐变过程。

// 创建渐变图层
CAGradientLayer *shadomLayer = [CAGradientLayer layer];

// 设置渐变颜色
    shadomLayer.colors = @[(id)[UIColor clearColor],(id)[[UIColor blackColor] CGColor]];

    shadomLayer.frame = _bottomView.bounds;

    _shadomLayer = shadomLayer;

// 设置不透明度 0
    shadomLayer.opacity = 0;

    [_bottomView.layer addSublayer:shadomLayer];

// 设置阴影不透明度
    _shadomLayer.opacity = transP.y * 1 /  200.0;

 if (sender.state == UIGestureRecognizerStateEnded) { // 手指抬起
        // 还原
        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:3 options:UIViewAnimationOptionCurveEaseInOut animations:^{

            _topView.layer.transform = CATransform3DIdentity;

            // 还原阴影
            _shadomLayer.opacity = 0;


        } completion:nil];
    }

联系方式

如果你喜欢这篇文章,可以继续关注我,微博:吖了个峥,欢迎交流。

上一篇 下一篇

猜你喜欢

热点阅读