如何在 UITableView 滚动时缩小 UIImageView 内容（图像）？答案

【问题标题】：How to zoom out UIImageView content(image) on scroll of UITableView?如何在 UITableView 滚动时缩小 UIImageView 内容（图像）？
【发布时间】：2018-01-22 10:38:15
【问题描述】：

我正在努力实现这个效果：

https://cdn.dribbble.com/users/124059/screenshots/3727352/400.gif

为此我正在做：

override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    let cell = tableView.dequeueReusableCell(withIdentifier: "CardCell", for: indexPath) as! CardTableViewCell

    UIView.animate(withDuration: 0.5, delay: 0.3, usingSpringWithDamping: 0.1, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
        cell.coverImageView.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
    }, completion: nil)
}

但此代码调整 UIImageView 框架的大小，而不是 UIImageView 内部的图像。

如何改进我的代码？

【问题讨论】：

您需要一个持有它的视图来剪辑/屏蔽 imageView。然后将变换设置为 cell.coverImageView.transform = CGAffineTransform(scaleX: 1.5, y:1.5) 并在动画中执行 cell.coverImageView.transform = .identity
你可能会在 willDisplayCell 中放大它，但你可能必须检查它是否在 scrollviewDidScrolll 的屏幕上才能调用动画
@agibson007 谢谢！但是我怎样才能将let cell = tableView.dequeueReusableCell(withIdentifier: "CardCell", for: indexPath) as! CardTableViewCell 部分与didScroll 部分结合起来呢？我现在如何从哪个 indexPath.row 缩小哪个图像？
你必须抓取所有可见的单元格并找到视图中心的那个
@agibson007 我再次得到 UIImageView 框架的转换，而不是 UIImage =/

标签： ios iphone uitableview animation uiimageview

【解决方案1】：

诀窍是弄乱 imageView 的框架，使其重绘并看起来内容模式正在改变。您可以通过操作框架或约束来执行此操作，并将其隐藏在另一个视图中。运行示例并告诉我。

import UIKit

class ViewController: UIViewController {

    var imageView = UIImageView()
    var maskView = UIView()
    var frame : CGRect = .zero

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        view.layoutIfNeeded()
        imageView = UIImageView(frame: CGRect(x: 20, y: 40, width: view.bounds.width-40, height: view.bounds.height/2))
        imageView.image = UIImage(named: "img")
        imageView.contentMode = .scaleAspectFill


        maskView = UIView(frame: CGRect(x: 20, y: 40, width: view.bounds.width-40, height: view.bounds.height/2))
        maskView.addSubview(imageView)
        maskView.layer.masksToBounds = true
        maskView.layer.cornerRadius = 6
        self.view.addSubview(maskView)

        //manipulate the imageView to make the content mode seem to change
        // and have it redraw itself
        frame = imageView.frame
        var newFrame = frame
        newFrame.size.height += newFrame.height
        imageView.frame = newFrame
        imageView.center = maskView.center


        let button = UIButton(frame: CGRect(x: 20, y: maskView.frame.maxY + 60, width: view.bounds.width - 40, height: 40))
        button.setTitle("Animate", for: .normal)
        button.setTitleColor(.blue, for: .normal)
        button.addTarget(self, action: #selector(ViewController.pressed), for: .touchUpInside)
        self.view.addSubview(button)


        let AnotherButton = UIButton(frame: CGRect(x: 20, y: button.frame.maxY + 20, width: view.bounds.width - 40, height: 40))
        AnotherButton.setTitle("Reset", for: .normal)
        AnotherButton.setTitleColor(.blue, for: .normal)
        AnotherButton.addTarget(self, action: #selector(ViewController.reset), for: .touchUpInside)
        self.view.addSubview(AnotherButton)
    }

    func pressed() {
        //animate
        // screw around with the imageView back to the original frame
        // you could also do this with the height constraints if it was constraint based
        UIView.animate(withDuration: 1.0, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1.0, options: .curveEaseOut, animations: {
            self.imageView.frame = self.maskView.bounds
        }, completion: nil)

    }

    func reset() {
        //reset big frame
        var newFrame = frame
        newFrame.size.height += newFrame.height

        UIView.animate(withDuration: 1.0, delay: 0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: .curveEaseOut, animations: {
            self.imageView.frame = newFrame
            self.imageView.center = self.maskView.center
        }, completion: nil)

    }

}

结果：

【讨论】：