Swift: change UIImageView image midway during animation

Question

I have this code to create animation imageView:

        imageView.layer.anchorPoint = CGPoint(x: 0, y: 0.5)

        var transform = CATransform3DIdentity
        transform.m34 = -0.001
        imageView.layer.transform = transform
        UIView.animate(withDuration: 3) {
            self.imageView.layer.transform = CATransform3DRotate(transform, .pi, 0, 1, 0)

            self.imageViewCenterConstraintX.constant = 0

            self.view.layoutIfNeeded()
        }

In this code imageView rotate with 180 degrees. I want to change image after imageView rotate with 90 degrees.

@AbhishekThapliyal And how do I write this in the code? How to let the device know that the imageView rotate with 90? I should write check? — , Jul 01 '18 at 12:08

Nirav Bhatt · Accepted Answer · 2018-07-01T17:59:12.270

1

You should chain the two animations, each rotating with pi/2.

imageView.layer.anchorPoint = CGPoint(x: 0, y: 0.5)

var transform = CATransform3DIdentity
transform.m34 = -0.001
imageView.layer.transform = transform
UIView.animate(withDuration: 1.0, animations: 
{
   self.imageView.layer.transform = CATransform3DRotate(transform, .pi/2, 0, 1, 0)
   self.imageViewCenterConstraintX.constant = 0  
 }) 
     { 
         (bCompleted) in
         if (bCompleted)
         {
            self.imageView?.layer.transform = CATransform3DRotate(transform, .pi/2, 0, 1, 0)
         }

         UIView.animate(withDuration: 1.0, animations: 
         {
              self.imageView.layer.transform = CATransform3DRotate(transform, .pi*0.999, 0, 1, 0)
              self.imageView.image = UIImage.init(named:"anotherImage")
         }, 
         completion: 
         { 
            (bFinished) in
            //Whatever
         })
  }

edited Jul 01 '18 at 17:59

answered Jul 01 '18 at 15:16

Nirav Bhatt

6,940
5
45
89

issue: Braces here form a trailing closure separated from its callee by multiple newlines – Jul 01 '18 at 17:04
Edited. It's just a warning, should not restrict you from trying it. Did it work? – Nirav Bhatt Jul 01 '18 at 17:13
No. imageView rotate only 90 degrees. – Jul 01 '18 at 17:19
Edited. Can you try now? – Nirav Bhatt Jul 01 '18 at 17:24
OK, I have changed second animation transform from .pi/2 to .pi. (Basically, we are applying rotation on identity transform.) Try now? – Nirav Bhatt Jul 01 '18 at 17:34
It is works. But I have two problem 1. imageView rotates to the other side. 2. There is a delay after turning on 90 degrees and following animation. – Jul 01 '18 at 17:49
Edited second animation. For delay, you may consider using key-frame animation - https://developer.apple.com/documentation/uikit/uiview/1622554-addkeyframe - it requires separate discussion altogether. – Nirav Bhatt Jul 01 '18 at 18:00
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174125/discussion-between-nirav-bhatt-and-111). – Nirav Bhatt Jul 01 '18 at 18:16
Rotation have smal delay after 90 degrees. How to fix it? I want to create animation on 180 degrees without delay like. Also I can not access the messages in the chat. – Jul 14 '18 at 13:03
I suggested you to check keyframe animation. That could resolve the problem. Though it is out of scope for this question. – Nirav Bhatt Jul 16 '18 at 06:47
https://stackoverflow.com/questions/51357698/swift-change-image-animation – Jul 16 '18 at 08:36

score 0 · Answer 2 · answered Jul 01 '18 at 10:40

0

Use the one below. Use code to change image in the completion handler field.

UIView Animation with completion

answered Jul 01 '18 at 10:40

Saifur Rahman Sany

72
8

score 0 · Answer 3 · answered Jul 01 '18 at 15:03

0

You could use DispatchQueue.main.asyncAfter.

    UIView.animate(withDuration: 3) {
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
            // Change your image here
        }
        self.imageView.layer.transform = CATransform3DRotate(transform, .pi, 0, 1, 0)

        self.imageViewCenterConstraintX.constant = 0

        self.view.layoutIfNeeded()
    }

answered Jul 01 '18 at 15:03

ODev99

34
3

In this case my image not always change on 90 degrees. Sometimes image change after 90 degrees. – Jul 14 '18 at 12:37

Swift: change UIImageView image midway during animation

3 Answers3