Animation with rotating image - ios

Question

I want to create animation with a rotating image. I have two variants of code.
First
I want to create animation like on this video:
https://yadi.sk/i/ek-3Pydc3ZfZFW - this animation fits me.
I use this code to create animation:
func animation() {
self.book1ImageView = UIImageView(frame: CGRect(x: self.view.frame.size.width / 2 - 120, y: (self.view.frame.size.height / 2) - ( (self.view.frame.width / 2) / 2 ), width: ( (self.view.frame.width / 2) / 8) * 7, height: self.view.frame.width / 2))
self.book2ImageView = UIImageView(frame: CGRect(x: self.view.frame.size.width / 2 - 120, y: (self.view.frame.size.height / 2) - ( (self.view.frame.width / 2) / 2 ), width: ( (self.view.frame.width / 2) / 8) * 7, height: self.view.frame.width / 2))
book1ImageView.image = UIImage(named:"attachment_83090027.jpg")
book2ImageView.image = UIImage(named:"2.jpg")
book1ImageView?.layer.anchorPoint = CGPoint(x: 0, y: 0.5)
book2ImageView?.layer.anchorPoint = CGPoint(x: 0, y: 0.5)
var transform = CATransform3DIdentity
transform.m34 = 1.0 / -2000.0
book1ImageView?.layer.transform = transform
UIView.animate(withDuration: 3, delay: 0.0,
options: [], animations: {
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
self.book1ImageView.image = UIImage(named:"2.jpg")
}
self.book1ImageView.layer.transform = CATransform3DRotate(transform, .pi, 0, 1, 0)
self.view.layoutIfNeeded()
}, completion: {_ in
})
self.view.addSubview(self.book2ImageView)
self.view.addSubview(self.book1ImageView)
}
My image should changes in 90 degrees like in firs video. But sometimes my image changes before or after 90 degrees. like in this video: https://yadi.sk/i/MACrcIhM3ZfaKH
Also I have second variant of code:
Second
But this code not fits me because image rotating with delay on 90 degrees.
video: https://yadi.sk/i/_gNG8FBA3ZfaUe
code:
func pageFlipAnimation()
{
self.myImageView.image = UIImage.init(named: "firstImage")
var transform = CATransform3DIdentity
let transform1 = CATransform3DRotate(transform, -CGFloat(Double.pi)*0.5, 0, 1, 0)
let transform2 = CATransform3DRotate(transform, -CGFloat(Double.pi), 0, 1, 0)
transform.m34 = 1.0 / -5000.0
self.setAnchorPoint(anchorPoint: CGPoint(x: 0, y: 0.5), forView: self.myImageView)
UIView.animate(withDuration: 0.5, animations:
{
self.myImageView.layer.transform = transform1
})
{
(bFinished) in
self.myImageView.image = UIImage.init(named: "secondImage")
UIView.animate(withDuration: 0.75, animations:
{
self.myImageView.layer.transform = transform2
})
}
}
//This should ideally be a UIView Extension
func setAnchorPoint(anchorPoint: CGPoint, forView view: UIView)
{
var newPoint = CGPoint(x:view.bounds.size.width * anchorPoint.x, y:view.bounds.size.height * anchorPoint.y)
var oldPoint = CGPoint(x:view.bounds.size.width * view.layer.anchorPoint.x, y:view.bounds.size.height * view.layer.anchorPoint.y)
newPoint = newPoint.applying(view.transform)
oldPoint = oldPoint.applying(view.transform)
var position = view.layer.position
position.x -= oldPoint.x
position.x += newPoint.x
position.y -= oldPoint.y
position.y += newPoint.y
view.layer.position = position
view.layer.anchorPoint = anchorPoint
}
How to solve the problem?

Answer 1

The second one is the right idea, because you divide it into two stages: you open to 90 degrees, you change the image, and then you open it the rest of the way. So that is the one I would suggest fixing.
The reason for the delay is merely that you have not changed the timing function, so you get the default: an EaseInOut to 90 degrees and then another EaseInOut from 90 degrees to 180 degrees. Thus we slow down to zero and start up again at 90 degrees.
Just give the first animation an EaseIn timing function and give the second animation an EaseOut timing function and you should be all set.