0

We're trying to animate the switching of position of 2 imageview views along the z access. The 2 imageViews are the 2 at the to of the screenImage So far I've tried using a CAAnimationGroup for position and rotation but it's only show one of the images and it appears to position and rotation are off. This is what the code looks like:

 @IBOutlet weak var meMatchImageView: UIImageView!
  @IBOutlet weak var theyMatchImageView: UIImageView!

 override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(true)

    let groupAnimation = CAAnimationGroup()
    groupAnimation.beginTime = 0.0
    groupAnimation.duration = 1.5
    groupAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut
)
    groupAnimation.delegate = self


    let rotationAnimation = CAKeyframeAnimation(keyPath: "transform.rotation")
    rotationAnimation.values = [0, 0.14, 0]
    rotationAnimation.keyTimes = [0, 0.5, 0]

    let positionZAnimation = CABasicAnimation(keyPath: "position.z")
    positionZAnimation.fromValue = -1
    positionZAnimation.toValue = 1

    let point0 = NSValue(cgPoint: CGPoint(x: 0, y: 0))
    let point1 = NSValue(cgPoint: CGPoint(x: 110, y: -20))


    let positionAnimation = CAKeyframeAnimation(keyPath: "position")
    positionAnimation.values = [point0, point1, point0]
    positionAnimation.keyTimes = [0, 0.5, 0]

    groupAnimation.animations = [rotationAnimation, positionAnimation, positionZAnimation]

    meMatchImageView.layer.add(groupAnimation, forKey: "switch")
    theyMatchImageView.layer.add(groupAnimation, forKey: "switch")
  }

Any help will be greatly appreciated!

SwiftyJD
  • 5,257
  • 7
  • 41
  • 92

1 Answers1

0

There were at least two issues in your code.

First of all, you're applying the same animation (regarding position, rotation and position.z) on the two ImageView, as soon as the animation start, they'll perform exactly identical animations thus in the whole process they were completely stacked.

Second you're using the keyTimes attribute wrong, looks like your original design would be [0, 0.5, 1].

Cytus Chang
  • 367
  • 2
  • 11