LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

Heroアニメーションを使ってみる

Last updated at Posted at 2020-04-11

今回使用するリポジトリをクローン

こちらのリポジトリをクローンしてください

CocoaPodsでHeroをインストール

# クローンしたリポジトリに移動
cd HeroSampleApp1

# podの初期設定
pod init

# Podfileの編集
vi Podfile
# 以下をコピペ
## ここから
target 'HeroSampleApp1' do
  use_frameworks!
  pod 'Hero'
end
## ここまで

# Podライブラリのインストール
pod install

CocoaPodsの導入は公式がわかりやすいです

Xcodeのプロジェクトを開く

HeroSampleApp1.xcworkspaceを開く

image.png


構築

アイコンをタップした時のアニメーション設定

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

そのほかにも公式ページにアニメーションが記載されているので設定して遊んでみましょう!

終了

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up