Hero 是一个用于构建 iOS 视图控制器过渡效果的库。它在 UIKit 繁琐的过渡 API 之上提供了一个声明式层,使开发者能够轻松实现自定义过渡效果。

Carthage compatible Accio supported codecov Version License Xcode 10.0+ iOS 10.0+ Swift 4.0+ 中文 README Donate

Unit Test Swift PM

      

Hero 类似于 Keynote 的 Magic Move(神奇移动)。它会检查所有源视图和目标视图上的 heroID 属性。然后,每一对匹配的视图都会自动从其旧状态过渡到其新状态。

Hero 还可以为不匹配的视图构建动画。通过 heroModifiers 属性可以轻松定义这些动画。 Hero 将与 Magic Move 动画一起运行这些动画。所有这些动画都可以通过用户手势进行交互式控制

在视图控制器级别,Hero 提供了几种模板过渡效果,您可以通过 heroModalAnimationTypeheroNavigationAnimationTypeheroTabBarAnimationType 进行设置。 这些可以用作自定义过渡的基础。 结合使用 heroID & heroModifiers 来制作您自己独特的过渡效果。

      

默认情况下,Hero 基于 Material Design Motion Guide 提供动态持续时间。持续时间由距离和大小的变化自动确定——省去您的麻烦,同时提供一致且令人愉悦的动画。

Hero 不会对视图的构建或结构做任何假设。除了在动画期间隐藏它们之外,它不会修改您的任何视图状态。这使其适用于 Auto Layout程序化布局UICollectionView(无需修改其布局对象)、UITableViewUINavigationControllerUITabBarController 等...

使用示例 1

视图控制器 1

redView.hero.id = "ironMan"
blackView.hero.id = "batMan"

视图控制器 2

self.hero.isEnabled = true
redView.hero.id = "ironMan"
blackView.hero.id = "batMan"
whiteView.hero.modifiers = [.translate(y:100)]

使用示例 2

视图控制器 1

greyView.hero.id = "skyWalker"

视图控制器 2

self.hero.isEnabled = true
greyView.hero.id = "skyWalker"

// collectionView is the parent view of all red cells
collectionView.hero.modifiers = [.cascade]
for cell in redCells {
    cell.hero.modifiers = [.fade, .scale(0.5)]
}

您也可以在 storyboard 中执行这些操作!

安装

CocoaPods

将以下条目添加到您的 Podfile

pod 'Hero'

然后运行 pod install

不要忘记在每个要使用 Hero 的文件中 import Hero

Carthage

将以下条目添加到您的 Cartfile

github "HeroTransitions/Hero"

然后运行 carthage update

如果这是您第一次在项目中使用 Carthage,您需要按照 Carthage 中解释的步骤进行操作。

Accio

将以下内容添加到您的 Package.swift

.package(url: "https://github.com/HeroTransitions/Hero.git", .upToNextMajor(from: "1.4.0")),

接下来,将 Hero 添加到您的 App targets 依赖项中,如下所示

.target(
    name: "App",
    dependencies: [
        "Hero",
    ]
),

然后运行 accio update

Swift Package Manager

要使用 Apple 的 Swift 包管理器进行集成,请将以下内容作为依赖项添加到您的 Package.swift

.package(url: "https://github.com/HeroTransitions/Hero.git", .upToNextMajor(from: "1.3.0"))

然后将 "Hero" 指定为您希望使用 Hero 的 Target 的依赖项。 这是一个示例 PackageDescription

// swift-tools-version:4.0
import PackageDescription

let package = Package(
    name: "MyPackage",
    products: [
        .library(
            name: "MyPackage",
            targets: ["MyPackage"]),
    ],
    dependencies: [
        .package(url: "https://github.com/HeroTransitions/Hero.git", .upToNextMajor(from: "1.6.3"))
    ],
    targets: [
        .target(
            name: "MyPackage",
            dependencies: ["Hero"])
    ]
)

手动

文档

请查看 WIKI 页面(使用指南) 获取文档。

有关更新的文档,请参阅 header-doc。(在 Xcode 中使用 alt+click)

Dash 兼容的 API 文档: https://HeroTransitions.github.io/Hero/

交互式过渡教程

使用 Hero 的交互式过渡(第 1 部分)

常见问题解答

即使 self.hero.isEnabled 设置为 true,也无法使用 Hero 过渡

确保您还在导航控制器上启用了 self.hero.isEnabled,如果您正在导航控制器内执行 push/pop 操作。

过渡期间视图被另一个匹配的视图覆盖

默认情况下,匹配的视图使用全局坐标空间,而不匹配的视图使用局部坐标空间。局部坐标空间的视图可能被其他全局坐标空间的视图覆盖。 为了解决这个问题,请在被覆盖的视图上使用 useGlobalCoordinateSpace 修饰符。 查看 坐标空间 Wiki 页面 了解详细信息。

push 动画与我的自定义动画一起显示

这是 Hero 提供的导航控制器的默认动画。 要禁用 push 动画,请在导航控制器上将 self.hero.navigationAnimationType 设置为 .fade.none

如何在 dismiss 时使用不同的默认动画

您可以使用动画类型 .selectBy(presenting:dismissing) 来为 dismiss 指定不同的默认动画。

例如

    self.hero.modalAnimationType = .selectBy(presenting:.zoom, dismissing:.zoomOut)

贡献

我们欢迎任何贡献。 请阅读 贡献指南