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

时间:2014-11-27 15:47:45

标签: ios animation swift

我正在花费我的土耳其日试图构建一个我几周来一直在努力的翻转动画课程。

目标是:

首先快速翻转两张图像,然后减速并停止,降落到动画开始前选择的两张图像之一。

现在,两个图像都位于容器视图中,位于故事板中。我曾尝试使用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)
    }
}

我会继续嘲笑它。任何有关更好的方法的帮助,想法或提示都会令人惊讶。

感谢。

3 个答案:

答案 0 :(得分:1)

这个翻转动画快速代码看起来好一点:

        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

答案 1 :(得分:0)

  

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

我不这么认为。我不认为你想要/需要嵌套任何东西。你不是在这个故事中重复动画;你每次都在做不同的动画(因为持续时间不同)。这是一系列动画。所以我认为你需要知道的是如何做一个 keyframe 动画或一个分组动画。通过这种方式,您可以预定义一系列动画,每个动画持续一定的预定义持续时间,每个动画都在前一个持续时间结束后开始。

为此,我认为你在核心动画层面上最开心。 (无论如何,您无法在UIView动画级别制作分组动画。)

答案 2 :(得分:0)

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

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。