苹果安装动画制作

使用方法

使图层覆盖在应用图标上方,大小为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)]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2792
来自专栏魂祭心

原 canvas绘制clock

4164
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4868
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2655
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2587
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2182
来自专栏码匠的流水账

聊聊NettyConnector的start及shutdown

reactor-netty-0.7.6.RELEASE-sources.jar!/reactor/ipc/netty/NettyConnector.java

881
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2576
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2717

扫码关注云+社区