web-dev-qa-db-ja.com

Swift 3を使用して、セルをアニメーション化する

私の問題は本当に簡単です。 collectionView内のセルをアニメーション化したいです。実際、セルの背後に灰色の背景を表示し、内部の画像を縮小したいと思います。

Pinterestと（ほぼ）同じ効果になります。

enter image description here

以前はボタンでそのアニメーションをコーディングしていましたが、セルではそうしませんでした。たとえば、セルをtouchUpInsideまたはTouchDownアクションにリンクするにはどうすればよいですか？

swiftanimationswift3uicollectionviewcell
15
KevinB

セルをタッチしたときにアニメーションを開始する場合は、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
        }
    }
}

その結果：

demo

49
Rob

特定のセルにのみこの機能を実装する必要がある場合は、セルの実装に次のコードを追加してください。

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

4
Alex Shoshiashvili

Swift 4.2、UICollectionViewCell内

    //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)
        }
    }
3
Brandon Wong

これを試して：

カスタムUICollectionViewCellで、セルが選択されたときにimageViewtransformを変更します。つまり、

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
            }
        }
    }
}
2
PGDev

Swift：4カスタムUICollectionViewCellを実装し、contentViewを変更する必要がありますOR imageViewtransformセルが選択されたとき

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
                        })
                    } 
                 }
             }
1
Furkan Vijapura

いくつかのオプションがあります。

  • コレクションビューのデリゲートメソッドcollectionView(:didSelectItemAtIndexPath:)を実装して、そこにコードを配置できます。

  • タップに応答するタップジェスチャレコグナイザーをビューに添付できます。

  • カスタムボタンを作成してそこにイメージをインストールし、通常どおりボタンのIBActionメソッドを使用できます。

0
Duncan C