苹果安装动画制作

使用方法

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

相关文章

来自专栏Android小菜鸡

CanvasAPI

892
来自专栏一“技”之长

iOS开发UIScrollView使用详解 原

@property(nonatomic)CGPoint contentOffset;

893
来自专栏一“技”之长

iOS开发UINavigation系列一——导航栏UINavigtionBar

        在iOS开发中,我们通常会使用导航控制器,导航控制器中封装了一个UINavigationBar,实际上,我们也可以在不使用导航控制器的前提下,单...

862
来自专栏娱乐心理测试

小程序的拖拽、缩放和旋转手势

1334
来自专栏Java技术分享圈

杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

        1.3 中间区域盒子中使用无序列表进行排放图片,并且每个图片可以作为一个链接进行点击

1252
来自专栏IMWeb前端团队

Canvas实现progress效果

据说本贵族圈每月不分享就邀请雪糕。。。所以分享下一个简单的Canvas插件   Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用j...

2187
来自专栏编码前线

ConstraintLayout(约束布局)的使用

这些属性会引用另一个控件的id或者parent(这会引用父容器,即ConstraintLayout)

1573
来自专栏Android知识点总结

Android关于Paint你所知道的和不知道的一切

1332
来自专栏听雨堂

表格效果2

//表格的属性 $("#tbl").attr("cellSpacing","1").attr("cellPadding","0"); $("#tbl").att...

2218
来自专栏ytkah

marquee一行代码实现滚动跑马灯效果无需js

  最近ytkah决定拓展一下业务,贴补一些家用,~(@^_^@)~,将以前做的网站建设案例展现出来,有这方面需求的朋友可以扫一下二维码加我哈,或者推荐朋友给我...

6285

扫码关注云+社区