下記の例は、先に画像を2倍に拡大して、次左に90度回転して、更に右に180度回転して、最後元に戻るアニメーションです。
let scaleTransform = CGAffineTransform(scaleX: 2, y: 2) let leftRotateTransform = scaleTransform.concatenating(CGAffineTransform(rotationAngle: -.pi / 2)) let rightRotateTransform = scaleTransform.concatenating(CGAffineTransform(rotationAngle: .pi / 2)) UIView.animateKeyframes(withDuration: 2, delay: 0, animations: { UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25) { imageView.transform = scaleTransform } UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) { imageView.transform = leftRotateTransform } UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) { imageView.transform = rightRotateTransform } UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) { imageView.transform = CGAffineTransform.identity } }
要注意のは、animateKeyframes
のwithDuration
は秒単位が、下のaddKeyframe
のwithRelativeStartTime
とrelativeDuration
はパーセンテージ単位。
例えばUIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25)
の意味は全体時間の50%の時点で、次25%の時間内動く。
そして二つのtransform同時に発生する時はconcatenating
で繋がる。