変換を一度に適用するのではなく、段階的に適用すると、予期しない一貫性のない動作が見られます。その理由を知りたいです。
100右と下に変換してから、元のサイズの倍に50拡大したいラベルがあるとします。1.5したがって、次の 2 つの変換があります。
- 翻訳
- 規模
そして、2 つの異なるアニメーションを実験しているとします。
- 平行移動とスケーリングを並行して実行する
- 平行移動を実行してから、スケールを順番に実行します
最初のアニメーションでは、次のようなことができます:
UIView.animate(withDuration: 5, animations: {
label.transform = label.transform.translatedBy(x: 100, y: 50).scaledBy(x: 1.5, y: 1.5)
}, completion: nil)
そして、すべてが期待どおりに動作します。ラベルは、平行移動と拡大縮小を同時にスムーズに行います。
2 番目のアニメーション:
UIView.animate(withDuration: 5, animations: {
label.transform = label.transform.translatedBy(x: 100, y: 50)
}, completion: { _ in
UIView.animate(withDuration: 5, animations: {
label.transform = label.transform.scaledBy(x: 1.5, y: 1.5)
}, completion: nil)
})
ラベルは正しく変換され、その後ブームになり、予期せずジャンプしてからスケーリングを開始します。
予期しない突然のジャンプの原因は何ですか? 各変換 (並列化された変換と順次変換) の行列を調べると、予想どおり、値は同じです。
並列化されたアニメーション
transform before translate and scale: CGAffineTransform(a: 1.0, b: 0.0, c: 0.0, d: 1.0, tx: 0.0, ty: 0.0)
translate and scale transform: CGAffineTransform(a: 1.5, b: 0.0, c: 0.0, d: 1.5, tx: 100.0, ty: 50.0)
transform after translate and scale: CGAffineTransform(a: 1.5, b: 0.0, c: 0.0, d: 1.5, tx: 100.0, ty: 50.0)
シーケンシャル アニメーション
transform before translation: CGAffineTransform(a: 1.0, b: 0.0, c: 0.0, d: 1.0, tx: 0.0, ty: 0.0)
translation transform: CGAffineTransform(a: 1.0, b: 0.0, c: 0.0, d: 1.0, tx: 100.0, ty: 50.0)
transform after translation: CGAffineTransform(a: 1.0, b: 0.0, c: 0.0, d: 1.0, tx: 100.0, ty: 50.0)
transform before scale: CGAffineTransform(a: 1.0, b: 0.0, c: 0.0, d: 1.0, tx: 100.0, ty: 50.0)
scale transform: CGAffineTransform(a: 1.5, b: 0.0, c: 0.0, d: 1.5, tx: 100.0, ty: 50.0)
transform after scale: CGAffineTransform(a: 1.5, b: 0.0, c: 0.0, d: 1.5, tx: 100.0, ty: 50.0)
では、突然のジャンプの原因は何なのでしょうか?