故事

在纸张的背后看到动画，或在邮件背后看到过渡，在一个以平面设计和过渡为世界的环境中，用户交互、应用程序行为和响应性是关键，我们需要好的和快速的动画来让用户在每一次点击、每一次滚动、他们花在我们应用程序的每一刻都感到快乐。

在大量应用程序、设计和动画之后，尝试了一些最著名的网络框架，在我就学习 FramerJS 后（它拥有我所见过的最美丽的弹簧之一），我正在构建我的知识库，正如我说过的，我在学习 iOS 开发时会这么做，让我向您介绍 Walker，一个动画引擎和库。

Walker 拥有一个鲍姆派之友，那就是和他一起漫游的 Morgan，一组动画，将使您构建 iOS 应用程序的过程更加轻松。请注意，Morgan 还未完成，并且始终在改进。

代码

Walker 有不同类型的使用案例和行为，您既可以拥有一个具有不同块和回调的动画链，也可以重新使用动画并在不同情况下应用它们。

animate(view) {
  $0.alpha = 1
}.then {
  print("First animation done")
}.chain {
  $0.width = 300
}.finally {
  print("Animations done")
}

在每个动画中都有不同的曲线，基本的有：线性、缓动、缓动进入、缓动退出和缓动进出，自定义的贝塞尔曲线和弹簧动画。

贝塞尔曲线

考虑到线性、缓动、缓动进入、缓动退出和缓动进出的贝塞尔动画，以下动画将只有一个贝塞尔动画，尽管它们被以相同的方式进行称呼。

animate(view, curve: .Bezier(1, 0.4, 1, 0.4)) {
  $0.x = 100
}

弹簧

弹簧是谱系中最漂亮的动画，灵感来源于 FramerJS 中使用的曲线，您将会得到一个类似的感觉，您将能够按照以下方式配置。

spring(view, spring: 200, friction: 10, mass: 10) {
  $0.x = 40
}

链

正如第一个例子中所述，您可以将动画链在一起，但不仅仅是具有相同曲线的动画，每个块都有独立的状态，因此您将能够链弹簧和贝塞尔动画，如果需要的话，可以在所有内容都完成时接收通知。

spring(view, spring: 200, friction: 10, mass: 10) {
  $0.x = 100
}.chain {
  $0.x = 0
}

创建自己的

如果无法重用动画，这不会是一个好的动画引擎，引擎中有一个叫做 Still 的组件，这个组件会与背景引擎通信，并提供一个 CAKeyframeAnimation，只需调用以下内容即可：

let animation = Still.bezier(.PositionX, curve: .Bezier(1, 0.4, 1, 0.4))

仍可以像上面提到的引擎一样，包含立方贝塞尔和弹簧动画，每个都单独配置。注意，这还将提供图层动画。

最后，此动画不会紧紧绑定到最终值或任何视图，因此您可以通过提炼它来跨项目重用。

distill((animation: animation, final: 100), view: view)

Distill可以同时处理您想要的任意数量的动画。

还有更多问题吗？

有更多问题并且想更详细地了解实现？我们有一个示例供您参考。在其内部，您会找到应用于不同视图的一些不同动画，您可以在这里检查文件。如果您仍然有不清楚的地方，不要犹豫联系我或打开一个问题。

安装

Walker 通过 CocoaPods 提供。要安装它，只需将以下行添加到您的 Podfile 中

pod 'Walker'

Walker 也通过 Carthage 提供。要安装它，只需在 Cartfile 中写入

github 'RamonGilabert/Walker'

即将推出的功能

检查ROADMAP 文件以查看我们正在考虑实现的功能，并不要犹豫打开一个问题或提出一个在路线图上的建议。

作者

Ramon Gilabert♥️

贡献力量

我们欢迎您为 Walker 贡献，更多详细信息请查看 CONTRIBUTING 文件。

许可

Walker 在 MIT 许可下提供。更多详细信息请查看 LICENSE 文件。