此次是通过CALayer和CoreGraphics结合实现了QQ消息列表中滑动使数字消失的动画。在滑动的过程中,中间会逐渐变瘦。效果如下图:
实现思路
思路是通过两个圆加一个自己绘制的图形三部分组成,并且是在理想条件下的动画,然后再进行坐标的微调。
所谓的理想条件如下图1:两个圆大小是一样,同时AB和CD是平行的,AC和BD是两个圆的切线。
CGFloat maxOffx = r1;
CGFloat maxOffy = r1;
CGFloat maxD = 8*r1;//滑动最大距离
CGFloat factor = MIN(maxD, d)/maxD;//这个factor就是需要便宜的百分比
这时候我们可以算出O、P偏移之后的坐标
pointOffO = CGPointMake(pointO.x+maxOffx*factor, pointO.y+maxOffy*factor);
pointOffP = CGPointMake(pointP.x-maxOffx*factor, pointP.y-maxOffy*factor);
由于我们滑动过程中会分为四个方向,所以会做如下处理:
UIBezierPath *ovalPath = [UIBezierPath bezierPath];
[ovalPath moveToPoint:pointA];
CGPoint pointOffO;
CGPoint pointOffP;
if(x1>x2&&y1>y2){
pointOffO = CGPointMake(pointO.x+maxOffx*factor, pointO.y-maxOffy*factor);
pointOffP = CGPointMake(pointP.x-maxOffx*factor, pointP.y+maxOffy*factor);
}else if (x1<x2&&y2<y1){
pointOffO = CGPointMake(pointO.x+maxOffx*factor, pointO.y+maxOffy*factor);
pointOffP = CGPointMake(pointP.x-maxOffx*factor, pointP.y-maxOffy*factor);
}else if (x1>x2&&y1<y2) {
pointOffO = CGPointMake(pointO.x-maxOffx*factor, pointO.y-maxOffy*factor);
pointOffP = CGPointMake(pointP.x+maxOffx*factor, pointP.y+maxOffy*factor);
}else{
pointOffO = CGPointMake(pointO.x-maxOffx*factor, pointO.y+maxOffy*factor);
pointOffP = CGPointMake(pointP.x+maxOffx*factor, pointP.y-maxOffy*factor);
}