![IBAnimatable](https://raw.githubusercontent.com/IBAnimatable/IBAnimatable-Misc/master/IBAnimatable/Hero.png) `IBAnimatable` 是一个帮助我们在 Interface Builder 和 Swift Playground 里面设计 UI, 交互, 导航模式, 换场和动画的开源库。 ![IBAnimatable hero image](https://raw.githubusercontent.com/IBAnimatable/IBAnimatable-Misc/master/IBAnimatable/IBAnimatable.gif) **整个 App 都是通过 `IBAnimatable` 在 Interface Builder 设计完成,没有任何一行代码**。由于 [Dribbble GIF 文件](https://dribbble.com/shots/2453933-IBAnimatable-Design-App-Store-ready-Apps-in-Interface-Builder)大小的限制,这只演示了部分功能,完整功能可以在 [YouTube](https://www.youtube.com/watch?v=dvD8X6J1YLM) 或者 [MP4 on Github](https://github.com/IBAnimatable/IBAnimatable-Misc/blob/master/Videos/IBAnimatable.mp4?raw=true) 上看到。 ![StoryboardPreview](https://raw.githubusercontent.com/IBAnimatable/IBAnimatable-Misc/master/IBAnimatable/Storyboard.jpg) 上面是该 App 在 Interface Builder 的 Storyboard 中的设计。 2015 年 Designer News 热门文章中,前 20 篇里面有一半左右的文章是讨论如何快速制作可交换的原型,例如 Adobe 公司在开发 Project Comet 原型工具来补救日益被 Sketch 迅速占领的市场。这些工具都有一个特点:“快”。“快”成为移动开发领域唯不可破的法宝,因为无论那个 App 都需要在不断的迭代中逐步完善和发展。但是目前这些工具都没法提供一个端到端的解决方案,很多工具生成的原型没办法直接使用在最终的 App 中,或者需要在 Xcode 和 Interface Builder 里重做原型中的设计,交换以及动画。这是一个很大的痛点,`IBAnimatable` 的诞生是为了解决这个痛点。`IBAnimatable` 提供从想法到最终 App 产品的设计工具,帮助我们在 Interface Builder 和 Swift Playground 里面设计 UI, 交互, 导航模式, 换场和动画。 ## 主要功能 * 一个工具覆盖原型到可提交到 App Store 的 App - 支持所见即所得的设计功能。 * 对设计师友好 - 在 Interface Builder 的 Attributes Inspector 里提供类似 Sketch 配置功能。 * 在 Swift Playground 上设计动画 - 提供类似 Framer Studio 的左边编写代码,右边预览动画的功能。 * 内置 Auto Layout 支持 - 使用 Auto Layout 和 Size Classes 支持翻屏和多设备。 * 导航和换场动画支持 - 可以使用内置的导航模式,`IBAnimatable` 同时提供 Unwind Segue 来返回前一个页面,可以省去编写代码的步骤。 * Protocol-Oriented 编程模式 - `IBAnimatable` 使用了 protocol-oriented 编程模式,使得项目非常容易扩张,并且可以方便的制作出自己的自定义控件。 ## 使用场景 * 制作原型 - 使用 `IBAnimatable` 快速地执行可交互的原型。 * 在 Interface Builder 里面快速实现 - 把 Sketch 的 UI 或者 Framer Studio 的原型在 Interface Builder 快速实现,不需要编写任何代码。 * 制作自定义控件 - 使用 `IBAnimatable` 的 extension 制作另外的控件库,例如 Material 控件等。 ## 怎样运行例子App 要了解和学习 `IBAnimatable`,我们可运行示例 App,并在 Interface Builder 中修改相关的配置来查看设计的结果。 1) 克隆代码库 ```bash $ git clone https://github.com/IBAnimatable/IBAnimatable.git ``` 2) 在 Xcode 打开 .xcodeproj 文件 ```bash $ cd IBAnimatable $ open IBAnimatable.xcodeproj ``` 3) 编译并运行 ## 如何在 Interface Builder 中设计 UI 和动画 ![](https://raw.githubusercontent.com/IBAnimatable/IBAnimatable-Misc/master/IBAnimatable/DesignInInterfaceBuilder.png) 使用 `IBAnimatable` 在 Interface Builder 里设计 UI 和动画,只需要下面简单的几步: 1. 打开 storyboard 或者 Xib。 2. 把 UIView 或其他 UI 控件拖放到 ViewController 里面。 3. 在 Identity Inspector 里把相应的 UI 控件关联到 `Animatable` 的 UI 控件类,`Animatable` 的文档可以在 [APIs.md](APIs.md) 找到。 4. 在 Attribute Inspector 里配置UI和动画。 ## 如何在 Swift Playground 里设计动画 ![](https://raw.githubusercontent.com/IBAnimatable/IBAnimatable-Misc/master/IBAnimatable/AnimateInSwiftPlayground.gif) 尽管我们可以在 Attribute Inspector 里配置动画,但是 Interface Builder 还不支持预览动画。但幸运的是我们可以在 Swift Playground 里设计和预览动画。你可以在 [IBAnimatable.playground](../IBAnimatable.playground) 看到如何设计和预览动画。首先选择一个Playground 的页,然后点击 "Assistant editor" 按钮来呈现右边的预览页。接着选择右上角的 "Timeline" 来预览动画。我们可以使用 Xcode 的 "Editor" -> "Execute" 菜单来重新执行 Playground 的动画。 ## 手工运行动画 在上面我们已经看到,我们可以不需要任何代码就能在 Interface Builder 进行设计,但是 `IBAnimatable` 还提供编程接口来让我们完全控制UI和动画。`IBAnimatable` 提供了例如 `pop()` 那样简单的 API,我们只需要一行代码就能执行动画。 ```swift view.pop(repeatCount: 1) // pop animation for the view view.squeezeFade(.in, direction:.left) // squeeze and fade in from left animation ``` 在 [Swift Playground Page - Predefined Animations](../IBAnimatable.playground/Pages/Predefined%20Animations.xcplaygroundpage) 里面我们可以尝试不同的动画。 ### 动画的属性 我们可以进一步个性化我们的动画。我们只需要在调用 `animate()` 方法的时候把相关参数传递即可。 ```swift view.animate(.squeeze(way: .in, direction: .left), duration: 1, damping: 1, velocity: 2, force: 1) ``` 在 [Swift playground Page - Animation Properties](../IBAnimatable.playground/Pages/Animation%20Properties.xcplaygroundpage) 里面我们可以尝试不同的属性的动画。 ### 串联动画 `IBAnimatable` 提供了类 Promise 的动画 API 来串联动画。 ```swift // 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` 方法来延时动画。 ```swift view.animate(.squeeze(way: .in, direction: .left)) .delay(0.5) .then(.shake(repeatCount: 3)) ``` 我们甚至可以把 `delay` 作为第一个方法来调用。 ```swift view.delay(2) .then(.squeeze(way: .in, direction: .left)) ``` ### 执行完毕的回调函数 我们可以在动画执行完毕以后调用回调函数。 ```swift view.animate(.squeeze(way: .in, direction: .left)) .completion { print("Animations finished!") } ``` ## 怎样安装 ### 手工安装 把 `IBAnimatable` 文件夹拷贝到你的 Xcode 项目中 ### Swift package manager 在 `Package.swift` 中添加 `.Package(url: "https://github.com/IBAnimatable/IBanimatable.git", majorVersion: 6)` 。 ### CocoaPods 在 `Podfile` 中添加 `pod 'IBAnimatable'` 。 ### Carthage 在 `Cartfile` 中添加 `github "IBAnimatable/IBAnimatable"` 。 ### Git submodule 你一定很熟悉 Git,应该不用我多说了,把这个 Repo 作为一个 submodule ,并把项目文件加到你的 workspace 里面,然后把 `IBAnimatable.framework` 放到你的应用程序的 Target 里面。 ## 文档 完整的文档请参考 [IBAnimatable APIs](APIs.md)。 ## 怎样贡献 我们每个人都可以为这个项目进行贡献。高效的工具使得我们有更多的时间来开发高质量的App,当然也有更多的时间享受生活🍻。 * 如果你是一名设计师,你可以使用 `IBAnimatable` 在 Interface Builder 里进行设计,甚至不需要任何像 Sketch 这样设计工具,或者把现有的 Sketch 或 Photoshop 在 Interface Builder 快速实现。有了 `IBAnimatable`,绝大部分的功能都可以 Interface Builder 里面完成。如果你需要新功能,请[提交一个 GitHub Issue](https://github.com/IBAnimatable/IBAnimatable/issues/new)。如果你使用 `IBAnimatable` 进行设计,请通过 Pull Request 或者 GitHub Issue 来通知我们,我们可以把它放在 Readme 文件里面。 * 如果你是一名开发者,你可以实现功能或者修改 Bug,Backlog 可以在[GitHub Issues](https://github.com/IBAnimatable/IBAnimatable/issues) 找到。如果你在你的 App 里面使用了 `IBAnimatable`,请通过 Pull Request 或者 GitHub Issue 来通知我们,我们可以把它放在 Readmd 文件里面。 * 如果你英语不错,来改一下我的英语吧😁。如果你还会其他语言,创建或者修改其他语言的 Readme 文件吧。 * 如果你喜欢这个项目,请告诉其他设计师和开发者,记住 Star🌟 这个项目哦。 🤗 ## Inspirations & Credits 请查看 [IBAnimatable Inspirations](../README.md#inspirations--credits) ## License `IBAnimatable` is released under the MIT license. See [LICENSE](../LICENSE) for details.