Question

我想创建带有旋转图像的动画。我有两种代码变体。

第一

我想在此视频上创建动画：

https://yadi.sk/i/ek-3Pydc3ZfZFW-此动画适合我。

我使用以下代码创建动画：

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

我的图像应该像第一个视频一样呈90度变化。但是有时我的图像在90度之前或之后发生变化。就像这段视频一样：https://yadi.sk/i/MACrcIhM3ZfaKH

我还有第二种代码变体：

第二

但是此代码不适合我，因为图像会延迟90度旋转。

视频：https://yadi.sk/i/_gNG8FBA3ZfaUe

代码：

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
}

如何解决问题？

Answer 1

第二个是正确的想法，因为您将其分为两个阶段：打开90度，更改图像，然后其余部分将其打开。因此，我建议修复该问题。

延迟的原因仅仅是您没有更改计时功能，因此您获得了默认值：将EaseInOut设置为90度，然后将另一个EaseInOut从90度设置为180度。因此，我们减速到零，然后以90度重新开始。

只需为第一个动画提供EaseIn计时功能，并给第二个动画提供EaseOut计时功能，就应该全部设置好。

旋转图像动画

1 个答案: