UIView 动画在第一次尝试时没有动画

Posted 2023-03-13

【中文标题】UIView 动画在第一次尝试时没有动画

【英文标题】：UIView animation doesn't animate on the first try

【发布时间】：2016-06-20 17:14:36

【问题描述】：

我的问题是我的 UIView 动画仅在第一次之后才有效。我有两组不同的动画。第一组工作正常，第二组给我带来了问题。第一组将 4 个按钮滑到比我想要的位置稍远的屏幕上。 （我将这些位置称为extendedState） 第二组动画将它们稍微滑回我想要的位置。这会产生弹回正确位置的效果。

在两个动画之间有短暂的一秒钟，一旦第一组动画完成，按钮就会闪回到它们的起始位置。通过将该起始位置设置为 extendedStates（它们停止动画时将处于的位置），按钮似乎不会在动画之间移动（这很好。这就是我想要的）。

以下是操作顺序：

我点击了一个按钮来启动第一组动画（效果很好） 在 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]
    

我设置了断点和打印语句，所以我知道它在第一次尝试时就到达了动画，只是没有显示动画。在第一次之后，它每次都可以正常工作。

【问题讨论】：

您的代码看起来到处都是。请创建一个空项目并添加您的问题的Minimal, Complete, and Verifiable example。

如果您使用的是 AutoLayout，那么您应该为约束设置动画而不是框架。

【参考方案1】：

我没有使用 UIView.animate 将按钮向后移动到正确的位置，而是使用另一个 UIBezierPath 将其沿同一个圆圈向后移动。

此解决方案避免了继续设置按钮框架的需要，我认为这是我所有问题的根源 - 冲突的框架设置语句。

【参考方案2】：

在使用自动布局时更改框架通常是不好的做法。从表面上看，与其将帧设置为动画停止的位置，不如将对象设置为在完成时不重置回其原始位置：

anim.fillMode = kCAFillModeForwards
anim.removedOnCompletion = false

但请务必在添加动画之前放置这些线条

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

为避免在您想将按钮移回时再次设置框架，您应该使用基本相同的动画，但不要使用

clockwise: false

设置为真

clockwise: true

然后，您可以从那里使用结束角度作为向后移动的新起始角度，并将移动的结束角度设置为您需要按钮所在的位置

【讨论】：

是的，这基本上就是我为解决我的问题所做的，感谢您的回答，这对任何有类似问题的人来说都是一个很好的解释

【参考方案3】：

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

但您的代码中的问题是只有您的根动画选项是正确的。只有第一个包含[.BeginFromCurrentState]，也为您的所有动画提供该选项。

此外，您也可以在此处使用延迟选项。不要将第二组动画放在第一个动画的完成块中，在delay 之后启动它们。