学习ODRefreshControl

字数统计: 898阅读时长: 4 min

 2016/03/30   Share

ODRefreshControl是一个刷新的指示器,效果不错.

CGFloat verticalShift = MAX(0, -((kMaxTopRadius + kMaxBottomRadius + kMaxTopPadding + kMaxBottomPadding) + offset));
   CGFloat distance = MIN(kMaxDistance, fabs(verticalShift));
   CGFloat percentage = 1 - (distance / kMaxDistance);
   
   CGFloat currentTopPadding = lerp(kMinTopPadding, kMaxTopPadding, percentage);
   CGFloat currentTopRadius = lerp(kMinTopRadius, kMaxTopRadius, percentage);
   CGFloat currentBottomRadius = lerp(kMinBottomRadius, kMaxBottomRadius, percentage);
   CGFloat currentBottomPadding =  lerp(kMinBottomPadding, kMaxBottomPadding, percentage);
   
   CGPoint bottomOrigin = CGPointMake(floor(self.bounds.size.width / 2), self.bounds.size.height - currentBottomPadding -currentBottomRadius);
   CGPoint topOrigin = CGPointZero;
   if (distance == 0) {
       topOrigin = CGPointMake(floor(self.bounds.size.width / 2), bottomOrigin.y);
   } else {
       topOrigin = CGPointMake(floor(self.bounds.size.width / 2), self.bounds.size.height + offset + currentTopPadding + currentTopRadius);
       CGFloat height = self.bounds.size.height;
       if (percentage == 0) {
           bottomOrigin.y -= (fabs(verticalShift) - kMaxDistance);
           triggered = YES;
       }
   }

这部分计算了一些接下来用到的值.
currentTopPadding:图像离顶部的距离currentBottomRadius:图像离底部的距离
bottomOrigin:底部半圆的圆心
topOrigin:顶部半圆的圆心

//Top semicircle
    CGPathAddArc(path, NULL, topOrigin.x, topOrigin.y, currentTopRadius, 0, M_PI, YES);
    
    //Left curve
    CGPoint leftCp1 = CGPointMake(lerp((topOrigin.x - currentTopRadius), (bottomOrigin.x - currentBottomRadius), 0.1), lerp(topOrigin.y, bottomOrigin.y, 0.2));
    CGPoint leftCp2 = CGPointMake(lerp((topOrigin.x - currentTopRadius), (bottomOrigin.x - currentBottomRadius), 0.9), lerp(topOrigin.y, bottomOrigin.y, 0.2));
    CGPoint leftDestination = CGPointMake(bottomOrigin.x - currentBottomRadius, bottomOrigin.y);
    
    CGPathAddCurveToPoint(path, NULL, leftCp1.x, leftCp1.y, leftCp2.x, leftCp2.y, leftDestination.x, leftDestination.y);
    
    //Bottom semicircle
    CGPathAddArc(path, NULL, bottomOrigin.x, bottomOrigin.y, currentBottomRadius, M_PI, 0, YES);
    
    //Right curve
    CGPoint rightCp2 = CGPointMake(lerp((topOrigin.x + currentTopRadius), (bottomOrigin.x + currentBottomRadius), 0.1), lerp(topOrigin.y, bottomOrigin.y, 0.2));
    CGPoint rightCp1 = CGPointMake(lerp((topOrigin.x + currentTopRadius), (bottomOrigin.x + currentBottomRadius), 0.9), lerp(topOrigin.y, bottomOrigin.y, 0.2));
    CGPoint rightDestination = CGPointMake(topOrigin.x + currentTopRadius, topOrigin.y);
    
    CGPathAddCurveToPoint(path, NULL, rightCp1.x, rightCp1.y, rightCp2.x, rightCp2.y, rightDestination.x, rightDestination.y);
    CGPathCloseSubpath(path);

这部分是进行绘制的.先绘制顶部半圆,然后调用 CGPathAddCurveToPoint 方法,将曲线接到顶部半圆的终点,再绘制底部半圆,再用曲线将底部半圆的终点和顶部半圆的起点连接.
这里使用的 CGPathAddCurveToPoint 方法会将路径的当前点和由参数指定的目的点连接,其余两个参数作为控制点,控制曲线的弯曲程度.
CGPathAddArc 方法会绘制一部分圆弧,并且把路径的当前点移到圆弧的终点.

