iOS swift：在旋转动画中间更改imageview图像 [英] iOS swift: change imageview image in the middle of rotation animation

问题描述

我有一本开场动画： https://streamable.com/n1c0n

我希望90度我的图像已经改变。

And I want to on 90 degrees my image has changed.

我使用此代码：

var book1ImageViewI : UIImageView
let book2ImageViewI : UIImageView

book1ImageViewI = UIImageView(frame: CGRect( x: self.view.frame.size.width / 2 - 140, 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))

book2ImageViewI = UIImageView(frame: CGRect(x: self.view.frame.size.width / 2 - 140, 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))


book1ImageViewI.image = UIImage(named:"attachment_83090027.jpg")
book2ImageViewI.image = UIImage(named:"0a6752b7cd35fc441c152238ee5078384d--antique-books-rabbit-hole.jpg")

book1ImageViewI.layer.anchorPoint = CGPoint(x: 0, y: 0.5)
book2ImageViewI.layer.anchorPoint = CGPoint(x: 0, y: 0.5)

var transform = CATransform3DIdentity
transform.m34 = 1.0 / -2000.0
book1ImageViewI.layer.transform = transform

UIView.animate(withDuration: 1.5, animations: {
    book1ImageViewI.layer.transform = CATransform3DRotate(transform, -.pi/2, 0, 1, 0)
})
{
    (bCompleted) in
    if (bCompleted) {
        book1ImageViewI.layer.transform = CATransform3DRotate(transform, -.pi/2, 0, 1, 0)
    }

    UIView.animate(withDuration: 1.5, animations: {
        book1ImageViewI.layer.transform = CATransform3DRotate(transform, .pi*0.999, 0, 1, 0)
        book1ImageViewI.image = UIImage(named:"0a6752b7cd35fc441c1528ee5078384d--antique-books-rabbit-holer.png")
        }, completion: {
            (bFinished) in
            //Whatever
    })
}

self.view.addSubview(book2ImageViewI)
self.view.addSubview(book1ImageViewI)

一切正常。但在90度动画上略有延迟。

Everything works fine. But on 90 degrees animation slightly delayed.

我希望毫不拖延地获得这样的动画： https：/ /streamable.com/q2bf6

I want to get animation like this without delay: https://streamable.com/q2bf6

怎么做？

PS在第二个动画中使用此代码：

P.S. In second animation use this code:

UIView.animate(withDuration: 3,  delay: 0.0,
                       options: [], animations: {

    DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
        book1ImageViewI.image = UIImage(named:"0a6752b7cd35fc441c1528ee5078384d--antique-books-rabbit-holer.png")
    }

    book1ImageViewI.layer.transform = CATransform3DRotate(transform, .pi, 0, 1, 0)

    self.view.layoutIfNeeded()

    }, completion: {_ in

})

但这段代码不合适。因为图像不会在90度变化。有时早点。有时候以后。

But this code does not fit. Because images changes not on 90 degrees. Sometimes earlier. Sometimes later.

推荐答案

显然，在涉及旋转变换的地方，锚点变化非常重要，而且并不简单。每次更改anchorpoint时，它都会改变UIView位置，我们必须以某种方式补偿这种变化。

Apparently, the anchor-point change was quite crucial wherever rotation transform is involved, and it is not straightforward. Every time you change anchorpoint, it alters the UIView position, and we must compensate for this change somehow.

这是使用 imageview <的最终版本/ code>对我来说不会中断。显然，它也适用于addKeyFrame API，但为了简单起见，我保留了 UIView.animate（）。

我使用的技巧是第一个动画的持续时间较短，第二个动画的持续时间较长。它几乎看起来像翻页。您还可以使用提供UIViewAnimationOptions的UIView.animate覆盖 - 例如curveEaseIn和curveEaseOut，使其看起来像书的翻页。

The trick I used is to have smaller duration for first animation and larger one for the second. It almost look like a page flip. You can also play with UIView.animate overrides that provide for UIViewAnimationOptions - such as curveEaseIn and curveEaseOut to make it look like page flip of a book.

它似乎适用于我，唯一的事情是你不能说它是从前面或后面旋转。如果你的 imageview 是倾斜的（比如你在视频中显示的倾斜书页），它应该是可见的，你可以通过改变<$ c中的 - 到+符号来纠正$ c> CATransform3DRotate 参数，反之亦然动画块。

It seems to work for me, the only thing is that you can't say it is rotating from the front or back. If your imageview is slant (like the slant book page you show in video), it should be visible and you can simply correct by changing the - to + sign within CATransform3DRotate arguments, or vice versa in animation block.

注意：

如果仍然玩捉迷藏，请尝试使用真实设备而不是模拟器以防万一。在动画方面，由于GPU执行存在明显的差异。

If it still plays hide and seek, try on real device instead of simulator just in case. There is apparent difference due to GPU execution when it comes to animations.

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
}

这篇关于iOS swift：在旋转动画中间更改imageview图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！