使用动画将蒙版的大小更改为一个方向

Question

我想用动画扩展蒙版的宽度。

这是我的代码：

func addPointsToProgressBar(points : CGFloat) {
    let oldBounds = CGRect(x: 0, y: 0, width: progressBarFillImage.layer.mask.frame.width, height: 50)
    let maskWidth = Int(Float(progressBarFillImage.frame.width) * levelProgress())
    let newBounds = CGRect(x: 0, y: 0, width: maskWidth, height: 50)

    var animation : CABasicAnimation = CABasicAnimation(keyPath: "bounds")
    animation.fromValue = NSValue(CGRect: oldBounds)
    animation.toValue = NSValue(CGRect: newBounds)
    animation.duration = 2.0

    progressBarFillImage.layer.mask.frame = newBounds
    progressBarFillImage.layer.mask.addAnimation(animation, forKey: "expandWidth")
}

动画正在运行，并且遮罩均匀地向左右方向扩展。 问题是我希望它从右向左扩展（这是一个进度条加载器）。

我该怎么做？

Answer 1

要从右到左制作动画，您可以沿负x方向应用变换，也可以按照如下所示对当前代码进行一些细微修改

func addPointsToProgressBar(points : CGFloat) {

    var oldBounds = progressBarFillImage.layer.mask.frame
    let maskWidth = CGFloat(Float(progressBarFillImage.frame.width) * levelProgress())
    let extended = maskWidth - progressBarFillImage.layer.mask.frame.size.width
    let newX = oldBounds.origin.x - extended;
    let newBounds = CGRect(x: newX, y: 0, width: maskWidth + extended, height: 50)

    var animation : CABasicAnimation = CABasicAnimation(keyPath: "bounds")
    animation.fromValue = NSValue(CGRect: oldBounds)
    animation.toValue = NSValue(CGRect: newBounds)
    animation.duration = 2.0
    animation.delegate = self
    animation.setValue("progressAnimation", forKey: "id")
    animation.setValue(maskWidth, forKey: "originalMaskWidth")

    progressBarFillImage.layer.mask.frame = newBounds
    progressBarFillImage.layer.mask.addAnimation(animation, forKey: "expandWidth")
}

override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {
    if (anim.valueForKey("id") as! String) == "progressAnimation" {
        progressBarFillImage.layer.mask.frame = CGRect(x: 0, y: 0, width: (anim.valueForKey("originalMaskWidth") as! CGFloat), height: 50)
    }
}

我已经修改了“ newBounds”，使rect的最右边缘扎根，并将x位置向左移动到增加的进度。

Answer 2

要实现进度视图类型的动画，您要做的是增加蒙版的宽度，然后移动其x，这将是增加的宽度的一半。 看到这个作为例子

UIView.animateWithDuration(1.0, delay: 0.6, options:
UIViewAnimationOptions.Repeat | UIViewAnimationOptions.Autoreverse | UIViewAnimationOptions.AllowUserInteraction, animations: {

    println("Animation function animateStuff() started!")
    var frmPlay : CGRect = self.buttonPlay.frame

    let originXbutton = frmPlay.origin.x
    let originYbutton = frmPlay.origin.y

    let originWidthbutton = frmPlay.size.width
    let originHeightbutton = frmPlay.size.height

    self.buttonPlay.frame = frmPlay

    self.buttonPlay.frame = CGRectMake(
        originXbutton - 50,
        originYbutton,
        originWidthbutton+100,
        originHeightbutton)

    }, completion: { finished in

})

或者您可以修改核心，只是减小newBounds的X坐标

func addPointsToProgressBar(points : CGFloat) {
    let oldBounds = CGRect(x: 0, y: 0, width: progressBarFillImage.layer.mask.frame.width, height: 50)
    let maskWidth = Int(Float(progressBarFillImage.frame.width) * levelProgress())
    let increasedWidth = maskWidth - progressBarFillImage.layer.mask.frame.width
    let xShiftedTo = oldBounds - increasedWidth
    let newBounds = CGRect(x: xShiftedTo, y: 0, width: maskWidth, height: 50)

    var animation : CABasicAnimation = CABasicAnimation(keyPath: "bounds")
    animation.fromValue = NSValue(CGRect: oldBounds)
    animation.toValue = NSValue(CGRect: newBounds)
    animation.duration = 2.0

    progressBarFillImage.layer.mask.frame = newBounds
    progressBarFillImage.layer.mask.addAnimation(animation, forKey: "expandWidth")
}