Question

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

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内部的图像。

如何改进我的代码？

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

    }

}

结果：

如何在UITableView的滚动上缩小UIImageView内容（图像）？

1 个答案: