链接 UIView animation 与 CGAffineTransform scale & translate

Question

我正在尝试使用animate(withDuration:animations:)在 Playground 中为 UIView 设置动画。 目标是向下移动视图，然后向右移动，同时放大。

所以我分两步做，在第一个完成后调用第二个 animation。

这是我将应用于我的视图的 3 个转换

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

要做moveDown然后moveRight我将第二个连接到第一个。

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

`

---

现在，当我在向右移动时尝试放大视图时，似乎它正在将比例应用于已经转换的视图，这导致在第二个 animation 开始之前将所有内容向下移动（2 次）。

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

如何在不重置初始转换的情况下实现向右移动 + 放大？

Answer 1

我的解决方案更像是一个热修复，但它是你想要的：

1执行animation的下移变换

2还原以上变换（无动画）

3将circleView设置为 position 就像下移变换后一样（无动画）

4执行 animation 右移和放大

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
        })
    }

Answer 2

在应用它们的转换顺序中，我认为是因为您在转换之前应用了缩放，它采用了放大的值。

moveRight.concatenating(scaleUp)

可能工作正常。

Answer 3

我认为您的问题已经在这篇文章中得到解答。 有人说，为了实现您的目标（两个同时动画），您需要使用 CAAnimationand 和图层 addAnimation

我试过了，它有效

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")
}