今回使用するリポジトリをクローン
こちらのリポジトリをクローンしてください
CocoaPodsでHeroをインストール
# クローンしたリポジトリに移動
cd HeroSampleApp1
# podの初期設定
pod init
# Podfileの編集
vi Podfile
# 以下をコピペ
## ここから
target 'HeroSampleApp1' do
use_frameworks!
pod 'Hero'
end
## ここまで
# Podライブラリのインストール
pod install
Xcodeのプロジェクトを開く
HeroSampleApp1.xcworkspace
を開く
構築
アイコンをタップした時のアニメーション設定
import分の追加
ViewController.swift
import Hero
MenuViewController.swift
import Hero
setupViewの設定
ViewController.swift
func setupView() {
// Heroを有効化
self.hero.isEnabled = true
// HeroIdを設定
mhtLogoIcon.hero.id = "mht"
}
MenuViewController.swift
func setupView() {
// Heroを有効化
self.hero.isEnabled = true
// HeroIdを設定
self.mhtIcon.hero.id = "mht"
// mhtIconにHeroアニメーションを設定
self.mhtIcon.hero.modifiers = [.arc]
}
ビルドして確認する
CollectionViewのアニメーション設定
CollectionViewにHeroアニメーションを追加
MenuViewController.swift
func setupView() {
// collectionViewにHeroアニメーションを設定
collectionView.hero.modifiers = [.cascade]
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if let cell = cell as? memberCell {
// cellにHeroアニメーションを設定
cell.hero.modifiers = [.fade, .scale(0)]
}
}
ビルドして確認する
CollectionViewのセルをタップした時のアニメーション設定
遷移先にHeroアニメーションを設定
MenuViewController.swift
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// 遷移先のViewControllerのHeroを有効化
viewController.hero.isEnabled = true
// 今回はFadeで遷移するように設定
viewController.heroModalAnimationType = .fade
}
ビルドして確認する
完成!!
アニメーションのさせ方をかえてみよう!!
今回設定したアニメーション
- fade
- scale
- cascade
- arc
そのほかにも公式ページにアニメーションが記載されているので設定して遊んでみましょう!