苹果安装动画制作

使用方法

使图层覆盖在应用图标上方,大小为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 条评论
登录 后参与评论

相关文章

来自专栏IT大咖说

分享7款超赞的CSS3动画效果,值得你收藏!

今天与大家分享7款顶级的CSS3动画效果,包含了菜单特效、文字特效、图片特效等,另外还有几个表现非常特别的动画,个人觉得非常赞哦。

803
来自专栏Golang语言社区

前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

希望能对Canvas绘制出来的图像进行点击、拖拽等操作,因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏,我也没玩过。 Canvas在我的理解...

4537
来自专栏Youngxj

CSS打造的动感loading效果

1574
来自专栏全沾开发(huā)

background-clip的正确使用姿势

background-clip可以用来控制背景图片/颜色的填充范围。 我们知道,默认的background会填充盒模型的content+padding+bord...

3219
来自专栏Golang语言社区

前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

希望能对Canvas绘制出来的图像进行点击、拖拽等操作,因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏,我也没玩过。 Canvas在我的理解...

3018
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native布局详细指南

本文出自《React Native学习笔记》系列文章。 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox...

3504
来自专栏菩提树下的杨过

Flash/Flex学习笔记(40):弹性运动续--弹簧

上一篇里演示的弹性运动加上摩擦力因素后,物体最终基本上都会比较准确的停在目标位置。但是我们回想一下现实世界中的弹簧,如果把弹簧的一头固定起来(即相当于目标点),...

1865
来自专栏Youngxj

Canvas画板

2044
来自专栏偏前端工程师的驿站

CSS魔法堂:不得不说的Containing Block

前言 《CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins》中提到在没有floated兄弟盒子时,line box...

1989
来自专栏Android开发指南

9-path

2577

扫码关注云+社区