CollectionViewのCellをタップ中に小さくなるアニメーションのやり方

7679 ワード
iOS animation Swift collectionView iOS テキストリンク

目的

UICollectionViewCellをタップしたときにアニメーションをつけることができたのでメモとして残しておこうと思います。
それに、UIButtonでタップした時のアニメーションをつけるやり方を書いてある記事はありますが、CollectionViewのCellをタップした時のアニメーションについて書いてある記事があまりない気がしました。
(まだiOS開発初心者なので、改善点などありましたらぜひ教えてください！笑)

Cellをタップした時のアニメーションを実装したもの

今回実装するのはこんな感じです。

CellのisHighlightedをoverrideする

collectionViewのCustomCellでisHighlightedという変数をoverride。
didSetの中にタップされたかどうかをif文で分岐させます。

CollectionViewCell.swift
class CollectionViewCell: UICollectionViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()

    }
    override var isHighlighted: Bool {
        didSet {
            if self.isHighlighted {
                //タップされた時の処理を書く
            } else {
                //指が離れた時の処理を書く
            }
    }
}

こんな感じに書きます。
ここではタップされている状態でtrueになるタップしている指が離れるとfalseになります。
選択されたかどうかを判別するisSelectedという変数もありますが、Highlightの方が良いそうです。

Cellにアニメーションをつける

次にアニメーションをCoreAnimationのCABasicAnimationを使って実装します。

タップされた時にCellを小さくする

if self.isHighlighted {
    let shrink = CABasicAnimation(keyPath: "transform.scale")
    //アニメーションの間隔
    shrink.duration = 0.1
    //1.0から0.95に小さくする
    shrink.fromValue = 1.0
    shrink.toValue = 0.95
    //自動で元に戻るか
    shrink.autoreverses = false
    //繰り返す回数を1回にする
    shrink.repeatCount = 1
    //アニメーションが終了した状態を維持する
    shrink.isRemovedOnCompletion = false
    shrink.fillMode = CAMediaTimingFillMode.forwards
    //アニメーションの追加
    self.layer.add(shrink, forKey: "shrink")
}

指が離れた時にCellを元の大きさに戻す

else {
    let shrink = CABasicAnimation(keyPath: "transform.scale")
    //アニメーションの間隔
    shrink.duration = 0.2
    //1.0から0.95に小さくする
    shrink.fromValue = 1.0
    shrink.toValue = 0.95
    //自動で元に戻るか
    shrink.autoreverses = false
    //繰り返す回数を1回にする
    shrink.repeatCount = 1
    //アニメーションが終了した状態を維持する
    shrink.isRemovedOnCompletion = false
    shrink.fillMode = CAMediaTimingFillMode.forwards
    //アニメーションの追加
    self.layer.add(shrink, forKey: "shrink")
}

各値はシミュレーションをしてみて好きな値に変えてみてください。

参考にした記事

Cellを小さくしたり大きくしたりするアニメーションはk-boyさんの「Snapchatのボタンみたいにタップ中に大きくなるUIButtonの作り方」という記事を参考にしました！
(https://qiita.com/k-boy/items/dda6db0b822b098b7687)

CellのisHighlightを使うのはxykのブログさんの「SwiftでON・OFFの切り替えをする円形ボタンを作る」という記事を参考にしました！(http://xyk.hatenablog.com/entry/2017/01/23/145305)

さいごに

今回はCustomCellでアニメーションをつけましたが、CustomCellを使わずいやる方法も次の機会にやってみようと思います。
まだわからないことだらけなので、間違っていることや別の方法があれば教えてもらえると嬉しいです！