如何创建一个翻转两个图像的 Swift 动画类

Question

我花了一天的时间试图构建一个我已经挣扎了数周的翻转动画类。

目标是：

首先快速重复翻转两个图像，然后放慢速度并停止，落在动画开始之前选择的两个图像之一上。

现在，两个图像都位于容器视图和情节提要中。我尝试使用transitionFromView transitionFlipFromTop，我认为这可以工作，但当时我无法让它重复。

我正在阅读视图编程指南，但很难将它和快速之间的点联系起来。一般来说，不熟悉编程是无济于事的。

这就是

我所处的位置：我现在使用CATransform将图像从零高度缩放到全高。我在想，如果我能以某种方式链接两个动画，第一个显示第一个图像放大，然后缩小到零，然后动画第二个图像做同样的事情，那应该给我第一部分。然后，如果我能以某种方式让这两个动画重复，一开始很快，然后放慢速度并停止。

似乎我需要知道如何嵌套多个动画，然后能够将动画曲线应用于嵌套的动画。

我计划通过两个嵌套动画来解决有关登陆特定图像的部分，其中一个具有奇数次翻转，另一个具有偶数次翻转。根据所需的最终图像，调用相应的动画。

现在，我当前的代码能够将图像从零重复缩放到完整，一定次数：

import UIKit
import QuartzCore
let FlipAnimatorStartTransform:CATransform3D = {
    let rotationDegrees: CGFloat = -15.0
    let rotationRadians: CGFloat = rotationDegrees * (CGFloat(M_PI)/180.0)
    let offset = CGPointMake(-20, -20)
    var startTransform = CATransform3DIdentity
    startTransform = CATransform3DScale(CATransform3DMakeRotation(0, 0, 0, 0),
        1, 0, 1);
    return startTransform
    }()
class FlipAnimator {
    class func animate(view: UIView) {
        let viewOne = view
        let viewTwo = view
        viewOne.layer.transform = FlipAnimatorStartTransform
        viewTwo.layer.transform = FlipAnimatorStartTransform
        UIView.animateWithDuration(0.5, delay: 0, options: .Repeat, {
            UIView.setAnimationRepeatCount(7)
            viewOne.layer.transform = CATransform3DIdentity
        },nil)
    }
}

我会继续削减它。任何帮助，想法，或关于更好方法的提示都会很棒。

谢谢。

Answer 1

我正在使用此功能水平旋转图像并在过渡期间更改图像。

private func flipImageView(imageView: UIImageView, toImage: UIImage, duration: NSTimeInterval, delay: NSTimeInterval = 0)
{
    let t = duration / 2
    UIView.animateWithDuration(t, delay: delay, options: .CurveEaseIn, animations: { () -> Void in
        // Rotate view by 90 degrees
        let p = CATransform3DMakeRotation(CGFloat(GLKMathDegreesToRadians(90)), 0.0, 1.0, 0.0)
        imageView.layer.transform = p
    }, completion: { (Bool) -> Void in
        // New image
        imageView.image = toImage
        // Rotate view to initial position
        // We have to start from 270 degrees otherwise the image will be flipped (mirrored) around Y axis
        let p = CATransform3DMakeRotation(CGFloat(GLKMathDegreesToRadians(270)), 0.0, 1.0, 0.0)
        imageView.layer.transform = p
        UIView.animateWithDuration(t, delay: 0, options: .CurveEaseOut, animations: { () -> Void in
            // Back to initial position
            let p = CATransform3DMakeRotation(CGFloat(GLKMathDegreesToRadians(0)), 0.0, 1.0, 0.0)
            imageView.layer.transform = p
        }, completion: { (Bool) -> Void in
        })
    })
}

不要忘记导入GLKit。

Answer 2

这个翻转动画 swift 代码看起来好不到哪里去：

        let transition = CATransition()
        transition.startProgress = 0;
        transition.endProgress = 1.0;
        transition.type = "flip";
        transition.subtype = "fromRight";
        transition.duration = 0.9;
        transition.repeatCount = 2;
        self.cardView.layer.addAnimation(transition, forKey: " ")

其他选择是

@IBOutlet weak var cardView: UIView!
var back: UIImageView!
var front: UIImageView!
self.front = UIImageView(image: UIImage(named: "heads.png"))
self.back = UIImageView(image: UIImage(named: "tails.png"))
self.cardView.addSubview(self.back)
UIView.transitionFromView(self.back, toView: self.front, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromRight , completion: nil)

请检查链接

Answer 3

似乎我需要知道如何嵌套多个动画，然后能够将动画曲线应用于嵌套的动画。

我不这么认为。我认为你不需要/不需要嵌套任何东西。您不是在这个故事中重复动画;您每次都执行不同的动画（因为持续时间不同）。这是一系列动画。所以我认为你需要知道的是如何做关键帧动画或分组动画。这样，您可以预定义一系列动画，每个动画都持续一定的预定义持续时间，每个动画在前面的持续时间结束后开始。

为此，我认为你会在核心动画级别上最快乐。（无论如何，您都无法在 UIView 动画级别制作分组动画。