美文网首页ios动画专题
iOS实现网络图加载时候显示的圆形进度器

iOS实现网络图加载时候显示的圆形进度器

作者: MR小锦 | 来源:发表于2018-08-18 21:46 被阅读39次
demo.gif

这是该demo的效果图

接下来我来详细说明一下这个的实现思路。

  • 我是在这个UIImageView上加了一个CAShapeLayer,也就是CALayer的子类。
    //添加一层浅白色layer
    layer = [CAShapeLayer layer];
    //设置贝塞尔曲线
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50,50) radius:radius startAngle:0 endAngle:2*M_PI clockwise:YES];
    //设置layer属性
    layer.path = path.CGPath;
    layer.fillRule = kCAFillRuleEvenOdd;
    layer.fillMode = kCAFillModeForwards;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [[UIColor whiteColor] colorWithAlphaComponent:0.5f].CGColor;
    layer.lineWidth = radius*2;
    
    [imageView.layer addSublayer:layer];
  • 然后在- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event方法里面设置点击view后执行CABasicAnimation动画
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    anim.duration = 4.f;
    anim.fromValue = @0;
    anim.toValue = @1;
    [layer addAnimation:anim forKey:nil];
}
  • 实现代码就是以上这些。
最近一年比较颓废,没怎么更新简书。接下来我会每周写一篇文章,充实自己。希望读者能与我共同进步,交流指教。

相关文章

网友评论

    本文标题:iOS实现网络图加载时候显示的圆形进度器

    本文链接:https://www.haomeiwen.com/subject/ybhqiftx.html