Swift animation chaining using CGAffineTransforms - swift

Question

I'm trying to create a background animation for my app. What I'm trying to achieve for part of it is:
1) An image (random colour / shape chosen from an array) appears randomly on the view. 2) It then grows in size rapidly (from not visible, to visible). 3) Then will slowly move in a given direction, while rotating, for 10ish seconds. 4) Then it will scale back down to a non-visible size and be removed from the view.
What I'm finding is that the shape will appear correctly in steps 1 and 2. Then, the shape will jump to a random position on the screen at the start of animation/step 3 (transition3 in the below code). While it moves, it also decreases in size. Then for step 4 it jumps back to it's original position in step 1 & 2, before shrinking off the screen as intended.
I cannot for the life of me work out what's going on here. I'm hoping I haven't missed something embarrassingly obvious.
Thanks in advance for any help!
class BackgroundAnimation {
func animation(animationView: UIView) {
let colourArray = [
UIColor(red:0.99, green:0.80, blue:0.05, alpha:1.0),
UIColor(red:0.06, green:0.22, blue:0.29, alpha:1.0),
UIColor(red:0.95, green:0.18, blue:0.30, alpha:1.0),
UIColor(red:0.35, green:0.77, blue:0.92, alpha:1.0),
UIColor(red:0.95, green:0.61, blue:0.19, alpha:1.0)
]
let imageArray = [
"Cross",
"Circle",
"Halfmoon",
"Square",
"Triangle"
]
//Animation constants
let initialDimensions = 10
let pathLength: CGFloat = 100
let pathDuration = 10
let scaleFactor: CGFloat = 5
let scaleDuration = 1
//Select the random image and random colour that is to be animated.
let image = UIImage(named: imageArray[Int.random(in: 0...imageArray.count - 1)])
let imageView = UIImageView(image: image)
imageView.image = imageView.image?.withRenderingMode(.alwaysTemplate)
imageView.tintColor = colourArray[Int.random(in: 0...colourArray.count - 1)]
imageView.contentMode = .scaleAspectFit
imageView.frame = CGRect(x: 0, y: 0, width: initialDimensions, height: initialDimensions)
animationView.insertSubview(imageView, at: 0)
//create a random start location and angle of direction
let startPointX = CGFloat.random(in: 0...animationView.frame.width)
let startPointY = CGFloat.random(in: 0...animationView.frame.height)
let pathAngle = CGFloat.random(in: 0...(CGFloat.pi * 2))
imageView.center = CGPoint(x: startPointX, y: startPointY)
//Calculate the endpoint from path angle and length
let translationX = pathLength * sin(pathAngle)
let tanslationY = -(pathLength * cos(pathAngle))
//Define the transitions for the aniamtion
var transition1 = CGAffineTransform.identity
transition1 = transition1.scaledBy(x: scaleFactor, y: scaleFactor)
var transition2 = CGAffineTransform.identity
transition2 = transition2.translatedBy(x: translationX, y: tanslationY)
transition2 = transition2.rotated(by: CGFloat.random(in: CGFloat.pi * 1/4 ... CGFloat.pi * 3/4))
var transition3 = CGAffineTransform.identity
transition3 = transition3.scaledBy(x: 0.001, y: 0.001)
UIView.animate(withDuration: TimeInterval(scaleDuration), delay: 0, options: .beginFromCurrentState, animations: {
imageView.transform = transition1
}, completion: {finished in
UIView.animate(withDuration: TimeInterval(pathDuration), delay: 0, options: .beginFromCurrentState, animations: {
imageView.transform = transition2
}, completion: { finished in
UIView.animate(withDuration: TimeInterval(scaleDuration), delay: 0, options: .beginFromCurrentState, animations: {
imageView.transform = transition3
}, completion: { finished in
imageView.removeFromSuperview()
})
})
})
}
}

Answer 1

change your position with imageView.center OR imageView.frame.origin
imageView.frame.origin = CGPoint(x: translationX, y: tanslationY)
but you should calculate the destination, then set frame.origin to the destination

Answer 2

In ref to Ehsan's helpful response:
This has fixed the movement issue, but the imageView is getting smaller when I try to apply the rotation in the second animation block. Updated code below:
class BackgroundAnimation {
func animation(animationView: UIView) {
let colourArray = [
UIColor(red:0.99, green:0.80, blue:0.05, alpha:1.0),
UIColor(red:0.06, green:0.22, blue:0.29, alpha:1.0),
UIColor(red:0.95, green:0.18, blue:0.30, alpha:1.0),
UIColor(red:0.35, green:0.77, blue:0.92, alpha:1.0),
UIColor(red:0.95, green:0.61, blue:0.19, alpha:1.0)
]
let imageArray = [
"Cross",
"Circle",
"Halfmoon",
"Square",
"Triangle"
]
//Animation constants
let initialDimensions = 10
let pathLength: CGFloat = 100
let pathDuration = 10
let scaleFactor: CGFloat = 3
let scaleDuration = 1
//Select the random image and random colour that is to be animated.
let image = UIImage(named: imageArray[Int.random(in: 0...imageArray.count - 1)])
let imageView = UIImageView(image: image)
imageView.image = imageView.image?.withRenderingMode(.alwaysTemplate)
imageView.tintColor = colourArray[Int.random(in: 0...colourArray.count - 1)]
imageView.contentMode = .scaleAspectFit
imageView.frame = CGRect(x: 0, y: 0, width: initialDimensions, height: initialDimensions)
animationView.insertSubview(imageView, at: 0)
//create a random start location and angle of direction
let startPointX = CGFloat.random(in: 0...animationView.frame.width * 0.9)
let startPointY = CGFloat.random(in: 0...animationView.frame.height * 0.9)
let pathAngle = CGFloat.random(in: 0...(CGFloat.pi * 2))
imageView.center = CGPoint(x: startPointX, y: startPointY)
//Calculate the endpoint from path angle and length
let translationX = pathLength * sin(pathAngle)
let translationY = (pathLength * cos(pathAngle))
let endPointX = startPointX + translationX
let endPointY = startPointY + translationY
//Define the transitions for the aniamtion
var transition1 = CGAffineTransform.identity
transition1 = transition1.scaledBy(x: scaleFactor, y: scaleFactor)
var transition2 = CGAffineTransform.identity
transition2 = transition2.rotated(by: CGFloat.random(in: CGFloat.pi * 1/4 ... CGFloat.pi * 3/4))
var transition3 = CGAffineTransform.identity
transition3 = transition3.scaledBy(x: 0.001, y: 0.001)
UIView.animate(withDuration: TimeInterval(scaleDuration), delay: 0, options: .beginFromCurrentState, animations: {
imageView.transform = transition1
}, completion: {finished in
UIView.animate(withDuration: TimeInterval(pathDuration), delay: 0.5, options: [.beginFromCurrentState, .curveLinear], animations: {
imageView.frame.origin = CGPoint(x: endPointX, y: endPointY)
imageView.transform = transition2
}, completion: { finished in
UIView.animate(withDuration: TimeInterval(scaleDuration), delay: 0.5, options: .beginFromCurrentState, animations: {
imageView.transform = transition3
}, completion: { finished in
imageView.removeFromSuperview()
})
})
})
}
}