如何自定义矩形进度条?

Posted

技术标签:

【中文标题】如何自定义矩形进度条?【英文标题】:How to custom rectangle progress bar? 【发布时间】:2013-04-01 10:14:51 【问题描述】:

我想自定义一个带有 UIKIT 的矩形进度条,就像被吸引的图像一样。有没有源代码? Cocos2d 与 CCProgressTimer 有相同的,但我找不到任何 UIKIT 源代码。

【问题讨论】:

嘿 Toandk,你不应该回答这个问题吗?你说它有效;将其标记为已回答将避免其他人查看该问题并给予 Dipen 他应得的荣誉 【参考方案1】:

创建一个 ShapedLayer

CAShapeLayer *layer = [CAShapeLayer layer];
[layer setStrokeColor:[UIColor greenColor].CGColor];
[layer setLineWidth:10.0f];

[layer setFillColor:[UIColor clearColor].CGColor];

在你想要动画的地方创建一个带有radious的矩形

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 300, 200) cornerRadius:10.0f];
layer.path = path.CGPath;

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat:1.0f];

定义动画持续时间

animation.duration = 4.0f;
[layer addAnimation:animation forKey:@"myStroke"];

将动画添加到要显示的图层

[self.view.layer addSublayer:layer];

【讨论】:

感谢您的代码。有效。但是如何将路径的起点设置在顶部中间?我不擅长 CAAnimation @SukhmeetHora 在这里也一样。你找到解决方案了吗? 我也需要相同的以及如何更改起点和终点..! 可以从每个角落开始使用 CATransform3DMakeRotation 旋转图层。【参考方案2】:

SWIFT 5 版本

    func animation() 
    CATransaction.begin()
    
    let layer : CAShapeLayer = CAShapeLayer()
    layer.strokeColor = UIColor.white.cgColor
    layer.lineWidth = 3.0
    layer.fillColor = UIColor.clear.cgColor
    
    let path : UIBezierPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 84, height: 30), byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 5.0, height: 0.0))
    layer.path = path.cgPath
    
    let animation : CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0.0
    animation.toValue = 1.0
    
    animation.duration = 4.0
    
    CATransaction.setCompletionBlock [weak self] in
        if self!.isAdvClick == false 
            self!.navigationController?.popViewController(animated: false)
        
    
    
    layer.add(animation, forKey: "myStroke")
    CATransaction.commit()
    self.btnSkip.layer.addSublayer(layer)

这是 swift 2.0 中 UIButton 边框动画的代码

func animation()
        CATransaction.begin()
        
        let layer : CAShapeLayer = CAShapeLayer()
        layer.strokeColor = UIColor.whiteColor().CGColor
        layer.lineWidth = 3.0
        layer.fillColor = UIColor.clearColor().CGColor
        
        let path : UIBezierPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 84, height: 30), byRoundingCorners: .AllCorners, cornerRadii: CGSize(width: 5.0, height: 0.0))
        layer.path = path.CGPath
        
        let animation : CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0.0
        animation.toValue = 1.0
        
        animation.duration = 4.0
        
        CATransaction.setCompletionBlock [weak self] in
            if self!.isAdvClick == false 
                self!.navController?.popViewControllerAnimated(false)
            
        
        
        layer.addAnimation(animation, forKey: "myStroke")
        CATransaction.commit()
        self.btnSkip.layer.addSublayer(layer)
    

你可以看看穿上这个Link

【讨论】:

以上是关于如何自定义矩形进度条?的主要内容,如果未能解决你的问题,请参考以下文章

Android自定义圆角矩形进度条2

自定义进度栏的操作方法

如何制作WinForm中自定义进度条

C# WinForm自定义进度条

CSS实现不规则自定义进度条效果

Android 自定义View——动态进度条