使用Swift 3在按下时动画单元格

Question

我的问题非常简单。我想要在collectionView中动画显示一个单元格。实际上，我想在单元格后面显示灰色背景并缩小内部的图像。

这将是（几乎）与Pinterest相同的效果：

我曾经在按钮上编写过动画，但从未在单元格上编写过。例如，如何将单元格链接到touchUpInside或TouchDown操作？

- KevinB

---

我想在触摸按下时启动操作，并在松开屏幕时释放。 - KevinB

Answer 1

如果您希望在触摸单元格时开始动画，则可以实现didHighlightItemAt。您可能希望在didUnhighlightItemAt中将其反转：

如果你想在触摸单元格时开始动画，你可以实现didHighlightItemAt。你可能想要在didUnhighlightItemAt中将它反转。

override func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
    UIView.animate(withDuration: 0.5) {
        if let cell = collectionView.cellForItem(at: indexPath) as? CustomCell {            
            cell.imageView.transform = .init(scaleX: 0.95, y: 0.95)
            cell.contentView.backgroundColor = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1)
        }
    }
}

override func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
    UIView.animate(withDuration: 0.5) {
        if let cell = collectionView.cellForItem(at: indexPath) as? CustomCell {
            cell.imageView.transform = .identity
            cell.contentView.backgroundColor = .clear
        }
    }
}

这产生的结果是：

- Rob

---

自动布局约束在单元格的包装视图中使用，但是它无法正常工作。 - user924

这个示例完全使用autolayout约束完成。这也是为什么我使用transform而不是调整frame，确切地说是为了避免干扰/冲突autolayout。如果你真的想要，你可以通过调整前导、后继、顶部和底部约束并动画调用layoutIfNeeded()来实现相同的事情，但这是过于复杂了。 - Rob

Answer 2

如果你只需要为特定的单元格实现此功能，只需将以下代码添加到你的单元格实现中：

override var isHighlighted: Bool {
  didSet {
    UIView.animate(withDuration: 0.5) {
      let scale: CGFloat = 0.9
      self.transform = self.isHighlighted ? CGAffineTransform(scaleX: scale, y: scale) : .identity
    }
  }
}

这与[pgdev][1]建议的相同，但针对isHighlighted属性。

- Alex Shoshiashvili

Answer 3

在 UICollectionViewCell 中使用 Swift 4.2

    //MARK:- Events
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        animate(isHighlighted: true)
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)
        animate(isHighlighted: false)
    }

    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesCancelled(touches, with: event)
        animate(isHighlighted: false)
    }

    //MARK:- Private functions
    private func animate(isHighlighted: Bool, completion: ((Bool) -> Void)?=nil) {
        let animationOptions: UIView.AnimationOptions = [.allowUserInteraction]
        if isHighlighted {
            UIView.animate(withDuration: 0.5,
                           delay: 0,
                           usingSpringWithDamping: 1,
                           initialSpringVelocity: 0,
                           options: animationOptions, animations: {
                            self.transform = .init(scaleX: 0.96, y: 0.96)
            }, completion: completion)
        } else {
            UIView.animate(withDuration: 0.5,
                           delay: 0,
                           usingSpringWithDamping: 1,
                           initialSpringVelocity: 0,
                           options: animationOptions, animations: {
                            self.transform = .identity
            }, completion: completion)
        }
    }

- Brandon WongKS

---

运行得非常顺利 - marcelosalloum

Answer 4

试试这个：

在您的自定义UICollectionViewCell中，当选择该单元格时，请更改imageView的transform，即

class CollectionViewCell: UICollectionViewCell
{
    @IBOutlet weak var imageView: UIImageView!

    override var isSelected: Bool{
        didSet{
            UIView.animate(withDuration: 2.0) {
                self.imageView.transform = self.isSelected ? CGAffineTransform(scaleX: 0.9, y: 0.9) : CGAffineTransform.identity
            }
        }
    }
}

- PGDev

Answer 5

Swift : 4 您需要实现自定义的UICollectionViewCell，在选中单元格时更改contentView或imageView的transform。

override var isSelected: Bool {
                didSet{
                       UIView.animate(withDuration: 1.0, animations: 
                        {
                             self.contentView.transform = self.isSelected ? CGAffineTransform(scaleX: 0.95, y: 0.95) : CGAffineTransform.identity
                             self.contentView.backgroundColor = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1)
                        }) { (true) in
                        UIView.animate(withDuration: 0.5, animations:
                        {
                             self.contentView.transform = self.isSelected ?  CGAffineTransform(scaleX: 1.0, y: 1.0) : CGAffineTransform.identity
                             self.contentView.backgroundColor = UIColor.clear
                        })
                    } 
                 }
             }

- Furkan

Answer 6

你有几个选项。

• 你可以实现集合视图委托方法collectionView(:didSelectItemAtIndexPath:)并在那里放置你的代码。

• 你可以将一个轻拍手势识别器附加到你想要响应轻拍的视图上。

• 你可以创建一个自定义按钮并将图像安装到其中，然后像平常一样使用按钮的IBAction方法。

- Duncan C