Facebook图片快速缩放动画，图片未显示初始位置

Posted 2023-02-23

【中文标题】Facebook图片快速缩放动画，图片未显示初始位置

【英文标题】：Facebook Picture zoom animation in swift, picture not showing the initial position

【发布时间】：2017-12-02 11:01:40

【问题描述】：

我一直在尝试制作像 Facebook 一样的缩放动画，当您单击图片进入单元格以移动到屏幕中间时。动画有效，但由于我无法弄清楚的原因，它不是从初始位置开始，而是给了我另一帧。请帮忙，我已经为此苦苦挣扎了几天。

我正在使用带有 CustomCell 的 collectionView 以及它以编程方式完成的所有操作：

CenterVC中的函数：

//MARK: Function to animate Image View (it will animate to the middle of the View)
func animateImageView(statusImageView : UIImageView) 
    //Get access to a starting frame
    statusImageView.frame.origin.x = 0
    if let startingFrame = statusImageView.superview?.convert(statusImageView.frame, to: nil) 

        //Add the view from cell to the main view
        let zoomImageView = UIView()
        zoomImageView.backgroundColor = .red
        zoomImageView.frame = statusImageView.frame

        view.addSubview(zoomImageView)


        print("Starting frame is: \(startingFrame)")
        print("Image view frame is: \(statusImageView.frame)")

        UIView.animate(withDuration: 0.75, animations:  
            let height = (self.view.frame.width / startingFrame.width) * startingFrame.height
            let y = self.view.frame.height / 2 - (height / 2)

            zoomImageView.frame = CGRect(x: 0, y: y, width: self.view.frame.width, height: height)

        )
    

这是单元格内的图片视图和约束（这是我为视图设置图片的地方，我在 cellForRowAtIndexPath cell.centerVC = self 中使用）：

var centerVC : CenterVC?

func animate() 

    centerVC?.animateImageView(statusImageView: pictureView)


let pictureView : UIImageView = 
    let imageView = UIImageView()
    imageView.contentMode = .scaleAspectFill
    imageView.image = UIImage(named: "cat")
    imageView.backgroundColor = UIColor.clear
    imageView.layer.masksToBounds = true
    imageView.isUserInteractionEnabled = true
    imageView.translatesAutoresizingMaskIntoConstraints = false
    return imageView
()

addConstraintsWithFormat(format: "V:|-5-[v0(40)]-5-[v1]-5-[v2(200)]", views: profileImage, postTextView, pictureView)
    addConstraintsWithFormat(format: "H:|[v0]|", views: pictureView)

这是它在调试器中打印出来的内容：

    Starting frame is: (5.0, 547.5, 365.0, 200.0)
    Image view frame is: (0.0, 195.5, 365.0, 200.0)

您可以看到起始帧与图片的初始帧和位置不同。它没有离开初始位置的动画，它只是出现在顶部的某个位置并动画到中间。不知道怎么办，求指教。

【参考方案1】：

由于某种原因，它没有读取起始帧矩形，所以我制作了一个新的 CGRect 来获取原点并设置图片的大小：（它现在动画完美）

zoomImageView.frame = CGRect(origin: startingFrame.origin, size: CGSize(width: view.frame.width, height: statusImageView.frame.height))