Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.
- ✅ 100% compatible with
IBAnimatableAPIs are extensions of
UIKit. No pollutions to
- ✅ 100% compatible with Auto Layout and Size Classes. No custom layout system.
- ✅ User interface design and preview in IB: corner radius, border, mask, shadow, gradient colors, tint color, blur effect etc.
- ✅ Animation design in IB: slide in/out, fade in/out, zoom in/out, flip, pop, shake, rotate, move etc.
- ✅ Transition design in IB: fade, slide, flip, cube, portal, fold, explosion etc.
- ✅ Interactive gesture design in IB: pan, screen edge pan, pinch etc.
- ✅ Presentation design in IB: flip, cover, zoom, dropdown etc.
- ✅ Activity indicator design in IB: ball beat, ball rotate, cube transition, Pacman etc.
Here is the full design in a Storyboard in Interface Builder.
IBAnimatable, we can design a UI in Interface Builder like what we can do in Sketch, and prototype animations in a Swift playground like what we can do in Framer. Also, we can use the output of the design directly in the production ready App.
As a designer, we love Sketch, which is a simple but yet super powerful tool to create UI. However, Sketch can't design interaction, navigation, transition and animation, and we may need another tool like Framer to design some of them. Moreover, to make an App Store ready App, we need to use Xcode and Interface Builder to implement the UI and animations. To speed up the process and minimize the waste, we create
IBAnimatable to make Interface Builder designable and animatable.
How to install
Copy and paste
IBAnimatable folder in your Xcode project.
To integrate using Apple's Swift package manager, add the following as a dependency to your
.package(url: "https://github.com/IBAnimatable/IBAnimatable.git", .upToNextMajor(from: "5.0.0"))
Add the following entry in your Podfile:
Add the following entry in your Cartfile:
Please Notice, there is a limitation of a built framework for
@IBInspectable, that will impact on
IBAnimatable when you use Carthage. There is a workaround to use Carthage or Swift package manager with
IBAnimatable, please have a look at Carthage – no Animatable UI Classes appearing in Storyboard
As @DanielAsher mentioned
I use carthage update --use-submodules --no-build --no-use-binaries and manually add the both the framework project and the framework as an embedded dependency.
This method is robust, and fine-grained, but perhaps not as easy as dragging the built framework into your project.
Add this repo as a submodule, and add the project file to your workspace. You can then link against
IBAnimatable.framework for your application target.
Subscribe to iOS Example
Get the latest posts delivered right to your inbox