Core Animation实例-图片折叠效果(CAGradientLayer渐变层)

本文介绍了如何使用Core Animation实现图片折叠效果,通过创建上下两部分的图片,利用CAGradientLayer渐变层为下部分添加阴影,并在手指拖动时动态调整旋转角度和阴影透明度。详细讲解了设置contentsRect、修改锚点、添加手势识别、实现立体效果以及设置渐变阴影的过程。最后,通过监听手势状态实现松手后的动画反弹效果。
摘要由CSDN通过智能技术生成

这里写图片描述

1.分析界面效果

当鼠标在图片上拖动的时候,图片有一个折叠的效果.
这种折叠效果其实就是图片的上半部分绕着X轴做一个旋转的操作.
我们图片的旋转都是绕着锚点进行旋转的.所以如果是一张图片的,办不到只上图片的上半部分进行一个旋转.
其实是两张图片, 把两张图片合成一张图片的方法,
实现方案.弄上下两张图片,上上部图片只显示上半部分, 下部图片只显示下半部分.
另外,在这里运用了CAGradientLayer渐变层

2.如果让一张图片只显示上半部分或者下半部分?

利用CALayer的一个属性contentsRect = CGRectMake(0, 0, 1, 0.5);
contentsRect就是要显示的范围.它是取值范围是(0~1);
想让上部图片只显示上半部分contentsRect设置CGRectMake(0, 0, 1, 0.5);
让下部图片只显示下半部分contentsRect设置为CGRectMake(0, 0.5, 1, 0.5)

3.让上部图片绕着锚点进行旋转,但是图片的默认锚点在中心,所以要把上部图片的锚点设在最底部.

修改上部分的锚点为anchorPoint = CGPointMake(0.5, 1)
但是修过锚点之后, 会出现一个问题,就是上部分的图片,会往上走.导致两个图片中间有一个空隙.
解决办法为.把两张图片放到一起.设置上部分图片的锚点后.上部分图片会上走一半的距离.
然后再设置下部图片的锚点.设置上图片的最上面设置下部图片锚点值为anchorPoint = CGPointMake(0.5, 0);
这样就能够办到两张图片合成一张的效果.

4. 给上部图片添加手势.根据手指向下拖动的距离.来计算旋转的角度.

拖动的时候,发现它的拖动范围为整个图片.所以添加手势的时候,不能只添加上部分或着下部分.
可以弄一个跟View相同大小的的View,把手势添加给这个UIView.
添加完手势时, 在手势方法当中去旋转上部分图片.
要來计算旋转的角度,上半部分旋转的角度是根据手指向上拖动的Y值来决定.当手指到最下部时正好旋转180度.
假设手指移动到最下部为200.那旋转角度应该为 angel = transP.Y * M_PI / 200.0;

5. 拖动的时候让它有一个立体产效果

立体的效果就是有一种近大远小的感觉.
想要设置立体效果.要修改它的TransForm当中的一个M34值,设置方式为
弄一个空的TransFrom3D
CATransform3D transform = CATransform3DIdentity;
200.0可以理解为,人的眼睛离手机屏幕的垂直距离,近大远小效果越明显
transform.m34 = - 1 / 200.0;
transform = CATransform3DRotate(transform, angle, 1, 0, 0);
相对上一次改了m34的形变,再去旋转
为什么不用Make,make会上m34清空,这个地方不能让m34清空

6. 给下部分图片添加阴影的效果.阴影是有渐变的效果.是从透明到黑色的一个渐变.

我们可以通过CAGradientLayer这个层来创建渐变.这个层我们就称它是一个渐变层.
渐变层也是需要添加到一个层上面才能够显示.
渐变层里面有一个colors属性.这个属性就是设置要渐变的颜色.它是一个数组.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值