斯威夫特:UIBezierPath笔触动画(来自中心) [英] Swift: UIBezierPath Stroke Animation from Center

问题描述

我一直在用Swift制作一个简单的 UIBezierPath 动画.该路径包括创建带有彩色边框的圆角矩形.动画必须是彩色边框的图形.为此，我创建了一个 CAShapeLayer 和一个 UIBezierPath(roundedRect :, cornerRadius:)

I've been making a simple UIBezierPath animation with Swift. This path consists on creating a rounded rectangle with a colored border. The animation must be the drawing of the colored border. To do so, I've created a CAShapeLayer with a UIBezierPath(roundedRect:, cornerRadius: )

let layer = CAShapeLayer()
var viewPrueba = UIView()

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    viewPrueba = UIView(frame: CGRectMake(self.view.frame.width/2-100, self.view.frame.height/2 - 100, 200, 200))
    self.view.addSubview(viewPrueba)
    let path = UIBezierPath(roundedRect: CGRectMake(0, 0, 200, 200), cornerRadius: 40.0)
    layer.path = path.CGPath
    layer.fillColor = UIColor.clearColor().CGColor
    layer.strokeColor = UIColor.blueColor().CGColor
    layer.strokeStart = 0.0
    layer.strokeEnd = 0.0
    layer.lineWidth = 4.0
    layer.lineJoin = kCALineJoinRound
    viewPrueba.layer.addSublayer(layer)
    let tapGR = UITapGestureRecognizer(target: self, action: #selector(ViewController.anim))
    self.view.addGestureRecognizer(tapGR)
}

func anim() {
    let anim1 = CABasicAnimation(keyPath: "strokeEnd")
    anim1.fromValue         = 0.0
    anim1.toValue           = 1.0
    anim1.duration          = 4.0
    anim1.repeatCount       = 0
    anim1.autoreverses      = false
    anim1.removedOnCompletion = false
    anim1.additive = true
    anim1.fillMode = kCAFillModeForwards
    self.layer.addAnimation(anim1, forKey: "strokeEnd")
}`

效果很好.唯一的问题是动画从正方形的左上角开始，而不是从顶部中央开始.我该怎么办?

It works well. The only problem is that the animation starts from the top-left part of the square and not from the top-center. How can I do that?

我发现要实现此目的的唯一方法是用圆形而不是矩形来实现，这不是我们想要的.

The only thing I've found in order to achieve this is by doing it with a circle and not a rectangle, which is not what we want.

谢谢

推荐答案

CoreAnimate以与绘制UIBezierPath相同的顺序进行动画处理.
系统方法

CoreAnimate animated as the same order as which the UIBezierPath was drawn.
The system method

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;     

返回从左上角绘制的UIBezierPath，因此动画从左上角开始.
但是您可以在顶部居中创建自己的UIBezierPath绘制表单:

return a UIBezierPath which was drawn from the top-left,so your animation started from the top-left.
But you can create your own UIBezierPath drawn form top-center:

func centerStartBezierPath(frame:CGRect,cornerRadius:CGFloat) -> UIBezierPath {
    let path = UIBezierPath()
    path.moveToPoint(CGPointMake(frame.width/2.0, 0))
    path.addLineToPoint(CGPointMake(frame.width-cornerRadius, 0))
    path.addArcWithCenter(CGPointMake(frame.width-cornerRadius, cornerRadius),
                          radius: cornerRadius,
                          startAngle: CGFloat(-M_PI/2),
                          endAngle: 0,
                          clockwise: true)
    path.addLineToPoint(CGPointMake(frame.width, frame.height-cornerRadius))
    path.addArcWithCenter(CGPointMake(frame.width-cornerRadius, frame.height-cornerRadius),
                          radius: cornerRadius,
                          startAngle: 0,
                          endAngle: CGFloat(M_PI/2),
                          clockwise: true)
    path.addLineToPoint(CGPointMake(cornerRadius, frame.height))
    path.addArcWithCenter(CGPointMake(cornerRadius, frame.height-cornerRadius),
                          radius: cornerRadius,
                          startAngle: CGFloat(M_PI/2),
                          endAngle: CGFloat(M_PI),
                          clockwise: true)
    path.addLineToPoint(CGPointMake(0, cornerRadius))
    path.addArcWithCenter(CGPointMake(cornerRadius, cornerRadius),
                          radius: cornerRadius,
                          startAngle: CGFloat(M_PI),
                          endAngle: CGFloat(M_PI*3/2),
                          clockwise: true)
    path.closePath()

    path.applyTransform(CGAffineTransformMakeTranslation(frame.origin.x, frame.origin.y))

    return path;
}    

它的工作原理如下:
您还可以更改代码，然后从任何位置开始.

And it works like this:
You can also change the code,and start from any point you want.

这篇关于斯威夫特:UIBezierPath笔触动画(来自中心)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！