你如何创建一个翻转两个图像的 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

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

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)

请查看link

Answer 3

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

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

为此，我认为你会在核心动画级别上最开心。 （无论如何，您不能在 UIView 动画级别制作分组动画。）