IBAnimatable 6.1.0

IBAnimatable 6.1.0

×

测试已测试✗
Lang语言 SwiftSwift
许可证 MIT
发布上次发布2020年4月
SPM支持 SPM✓

由 Jake Lin、Tom Baranes、Steven Deutsch 维护。Jake Lin，Tom Baranes，Steven Deutsch。

IBAnimatable 6.1.0

  • 由
  • IBAnimatable

IBAnimatable

使用 IBAnimatable 在 Interface Builder 中为 App Store 准备的应用程序设计定制的 UI、交互、导航、过渡和动画。

IBAnimatable hero image

Build Status Language CocoaPods Carthage Compatible Accio supported License

该应用程序完全使用 Interface Builder 和 IBAnimatable 开发，没有任何代码。由于 Dribbble 上的 GIF 文件大小，这里只演示了功能的一部分。我们还可以在 YouTube 或 Github 上的 MP4 中找到完整的高清版本。

关键功能

  • ✅ 100% 与 UIKit 兼容。所有 IBAnimatable API 都是 UIKit 的扩展。不会污染 UIKit 的 API。
  • ✅ 100% 与 Auto Layout 和 Size Classes 兼容。没有自定义布局系统。
  • ✅ 在 IB 中进行用户界面设计和预览：圆角、边框、遮罩、阴影、渐变颜色、着色颜色、模糊效果等。
  • ✅ 在 IB 中进行动画设计：滑动进入/退出、淡入/淡出、缩放进入/退出、翻转、弹出、震动、旋转、移动等。
  • ✅ 在 IB 中进行过渡设计：淡入、滑动、翻转、方块、门户、折叠、爆炸等。
  • ✅ 在 IB 中进行交互手势设计：拖动、屏幕边缘拖动、捏合等。
  • ✅ 在 IB 中进行展示设计：翻转、覆盖、缩放、下拉等。
  • ✅ 在 IB 中进行活动指示器设计：球击打、球旋转、方块转换、精灵等。

StoryboardPreview

以下是 Interface Builder 中 Storyboard 中的完整设计。

使用 IBAnimatable，我们可以在 Interface Builder 中设计 UI，就像我们在 Sketch 中做的那样，并在 Swift playground 中原型化动画，就像我们在 Framer 中做的那样。我们还可以直接在生产就绪的应用程序中使用设计的输出。

作为设计师，我们喜欢 Sketch，这是一个简单但功能强大的工具，用于创建 UI。然而，Sketch 无法设计交互、导航、过渡和动画，我们可能需要另一个像 Framer 这样的工具来设计其中一些功能。此外，为了制作 App Store 准备的应用程序，我们需要使用 Xcode 和 Interface Builder 来实现 UI 和动画。为了加快过程并减少浪费，我们创建了 IBAnimatable 来使 Interface Builder 可设计并可动画化。

如何安装

手动安装

将IBAnimatable文件夹复制并粘贴到你的Xcode项目中。

Swift 箱包管理器

若要使用 Apple 的 Swift 箱包管理器进行整合，请在你的 Package.swift 文件中将以下内容作为依赖项添加：

.package(url: "https://github.com/IBAnimatable/IBAnimatable.git", .upToNextMajor(from: "6.1.0"))

CocoaPods

在你的 Podfile 中添加以下条目

   pod 'IBAnimatable'

Carthage

在你的 Cartfile 中添加以下条目

   github "IBAnimatable/IBAnimatable"

Accio

在您的 Package.swift 文件中添加以下条目

.package(url: "https://github.com/IBAnimatable/IBAnimatable.git", .upToNextMajor(from: "6.1.0")),

接下来，按照如下方式将 IBAnimatable 添加到您的 App targets 依赖项

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

请注意，对于 @IBDesignable 和 @IBInspectable 的构建框架有一个限制，这将在您使用 Carthage 或 Accio 时影响 IBAnimatable。有解决方法可使用 Carthage、Accio 或 Swift 箱包管理器与 IBAnimatable 一起使用，请参阅 Carthage – no Animatable UI Classes appearing in Storyboard

如 @DanielAsher 所述

我使用carthage update --use-submodules --no-build --no-use-binaries命令，并手动将框架项目和框架添加为嵌入式依赖。这种方法稳定，颗粒度细，但可能没有直接拖动构建好的框架到项目中那么容易。

Git子模块

将此仓库添加为子模块，并将项目文件添加到您的开发环境中。然后您可以为应用程序目标链接到IBAnimatable.framework。

版本 6.1

IBAnimatable 6.1 是 IBAnimatable 的最新主要版本。此版本支持 Swift 5.1。从版本 5.x 和 6 迁移时没有 API 引发变更。

版本 6

IBAnimatable 6 支持 Swift 5。从 5.x 版本迁移时没有 API 引发变更。

版本 5.2

此版本支持 Swift 4.2。从 4.x 版本迁移时没有 API 引发变更。

