Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Article information
RevisionsShow article in Markdown
Report article
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

This post is Private. Only a writer or those who know its URL can access this post.

posted at

updated at

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

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

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

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

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

終了

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Article information
RevisionsShow article in Markdown
Report article
Help us understand the problem. What are the problem?