UIView动画在第一次尝试时不会执行动画

Question

我的问题是我的UIView动画只在第一次之后才能正常工作。我有两组不同的动画。第一组可以正确地工作，而第二组却有问题。第一组将4个按钮滑到屏幕上一个比我想要的位置更远的地方（这些位置我称为extendedState）。第二组动画将它们滑回到我想要的位置。这会给人一种反弹回正确位置的效果。

在两个动画之间，当第一组动画完成后，会有一个短暂的时间让按钮闪回它们的起始位置。通过将起始位置设置为extendedStates（它们停止动画时的位置），按钮似乎在动画之间没有移动（很好，这正是我想要的）。

操作顺序如下:

1. 我点击一个按钮，启动第一组动画（完全正常的工作）
2. 在animationDidStop块中，我启动第二组动画（这是第一次尝试不进行动画的动画）

以下是按钮处理程序的代码：

@IBAction func selectAnimal(sender: UIButton) {

    showButtons()
    bigCircle.enabled = false
    enableButtons()

    if(tapToSelectLabel.hidden) {
        animator.repositionButtonsToExtendedState(buttons) //sets the starting position to the extendedState so it appears not to move between animations
        animator.slideButtonsIntoScreen(buttons, delegate: self) //this is the first set of animations

    }

    if(sender.titleLabel != nil) {

        if(bigCircleLabel.text != "Choose an animal") {

            if let answer:String = bigCircleLabel.text {
                solution = game.checkAnswer(answer, question: game.threeQuestions[game.questionIndex])
            }

            showResponse()
        }
    }
}

现在这里是animationDidStop块内的代码。

let buttonRects:[CGRect] = [CGRectMake(834, 120, 175, 175),
                                        CGRectMake(631, 198, 175, 175),
                                        CGRectMake(470, 365, 175, 175),
                                        CGRectMake(386, 578, 175, 175)]

            UIView.animateWithDuration(0.35, delay: 0, options: [.BeginFromCurrentState, ], animations: {
                        self.buttons[3].frame = buttonRects[3]
                    }, completion: { (value:Bool) in
                        self.buttons[3].enabled = true

                        UIView.animateWithDuration(0.25, delay: 0, options: [ ], animations: {
                            self.buttons[2].frame = buttonRects[2]
                            }, completion: { (value:Bool) in
                                self.buttons[2].enabled = true

                                UIView.animateWithDuration(0.4, delay: 0, options: [ ], animations: {
                                    self.buttons[1].frame = buttonRects[1]
                                    }, completion: { (value:Bool) in
                                        self.buttons[1].enabled = true

                                        UIView.animateWithDuration(0.5, delay: 0, options: [ ], animations: {
                                            self.buttons[0].frame = buttonRects[0]
                                            }, completion: { (value:Bool) in
                                                self.buttons[0].enabled = true
                                        })
                                })
                        })
                    })

^ 这段代码将按钮向后滑动到我想要它们的位置。

这是我的动画类的代码

animator.slideButtonsIntoScreen

func slideButtonsIntoScreen(buttons:[UIButton], delegate:UIViewController) {

    let center = CGPoint(x:delegate.view.frame.width, y:delegate.view.frame.height)
    let startAngles:[CGFloat] = [0.405, 0.75, 1.1, 1.48]
    let endAngles:[CGFloat] = [1.95, 2.25, 2.622, 2.98]
    let radii:[CGFloat] = [555, 559, 558.5, 551]
    let durations:[Double] = [1.75, 1.5, 1.25 , 1]

    for index in 0...3 {
        let path = UIBezierPath(arcCenter: center, radius: radii[index], startAngle: -startAngles[index], endAngle: -endAngles[index], clockwise: false)
        let anim = CAKeyframeAnimation(keyPath: "position")
        anim.path = path.CGPath
        anim.rotationMode = kCAAlignmentNatural
        anim.repeatCount = 0
        anim.duration = durations[index] - 0.25
        anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
        anim.setValue("on", forKey: "type")
        anim.delegate = delegate
        buttons[index].layer.addAnimation(anim, forKey: "animate position along path"+String(index))
        anim.removedOnCompletion = true

    }

}

animator.repositionButtonsToExtendedState

func repositionButtonsToExtendedState(buttons:[UIButton]) {


    let buttonExtendedRects:[CGRect] = [CGRectMake(755, 155, 175, 175),
                                        CGRectMake(585, 245, 175, 175),
                                        CGRectMake(450, 405, 175, 175),
                                        CGRectMake(393, 590, 175, 175)]

    for index in 0...3 {
        buttons[index].frame = buttonExtendedRects[index]
    }
}

我设置了断点和打印语句，所以我确信它在第一次尝试时就到达了动画，但它并没有显示出来。在第一次之后，每次它都按照预期的方式工作。

- LuKenneth

---

你的代码看起来很混乱。请创建一个空项目，并添加一个最小、完整和可验证的示例来说明你的问题。 - JAL

如果您正在使用AutoLayout，则应该动画约束而不是框架。 - JLT

Answer 1

我使用了另一个UIBezierPath将按钮沿着同一圆形向后移动，而不是使用UIView.animate将按钮向后移回正确的位置。

这种解决方案避免了需要不断设置按钮框架的需要，我相信这是所有问题的根源 - 冲突的框架设置语句。

- LuKenneth

Answer 2

在使用自动布局时，通常不建议更改框架。从看起来的情况来看，您可以通过将对象设置为在完成后不重置到其原始位置，而不是将框架设置为动画停止的位置。

anim.fillMode = kCAFillModeForwards
anim.removedOnCompletion = false

但是请确保在添加动画之前放置这些代码行。

buttons[index].layer.addAnimation(anim, forKey: "animate position along path"+String(index))

为了避免在将按钮移回原位时重新设置框架，您应该执行基本相同的动画，但是不要删除HTML标记。

clockwise: false

将其设置为true。

clockwise: true

然后，您可以使用终点角度作为运动回退的新起始角度，并将运动回退的终点角度设置为需要按钮的位置。

- MichaelQ

---

是的，这基本上就是我解决问题的方法，感谢你的答案，对于有类似问题的人来说，这是一个很好的解释。 - LuKenneth

Answer 3

如果你只想让它们弹跳，你可以使用UIView.animateWithDuration(_,delay:_,usingSpringWithDamping:_,initialSpringVelocity:_,options:_,animations_,completed:_)。

但是你的代码中的问题在于只有你的根动画选项是正确的。只有第一个包含[.BeginFromCurrentState]，将该选项也赋予所有的动画。

此外，你也可以在这里使用延迟作为选项。不要将第二组动画放在第一组动画的完成块中，在delay之后开始它们。

- farzadshbfn