因为使用KVO观察了scrollView的contentOffset和contentInset的值,所以每当这两个值改变的时候-observeValueForKeyPath:ofObject:change:contex:这个方法就会被调用,这个方法里相应的绘制过程就会被执行.

CGFloat radius = lerp(kMinBottomRadius, kMaxBottomRadius, 0.2);
CABasicAnimation *pathMorph = [CABasicAnimation animationWithKeyPath:@"path"];
pathMorph.duration = 0.15;
pathMorph.fillMode = kCAFillModeForwards;
pathMorph.removedOnCompletion = NO;
CGMutablePathRef toPath = CGPathCreateMutable();
CGPathAddArc(toPath, NULL, topOrigin.x, topOrigin.y, radius, 0, M_PI, YES);
CGPathAddCurveToPoint(toPath, NULL, topOrigin.x - radius, topOrigin.y, topOrigin.x - radius, topOrigin.y, topOrigin.x - radius, topOrigin.y);
CGPathAddArc(toPath, NULL, topOrigin.x, topOrigin.y, radius, M_PI, 0, YES);
CGPathAddCurveToPoint(toPath, NULL, topOrigin.x + radius, topOrigin.y, topOrigin.x + radius, topOrigin.y, topOrigin.x + radius, topOrigin.y);
CGPathCloseSubpath(toPath);
pathMorph.toValue = (__bridge id)toPath;
[_shapeLayer addAnimation:pathMorph forKey:nil];
CABasicAnimation *shadowPathMorph = [CABasicAnimation animationWithKeyPath:@"shadowPath"];
shadowPathMorph.duration = 0.15;
shadowPathMorph.fillMode = kCAFillModeForwards;
shadowPathMorph.removedOnCompletion = NO;
shadowPathMorph.toValue = (__bridge id)toPath;
[_shapeLayer addAnimation:shadowPathMorph forKey:nil];
CGPathRelease(toPath);
CABasicAnimation *shapeAlphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
shapeAlphaAnimation.duration = 0.1;
shapeAlphaAnimation.beginTime = CACurrentMediaTime() + 0.1;
shapeAlphaAnimation.toValue = [NSNumber numberWithFloat:0];
shapeAlphaAnimation.fillMode = kCAFillModeForwards;
shapeAlphaAnimation.removedOnCompletion = NO;
[_shapeLayer addAnimation:shapeAlphaAnimation forKey:nil];
CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
alphaAnimation.duration = 0.1;
alphaAnimation.toValue = [NSNumber numberWithFloat:0];
alphaAnimation.fillMode = kCAFillModeForwards;
alphaAnimation.removedOnCompletion = NO;

这部分负责拉动到临界点然后图像消失的动画.
先创建一个 CABasicAnimation 类的对象,指定动画的类型.

1	CABasicAnimation *pathMorph = [CABasicAnimation animationWithKeyPath:@"path"];

然后设置动画

pathMorph.duration = 0.15;
pathMorph.fillMode = kCAFillModeForwards;
pathMorph.removedOnCompletion = NO;
CGMutablePathRef toPath = CGPathCreateMutable();
CGPathAddArc(toPath, NULL, topOrigin.x, topOrigin.y, radius, 0, M_PI, YES);
CGPathAddCurveToPoint(toPath, NULL, topOrigin.x - radius, topOrigin.y, topOrigin.x - radius, topOrigin.y, topOrigin.x - radius, topOrigin.y);
CGPathAddArc(toPath, NULL, topOrigin.x, topOrigin.y, radius, M_PI, 0, YES);
CGPathAddCurveToPoint(toPath, NULL, topOrigin.x + radius, topOrigin.y, topOrigin.x + radius, topOrigin.y, topOrigin.x + radius, topOrigin.y);
CGPathCloseSubpath(toPath);
pathMorph.toValue = (__bridge id)toPath;

再为指定的layer添加动画

1	[_shapeLayer addAnimation:pathMorph forKey:nil];

这样,就可以对其相应的属性添加动画效果.
为shapeLayer的shadowPath属性添加的效果亦同理.
如果要为透明的属性添加效果,那么就可以这样创建 CABasicAnimation :

1	CABasicAnimation *shapeAlphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];

Next Post

学习SDWebImage
Previous Post

使用AVCptureSession

CATALOG

