Spruce 2.2.0

Spruce 2.2.0

×

测试已测试✓
语言语言 SwiftSwift
许可证 MIT
发布最后发布2020年10月
SPM支持SPM✗

由WillowTree维护。

Spruce 2.2.0

  • 由
  • WillowTree, Inc.

Spruce Logo

Spruce iOS 动画库（以及Android）

CircleCI Build Status Coverage Status Carthage compatible CocoaPods compatible License MIT Public Yes

是什么？

Spruce 是一个轻量级的动画库，有助于编排屏幕上的动画。现在有许多不同的动画库，开发者需要确保每个视图都在适当的时间进行动画。Spruce 可以为设计师请求复杂的多个视图动画，而不会使开发者对原型感到反感和焦虑。

以下是您如何 Spruce 优化屏幕的快速示例！

Example

安装说明

为了使一切变得超级简单，我们目前同时支持 CocoaPods 和 Carthage。如果您想不使用包管理器自行完成所有操作，请访问我们的发布页面并从那里下载预构建的框架，或者您可以从这个 GitHub 项目中下载确切源代码。

CocoaPods

将以下内容添加到您的 Podfile 文件中。

pod "Spruce", '~> 1.0.0'

Carthage

将以下内容添加到您的 Cartfile 文件中。

github "willowtreeapps/spruce-ios"

开始使用

Spruce 完全使用 Swift 编写，目前仅支持 Swift。即将推出 Objective C 封装。

基本使用

Spruce 内置了针对 UIView 的扩展，旨在让您在调用动画时更加轻松。假设我们想要对视图执行 [.fadeIn, .expand(.slightly)]。我们将这些动画数组称为 ourAnimations。

为动画做准备

如果您想要视图渐显，则需要确保视图已经淡出。为此，我们需要在Spruce中调用 prepare 方法来准备视图。

yourView.spruce.prepare(ourAnimations)

此 prepare 函数将遍历每个视图并将 alpha 设置为 0.0，并将视图缩小，以便当动画运行时视图将回复到原始位置。

运行动画

使用以下命令在您的视图中运行基本动画。

yourView.spruce.animate(ourAnimations)

查看文档，了解更多功能和如何更好地使用 animate 方法。

使用 SortFunction

幸运的是，Spruce 提供了约 8 个 SortFunction 实现，并且有着广泛的可能性创建更多。使用 SortFunction 来改变视图的动画顺序。考虑以下示例

let sortFunction = LinearSortFunction(direction: .topToBottom, interObjectDelay: 0.1)

在这个示例中，我们创建了一个将视图从上到下引发动画的 LinearSortFunction。我们可以通过使用一个代表循环动画的 RadialSortFunction 来改变动画的外观和感受。如果我们想在实际的 Spruce animate 调用中使用这个 sortFunction，那么它看起来就像这样

yourView.spruce.animate([.fadeIn, .expand(.slightly)], sortFunction: sortFunction)

请确保尝试库存的 SortFunction 实现，直到找到适合您的一个！如果您想预览每个 SortFunction 的外观，请查看示例应用。

使用自定义动画

尽管 Spruce 拥有大量内置动画，但有时自己制作更简单。我们确实鼓励自定义，Spruce 也能胜任！假设你想变换并动画化一个 UIView 对象。要做到这一点，让我们创建一个 PrepareHandler

let prepareHandler = { view in
	view.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)
}

PrepareHandler 将通过 Spruce 传递一个 UIView 对象，然后是你的函数任务准备视图来动画化。这样我们的动画将看起来干净且迅速，因为视图已经缩小并准备好增长！现在要设置增长的视图的功能，我们需要创建一个 ChangeFunction

let changeFunction = { view in
	view.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
}

在 changeFunction 中，同样的视图也将通过 Spruce 传递，然后你的函数将用于动画化视图本身。这两个函数将用于调用每个视图要动画化的子视图。现在我们已经拥有了这两个函数，我们就可以创建一个动画

let animation = StockAnimation.custom(prepareFunction: prepareHandler, animateFunction: changeFunction)

一旦我们有动画，我们只需要将动画传递给 Spruce 并开始动画！

yourView.spruce.animate([animation])

基本概念

动画

给定一个指定视图如何修改的更改函数，您可以指定你想要的任何类型的动画。随意实现 Animation 协议并创建自己的动画类。

动画协议

该协议在你的类中需要实现一个函数和一个变量。第一个是 changeFunction。这是一个接收一个 UIView 参数的 void 函数。更改函数将指定将要对该视图进行的所有修改，你可以使用它来动画化更改。当 Spruce 想要运行视图上的动画时，将调用 animate 函数。在这次调用之前，必须设置 changeFunction，但是 Spruce 应该为你处理所有这些。函数调用中的 completion 参数应当在动画完成后被你的函数调用。

