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

Question

我花了一整天的时间来尝试构建一个翻转动画类，我已经努力了好几个星期。

我们的目标是：

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

现在，两个图像都在一个容器视图中，在一个故事板中。我试过使用transitionFromView transitionFlipFromTop，我认为它可以工作，但当时我无法让它重复使用。

我正在阅读View Programming Guide，但很难把它和swift之间的点联系起来。一般来说，不熟悉编程并不会有什么帮助。

这就是我所处的位置:我现在正在使用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

翻转动画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)

请查看link

Answer 2

我使用此函数来水平旋转图像，并在转换过程中更改图像。

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 3

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

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

对于这一点，我认为你会在核心动画级别上感到最高兴。(无论如何都不能在UIView动画级别创建分组动画。)