Chaining UIView animation with CGAffineTransform scale & translate

Question

I am trying to animate a UIView in a Playground using animate(withDuration:animations:). The goal is to move a view down, then move it right while also scale it up.

So I am doing it in 2 steps, calling a second animation after the first one is completed.

Here are 3 transformations I am going to apply to my view

let scaleUp = CGAffineTransform(scaleX: 2, y: 2)
let moveDown = CGAffineTransform(translationX: 0, y: 100)
let moveRight = CGAffineTransform(translationX: 100, y: 0)

To do moveDown followed by moveRight I concatenate the second one to the first one.

UIView.animate(withDuration: 2, animations: {
            circleView.transform = moveDown
        }) { _ in
            //First animation completed
            UIView.animate(withDuration: 4, animations: {
                circleView.transform = moveDown.concatenating(moveRight)
            })
        }

`

Now, when I am trying to scale the view up while moving to the right, it seems like it is applying scale to already transformed view, which results in shifting everything down (2 times) before the second animation starts.

UIView.animate(withDuration: 2, animations: {
            circleView.transform = moveDown
        }) { _ in
            //First animation completed
            UIView.animate(withDuration: 2, animations: {
                circleView.transform = moveDown.concatenating(scaleUp.concatenating(moveRight))
            })
        }

How can I achieve move right + scale up without reseting my initial transformation?

score 3 · Accepted Answer · answered Sep 19 '19 at 19:38

My solution is more like a hot fix but it's what you want:

1 perform animation of move down transformation

2 revert above transformation (without animation)

3 set circleView to position like after move down transformation (without animation)

4 perform animation of move right and scale up

UIView.animate(withDuration: 2, animations: {
        circleView.transform = moveDown //1
    }) { _ in
        //First animation completed
        circleView.transform = .identity //2
        circleView.frame.origin.y += 100 //3
        UIView.animate(withDuration: 2, animations: {
            circleView.transform = moveRight.concatenating(scaleUp) //4
        })
    }

Thanks, this works. Didn't want to bother with chaining multiple CABasicAnimation — Alexei, Sep 19 '19 at 19:49

score 0 · Answer 2 · answered Sep 19 '19 at 17:51

0

In transforms order in which they are applied matters, what I think is because you are applying scaling before translation it is taking the scaled up value.

moveRight.concatenating(scaleUp)

might work fine.

answered Sep 19 '19 at 17:51

Shreeram Bhat

2,849
2
11
19

I tried it as well, it moves 2x right while also pushes down before translation – Alexei Sep 19 '19 at 18:13

Mike · Answer 3 · 2019-09-19T19:38:03.463

I think your problem was already answered in this post. Is was said, that in order to achieve your goal (two simultaneous animations) you need to use CAAnimationand and layer addAnimation

I tried this and it works

let scaleAA = CABasicAnimation(keyPath: "transform.scale")
scaleAA.fromValue = 1
scaleAA.byValue = 2
scaleAA.duration = 1
scaleAA.timingFunction = CAMediaTimingFunction.init(name: .easeOut)

let scaleXX = CABasicAnimation(keyPath: "position.x")
scaleXX.fromValue = 0
scaleXX.byValue = 20
scaleXX.duration = 1
scaleXX.timingFunction = CAMediaTimingFunction.init(name: .easeOut)

UIView.animate(withDuration: 1, animations: {
    v1.transform = moveDown
}) { _ in
    //First animation completed
    v1.layer.add(scaleAA, forKey: "scale")
    v1.layer.add(scaleXX, forKey: "xxxx")
}

Chaining UIView animation with CGAffineTransform scale & translate

3 Answers3