如果您从 3.x 版本迁移，请查阅IBAnimatable 4.0 迁移指南以获取更多信息。

Swift 版本

Swift 5.1

使用 IBAnimatable 从 Swift 5 迁移到 Swift 5.1 时没有 API 破坏性变更。

如果您在使用 Swift 5 的 Xcode 11，请使用 6.0.0 版本。

Swift 4.2

使用 IBAnimatable 从 Swift 4.* 迁移到 Swift 4.2 时没有 API 破坏性变更。

如果您在使用 Swift 4.2 的 Xcode 10，请使用最新的 5.x 版本。

Swift 4.1

使用 IBAnimatable 从 Swift 4 迁移到 Swift 4.1 时没有 API 破坏性变更。

如果您在使用 Swift 4.1 的 Xcode 9.3，请使用最新的 5.x 版本。

Swift 4

使用 IBAnimatable 从 Swift 3.2 迁移到 Swift 4 时没有 API 破坏性变更。

如果您在使用 Swift 4 的 Xcode 9，请使用最新的 5.x 版本。

Swift 3.2

使用 IBAnimatable 从 Swift 3.1 迁移到 Swift 3.2 时没有 API 破坏性变更。

如果您在使用 Xcode 9 和 Swift 3.2，请使用 4.2 版本。

Swift 3 或 3.1

如果您从 Swift 2.x 迁移，请查看 IBAnimatable 3.0 迁移指南 获取有关如何将项目迁移到 3.0 版本的更多信息。第 3 版遵循 Swift 3 的 API 设计指南 并包含来自 2.x 版本的许多破坏性更改。

如果您在使用 Swift 3 的 Xcode 8，请使用最新的 4.x 版本。

语言

中文

特性

  • 从原型到可发布的 App Store App - 在 Interface Builder 中的设计就是 App 的外观。更多详细信息可以在这次演讲中找到 在 Interface Builder 中原型化和设计 App Store App (/dev/world/2016)
  • 设计师友好 - 在属性检查器中具有类似 Sketch 风格的配置面板 (Attributes inspector) 以降低使用 Interface Builder 时的学习曲线。
  • Swift playground 支持动画设计 - 类似于 Framer，我们可以在 Swift playground 中原型化动画以节省在模拟器或实际 iOS 设备上运行的时间。
  • 内置自动布局支持 - 我们可以使用 Auto Layout 和 Size Classes 与 IBAnimatable 一起支持方向和多个 iOS 设备。
  • 导航和过渡支持 - 我们可以在 App 中使用默认的导航模式。IBAnimatable 还具有自定义过渡动画器和 segues 以支持过渡动画和手势交互。
  • 面向协议编程 - IBAnimatable 使用面向协议的编程范式。借助 Swift 协议扩展，可以轻松支持更多可设计或可动画化的功能。我们甚至可以使用这些协议扩展来创建其他自定义 UI 元素，而不是使用 IBAnimatable 中的默认元素。更多详细信息可以在这次演讲中找到 在 Interface Builder 中原型化和设计 App Store App (/dev/world/2016) - 第二部分：面向协议编程

用例

  • 原型设计 - 创建交互式原型以快速验证想法。
  • 在 Interface Builder 中重新设计 - 在不编写代码的情况下，将 Sketch 中的 UI 和 Framer 中的动画进行重新设计。
  • 创建自定义 UI 元素 - 使用 IBAnimatable 协议来创建自定义 UI 元素。例如，带有默认颜色调板的按钮。

文档

如何运行示例应用

学习和理解IBAnimatable强大功能的最简单方法是在Interface Builder中运行示例应用并调整设置。只需以下几步即可运行应用，要查看更多功能，请点击“忘记密码”按钮解锁。😉

  1. 克隆仓库
$ git clone https://github.com/IBAnimatable/IBAnimatable.git
  1. 在Xcode中打开工作区
$ cd IBAnimatable
$ open IBAnimatable.xcworkspace
  1. 在模拟器或iOS设备上编译并运行应用

如何使用Interface Builder进行设计

要使用IBAnimatable在Interface Builder中设计UI和动画，请按照以下步骤操作

  1. 打开Storyboard或Xib文件。
  2. 将UIKit元素（例如UIView）拖放到UIViewController中。
  3. 在标识检查器（标识检查器）中，将UI元素配置为Animatable自定义UI类，例如AnimatableView，您可以在APIs.md中找到所有Animatable类。
  4. 在属性检查器中配置UI和动画。

如何在Swift playground中动画

我们可以在属性检查器中配置动画设置。然而，Interface Builder 不支持预览动画，但我们可以仍在 Swift Playgrounds 中原型化动画。有三个示例页面来演示如何在 Swift Playgrounds 中设计动画。您可以在 IBAnimatable.playground 中找到它们。

  1. 打开 IBAnimatable.xcworkspace
  2. 选择 IBAnimatable Framework 方案，并用 Command + b 编译它
  3. 选择 IBAnimatable.playground，在 Swift Playgrounds 中选择一个页面，然后点击“辅助编辑器”按钮来拆分 playground。之后，在右侧顶部的“时间线”上选择，以预览动画。我们可以使用 Xcode 菜单“编辑” -> “执行”来重新运行 playground。

如何以编程方式动画化

如您在上面所见，我们可以在 Interface Builder 中完全原型化一个应用而无需一行代码，但 IBAnimatable 也提供了让我们完全控制 UI 和动画的 API。IBAnimatable 提供了简单的类似 Promise 的 API。我们可以简单地在一条线上调用它们。

view.animate(.pop(repeatCount: 1)) // pop animation for the view
view.animate(.squeezeFade(way: .in, direction: .left)) // squeeze and fade in from left animation

您可以在 Swift playground 页面 - 预定义动画 中尝试调整这些预定义动画。

动画属性

有一些属性我们可以更改以定制动画。我们需要做的是将参数传递给 animate() 方法来启动动画。

view.animate(.squeeze(way: .in, direction: .left), duration: 1, damping: 1, velocity: 2, force: 1)

您可以在 Swift playground 页面 - 动画属性 中尝试所有这些动画的不同参数。

链式动画

有时，我们需要在之前的动画之后运行更多动画。使用 IBAnimatable，我们可以轻松使用类似 Promise 的 API 链接所有动画，以提供流畅的用户体验。

// We can chain the animations together, it is the source code of animated GIF in "Animate in Swift playground" section
view.animate(.squeezeFade(way: .in, direction: .down))
    .then(.pop(repeatCount: 1))
    .then(.shake(repeatCount: 1))
    .then(.squeeze(way: .in, direction: .down))
    .then(.wobble(repeatCount: 1))
    .then(.flip(along: .x))
    .then(.flip(along: .y))
    .then(.slideFade(way: .out, direction: .down))

延迟动画

我们可以使用 delay 方法延迟下一个动画。

view.animate(.squeeze(way: .in, direction: .left))
    .delay(0.5)
    .then(.shake(repeatCount: 3))

我们还可以延迟第一个动画。

view.delay(2)
    .then(.squeeze(way: .in, direction: .left))

完成处理程序

我们可以在所有动画完成后执行完成处理程序/闭包。

view.animate(.squeeze(way: .in, direction: .left))
    .completion { print("Animations finished!") }

如何贡献

我们都可以为该项目做出贡献。较低的投入意味着更有时间来构建优质应用程序和享受咖啡。☕️.

  • 如果你是一名设计师，你可以使用带有 IBAnimatable 的 Interface Builder 进行设计，而无需像 Sketch 这样的设计工具，或者快速将 Sketch 或 Photoshop 中的现有设计实现在 Interface Builder 中。使用 IBAnimatable，你应该能够 完成所有（删除标签）大部分的设计工作在 Interface Builder 中。如果你有任何功能请求，请创建 GitHub 问题，我们将将其纳入待办事项。如果你已经使用 IBAnimatable 进行的任何设计，请通过创建 Pull Request 或 GitHub 问题让我们知道。我们将其添加到 README 文件中。

  • 如果你是一名开发者，你可以开发功能或修复错误，请查阅 愿景、技术考虑事项和路线图 和 GitHub 问题 以查找待办事项。如果你已在您的应用程序中使用 IBAnimatable，请通过创建 Pull Request 或 GitHub 问题让我们知道。我们将其添加到 README 文件中。

  • 如果你擅长英语，请纠正我的英语。😁。如果你擅长其他语言，请在这些语言中创建 README 文件。

  • 如果你喜欢这个项目，请与其他设计师和开发者分享它，并给他们星星。🌟这个项目。🤗

非常感谢 所有贡献者🤗尤其是 @tbaranes，他开发了很多功能并维护了这个项目。

路线图

愿景、技术考虑事项和路线图

灵感/致谢

  • IBDesignable和IBInspectable - 整个项目都基于它。
  • Sketch - Interface Builder 应该与 Sketch 一样易于使用。
  • 框架工作室 - 在一个地方设计和预览动画。
  • Meng To 的 Spring - 从这个项目中借鉴了许多动画参数。
  • Colin Eberhardt 的 VCTransitionsLibrary - 端口了这个项目中的所有转换动画，并添加了参数支持并修复了错误。
  • Vinh Nguyen 的 NVActivityIndicatorView - 端口了这个项目中的所有活动指示器动画，并将其迁移到 Swift 3。
  • Invision ToDo App UI Kit，演示应用的原始设计来自这个 UI Kit，使用 Interface Builder 重新设计。我们还添加了交互、导航和动画。

变更记录

请参阅 CHANGELOG.md

许可证

IBAnimatable 在 MIT 许可下发布。有关详细信息，请参阅 LICENSE。