木の向くままのエンジニア 
クリックできる目次
はじめに
こんにちは🍃
iPhoneのホーム画面のように、いかにも「編集中」を示せるようなカタカタ震えるアニメーションをUICollectionViewで行いたくなりましたので、参考記事として書いていきたいと思います。
完成イメージ
編集ボタン等を押すとUIcollectionViewのCellがプルプルと震えて、編集中であるなど、通常と状態が違うことを表現することができます。
Viewにアニメーションを適用させるExtension
以下のようにViewに対してExtensionを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
extension UIView { /** 震えるアニメーションを再生します - parameters: - range: 震える振れ幅 - speed: 震える速さ - isSync: 複数対象とする場合,同時にアニメーションするかどうか */ func startVibrateAnimation(range: Double = 2.0, speed: Double = 0.15, isSync: Bool = false) { if self.layer.animation(forKey: "VibrateAnimationKey") != nil { return } let animation: CABasicAnimation animation = CABasicAnimation(keyPath: "transform.rotation") animation.beginTime = isSync ? 0.0 : Double((Int(arc4random_uniform(UInt32(9))) + 1)) * 0.1 animation.isRemovedOnCompletion = false animation.duration = speed animation.fromValue = range.toRadian animation.toValue = -range.toRadian animation.repeatCount = Float.infinity animation.autoreverses = true self.layer.add(animation, forKey: "VibrateAnimationKey") } /// 震えるアニメーションを停止します func stopVibrateAnimation() { self.layer.removeAnimation(forKey: "VibrateAnimationKey") } } extension Double { /// ラジアンに変換します var toRadian: Double { return .pi * self / 180 } } |
実際の使い方
実装するにはこのような感じになるかと思います🌾
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import UIKit class ViewController: UIViewController { @IBOutlet weak var collectionView: UICollectionView! /// UICollectionViewが編集中かどうか var isEditMode = false { didSet { self.collectionView.reloadData() } } var layout: UICollectionViewFlowLayout { let layout = UICollectionViewFlowLayout() // ...今回は省略 return layout } override func viewDidLoad() { super.viewDidLoad() let nib = UINib(nibName: "CustomCollectionViewCell", bundle: nil) self.collectionView.register(nib, forCellWithReuseIdentifier: "CustomCollectionViewCell") self.collectionView.dataSource = self self.collectionView.collectionViewLayout = self.layout } @IBAction func buttonAction(_ sender: UIButton) { self.isEditMode = !self.isEditMode let title = self.isEditMode ? "完了" : "編集" sender.setTitle(title, for: .normal) } } extension ViewController: UICollectionViewDataSource { /// セルの個数を返す func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 15 } /// セルを返却 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) if self.isEditMode { cell.startVibrateAnimation(range: 3.0) } else { cell.stopVibrateAnimation() } return cell } } |
ポイントになるところ
|
1 |
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell |
isEditModeなどで持たせておいたBoolでアニメーションの開始と終了のタイミングを制御してあげます。