var changeFunction: ChangeFunction? { get set }

func animate(delay: TimeInterval, view: UIView, completion: CompletionHandler?)

标准动画

StandardAnimation 类使用默认的 UIView.animate 函数将更改函数应用到视图。如果你想对更改应用标准的线性运动，请使用此类。

弹簧动画

SpringAnimation 类使用 UIView.animate(...usingSpringWithDamping) 函数。通过此类你可以编辑 springDampening 和 initialVelocity 值，这样你的视图就会在屏幕上弹跳。

排序函数

由于动画可以分为多种类型，尤其是涉及子视图的动画，我们需要考虑如何对它们进行动画处理。一些视图可能没有子视图，而另一些视图可能有数百个子视图。为了处理这种情况，我们引入了 SortFunction 的概念。它的作用是针对动画视图中的每个子视图，将一个从特定子视图到其动画前应等待的确切延迟的映射。其中一些将按照径向模式排序，而另一些可能完全随机排序。这是 Spruce 的一项酷功能，您可以实际定义自己的 SortFunction，然后动画将看起来完全不同。幸运的是，Spruce 还附带了大量默认的 SortFunction 类，以使开发过程更加顺畅。查看我们提供的默认 SortFunction 类，看看是否能用于或支线开发出您自己的酷炫和定制动画！

SortFunction 协议

这是一个非常简单的协议，要求实现以下的函数：

func timeOffsets(view: UIView, recursiveDepth: Int) -> [TimedView]

上述函数需要做的是接收一个 UIView 并生成一个子视图列表。这个列表可以是递归生成的，也可以不递归，取决于布尔值设置的值。一旦生成了子视图列表，您可以定义自己的排序指标，以确定 UIView 应该以何种顺序动画。为了做到这一点，您需要创建一个 SpruceTimedView 的数组。这个特殊的结构有两个属性：(1) view: UIView 和 (2) timeOffset: TimeInterval。您的 SortFunction 可以定义 timeOffset，但是动画类将使用这个值来确定指定视图动画延迟多长时间。学习最好的方式就是实践。那么，为什么不试试制作自己的 SortFunction 呢！

默认排序函数

为了确保开发者可以即插即用 Spruce，我们包括了几种默认的 SortFunction 实现。

  • DefaultSortFunction
  • LinearSortFunction
  • CorneredSortFunction
  • RadialSortFunction
  • RandomSortFunction
  • InlineSortFunction
  • ContinousSortFunction
  • ContinuousWeightedSortFunction

更多详细信息，请查看文档 此处

股票动画

为了让每个人的生活更轻松，股票动画执行了许多应用程序今天使用的基本的 UIView 动画。混合匹配这些动画以获得您期望的核心运动。

  • .fadeIn
  • .slide(<SlideDirection>, <Distance>)
  • .spin(<Angle>)
  • .expand(<Scale>)
  • .contact(<Scale>)
  • .custom(prepareFunction: <PrepareHandler>, animateFunction: <ChangeFunction>)

尝试哪些适合您！如果您还有更多想法，欢迎将其添加到库中！

示例应用程序

使用示例应用程序找到合适的 SortFunction。您可以在应用程序中看到每个 SortFunction 的实现。当您在不同类型的 SortFunction 之间切换时，代码将在电话上显示并在 Xcode 控制台中打印，这样您就可以立即将 Spruce 添加到您自己的应用程序中！

示例应用程序还包含了上述两个可扩展性测试的实现，它们展示了如何使用 UITableView 或 UICollectionView 与 Spruce 一起使用。

为 Spruce 做贡献

我们欢迎所有贡献者！请参阅贡献指南，并关注我们的行为准则。

问题或未来想法

如果 Spruce 的某个部分不能正常工作，请务必在 Github 上提交问题。在问题中提供尽可能多的细节。这可能包括示例代码或您执行的详细步骤，以便每个人都可以重现此问题。示例项目始终是最好的方法 :)。这有助于我们的开发人员或开源社区中的某人开始着手解决问题！

如果您有一个功能想法，请提交功能请求的问题或提交一个拉取请求，我们将与您合作将其合并！

关于 WillowTree！

WillowTree Logo

我们为世界上领先的公司构建应用程序、响应式网站、聊天机器人等任何在屏幕上运行的数字产品。我们精英团队挑战自己，通过结合最新的战略和设计思维与企业级软件开发来打造非凡的体验。

想参与更多像 Spruce 这样的独特项目吗？请查看我们的：职位页面。