Question

我一直在尝试创建一个模拟硬币翻转折腾的动画。这就是我目前正在使用的，但是每次动画执行之间都有一点延迟，我认为UIView.transition不是最好的方法。

var duration: CGFloat = 0.25
var imageIndex = 1
var repeatCount = 0

@objc func handleSpin()
{
    let options: UIViewAnimationOptions = .transitionFlipFromLeft

    UIView.transition(with: self.coinImageView, duration: TimeInterval(duration), options: options, animations: nil) { (completed) in

        if self.repeatCount == 10
        {
            self.duration = 0.25
            self.imageIndex = 1
            self.repeatCount = 0
            return
            //animation done
        }
        else
        {
            self.coinImageView.image = UIImage(named: self.imageNames[self.imageIndex])
            self.duration += 0.075
            self.repeatCount += 1
            self.imageIndex = self.imageIndex == self.imageNames.count - 1 ? 0 : self.imageIndex + 1
            self.handleSpin()
        }
    }

此函数调用自身10次，每次都会增加一点动画持续时间。但正如我所说的问题是每次执行之间都有一点延迟，我想解决。

我也尝试过使用CATransition，并将它添加到imageView的图层中，如下所示：

func flipAnimation()
{
    let animation = CATransition()
    animation.type = "flip"
    animation.startProgress = 0
    animation.endProgress = 0.5
    animation.subtype = "fromLeft"
    animation.duration = 0.5
    animation.repeatCount = 0

    self.layer.add(animation, forKey: "animation")
}

这里的问题是我不能让图像保持翻转，因为它在动画结束时恢复为默认值，此外我不知道如何跟踪动画何时完成。

还有第三种更好的方法吗？

编辑：我应该提一下，我也尝试过使用Spring库，但它与CATransition有同样的问题;当动画结束时，图像恢复到正常状态，我找不到任何阻止它的方法。

Answer 1

你可以试试动画关键帧，也许这会更好看：

extension UIView {
    func startAnimatingFlip(with duration: TimeInterval) {
        UIView.setAnimationCurve(.linear)
        UIView.animateKeyframes(withDuration: duration / 2, delay: 0, options: .beginFromCurrentState, animations: {
            UIView.setAnimationCurve(.linear)
            UIView.addKeyframe(withRelativeStartTime: duration / 2, relativeDuration: 0.5, animations: {
                self.transform = CGAffineTransform(scaleX: -1, y: 1)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5, animations: {
                 self.transform = CGAffineTransform(scaleX: 1, y: 1)
            })
        }) { _ in
            self.startAnimatingFlip(with: duration)
        }
    }
}

当然，您必须根据自己的需要进行调整。但就动画而言，关键帧之间似乎没有任何延迟。

如何制作连续翻转动画？

1 个答案: