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)
    }
}

我已修改了＃new; NewBounds＆＃39;使得矩形的最右边缘生根并将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")
}

将蒙版的大小更改为带动画的方向

2 个答案: