苹果安装动画制作

Demo

使用方法

使图层覆盖在应用图标上方，大小为app图标的bounds

-(ICSectorProgressView *)sectorView {
    if (!_sectorView) {
        _sectorView = [[ICSectorProgressView alloc] initWithFrame:self.appImageView.bounds];
        _sectorView.borderWidth = 20; //  默认为20
        [_sectorView beginSetDefault]; // 设置初始化值
        _sectorView.hidden = YES;// 默认隐藏    
    }
    return _sectorView;
}

与下载进度配合使用，定义进度属性

@interface ICSectorProgressView : UIView
@property(assign,nonatomic)CGFloat progress;

@property (nonatomic, assign)CGFloat borderWidth;

-(void)beginSetDefault;

@end

下载进度设置

weakSelf.sectorView.progress = weakSelf.progressView.progress;
weakSelf.sectorView.hidden = NO;

动画原理

1、加载进度动画

根据下载进度在UIView中画出中心区域扇形

- (void)drawRect:(CGRect)rect {
    //    定义扇形中心
    CGPoint origin = CGPointMake(rect.size.width / 2.0f, rect.size.height / 2.0f);
    //    定义扇形半径
    CGFloat radius = rect.size.width / 2.0f;
    //    设定扇形起点位置
    CGFloat startAngle = - M_PI_2 + self.progress * M_PI * 2;
    //    根据进度计算扇形结束位置
    CGFloat endAngle = M_PI *3.0/2.0;
    //    根据起始点、原点、半径绘制弧线
    UIBezierPath *sectorPath = [UIBezierPath bezierPathWithArcCenter:origin radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    //    从弧线结束为止绘制一条线段到圆心。这样系统会自动闭合图形，绘制一条从圆心到弧线起点的线段。
    [sectorPath addLineToPoint:origin];
    //    设置扇形的填充颜色
    [[UIColor blackColor] set];
    //    设置扇形的填充模式
    [sectorPath fill];
}

2、数据下载完成后外围灰边框动画

画出默认的边框，并加载到uiview的layer层

- (CAShapeLayer *)borderLayer {
    if (!_borderLayer) {
        _borderLayer = [CAShapeLayer layer];
        _borderLayer.fillColor = [UIColor colorWithWhite:0 alpha:0.5].CGColor;
        _borderLayer.path = [self maskPathWithDiameter:CGRectGetHeight(self.bounds) - self.borderWidth].CGPath;
        _borderLayer.fillRule = kCAFillRuleEvenOdd;
    }
    return _borderLayer;
}

添加一个过渡动画，让边框扩张到指定位置

- (CABasicAnimation *)expandAnimation {
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
    animation.toValue = (id)[self maskPathWithDiameter:CGRectGetHeight(self.bounds)].CGPath;
    animation.duration = 1.0;
    animation.delegate = self;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    return animation;
}

动画代理中该结束后，把该控件removeFromSuperview

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    if ([self.borderLayer animationForKey:@"expandAnimation"] == anim) {
        [self removeFromSuperview];
    }
}

iOS下载安装.gif

[图片上传中...(iOS下载安装.gif-36a500-1513129856054-0)]