Swiftpack.co - Package - IBAnimatable/IBAnimatable

IBAnimatable

Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.

IBAnimatable hero image

Build Status Language CocoaPods Carthage Compatible License

The app was made in Interface Builder with IBAnimatable without a single line of code. Due to the size of the GIF file on Dribbble, it only demonstrates a subset of features. We can also find the full HD version on YouTube or MP4 on Github

Key features

  • 100% compatible with UIKit. All IBAnimatable APIs are extensions of UIKit. No pollutions to UIKit's APIs.
  • 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.

StoryboardPreview

Here is the full design in a Storyboard in Interface Builder.

With 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

Manually install

Copy and paste IBAnimatable folder in your Xcode project.

Swift package manager

To integrate using Apple's Swift package manager, add the following as a dependency to your Package.swift:

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

CocoaPods

Add the following entry in your Podfile:

   pod 'IBAnimatable'

Carthage

Add the following entry in your Cartfile:

   github "IBAnimatable/IBAnimatable"

Please Notice, there is a limitation of a built framework for @IBDesignable and @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.

Git submodule

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.

Version 5.1

IBAnimatable 5.1 is the latest major release of IBAnimatable. This version supports Swift 4.1. There are no API breaking changes from migrating from version 4.x.

If you migrate from version 3.x. Please check out [IBAnimatable 4.0 Migration Guide](Documentation/IBAnimatable 4.0 Migration Guide.md) for more information.

Swift version

Swift 4.1

There are no API breaking changes when migrating from Swift 4 to Swift 4.1 using IBAnimatable.

If you are using Xcode 9.3 with Swift 4.1, please use the latest tagged 5.x release.

Swift 4

There are no API breaking changes when migrating from Swift 3.2 to Swift 4 using IBAnimatable.

If you are using Xcode 9 with Swift 4, please use the latest tagged 5.x release.

Swift 3.2

There are no API breaking changes when migrating from Swift 3.1 to Swift 3.2 using IBAnimatable.

If you are using Xcode 9 and Swift 3.2, please use the 4.2 release.

Swift 3 or 3.1

If you migrate from Swift 2.x, please check out [IBAnimatable 3.0 Migration Guide](Documentation/IBAnimatable 3.0 Migration Guide.md) for more information about how to migrate your project to 3.0. Version 3 follows Swift 3 API Design Guidelines and contains a lot of breaking changes from version 2.x.

If you are using Xcode 8 with Swift 3, please use the latest tagged 4.x release.

Languages

中文

Features

  • From prototype to shippable App Store ready App - What you design in Interface Builder is what the App exactly looks. More details can be found in this talk Prototype and Design App Store ready Apps in Interface Builder (/dev/world/2016)
  • Designer-friendly - Sketch style configuration panel on Attributes inspector (Attributes inspector) to lower the learning curve for using Interface Builder.
  • Animation design support in Swift playground - Similar to Framer, we can prototype animations in Swift playground to save time for running on a simulator or actual iOS devices.
  • Built-in Auto Layout support - We can use Auto Layout and Size Classes with IBAnimatable to support orientations and multiple iOS devices.
  • Navigation and transition support - We can use default navigation pattern in the App. IBAnimatable also has custom transition animators and segues to support transition animations and gesture interactions.
  • Protocol-oriented programming - IBAnimatable uses a protocol-oriented programming paradigm. With Swift protocol extension, it is easy to support more designable or animatable features. We can even use these protocol extensions to create other custom UI elements instead of using the default ones from IBAnimatable. More details can be found in this talk Prototype and Design App Store ready Apps in Interface Builder (/dev/world/2016) - Part 2: Protocol oriented programming

Use cases

  • Prototyping - Create interactive prototypes to validate ideas quickly.
  • Redesigning in Interface Builder - Redesign the UI from Sketch and animations from Framer without writing any code.
  • Making custom UI elements - Use IBAnimatable protocols to make custom UI elements. e.g. Buttons with a default color palette.

Documentations

How to run the example App

The easy way to learn and understand how powerful of IBAnimatableis to run the example App and play around the settings in Interface Builder. Just a few steps we can run the App as below, to see more features, we can tap on "Forget Password" button to unlock them. 😉

  1. Clone the repository
$ git clone https://github.com/IBAnimatable/IBAnimatable.git
  1. Open the workspace in Xcode
$ cd IBAnimatable
$ open IBAnimatable.xcworkspace
  1. Compile and run the app on your simulator or iOS device

How to design in Interface Builder

To use IBAnimatable to design the UI and animations in Interface Builder, just follow a few steps as below:

  1. Open a Storyboard or Xib file.
  2. Drag and drop a UIKit element e.g. UIView to a UIViewController.
  3. In Identity inspector (Identity inspector), configure the UI element to Animatable custom UI class e.g. AnimatableView, you can find all Animatable classes in APIs.md.
  4. Configure the UI and animations in Attribute Inspector.

How to animate in Swift playground

We can configure the animation settings in Attribute inspector. However, Interface Builder doesn't support previewing Animations, but we can still prototype animations in Swift playground. There are three sample pages to demonstrate how to design animation in Swift playground. You can find them in IBAnimatable.playground.

  1. Open IBAnimatable.xcworkspace
  2. Select IBAnimatable Framework scheme and build it with Command + b
  3. Select IBAnimatable.playground, choose one page in Swift playground, then click on "Assistant editor" button to split the playground. After that, select "Timeline" on the top of right-hand side to preview the animation. We can use Xcode menu "Editor" -> "Execute" to re-run the playground.

How to animate programmatically

As you saw above, we can prototype an App fully in Interface Builder without a single line of code, but IBAnimatable also provides APIs to let us fully control the UI and animations. IBAnimatable provides simple promise-like APIs. We can easily call them in one line.

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

You can play around with all these predefined animations in the Swift playground Page - Predefined Animations

Animation properties

There are some properties we can change to customize the animation. What we need to do is to pass the parameters to animate() method to start the animation.

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

You can play around with all animations with different parameters in the Swift playground Page - Animation Properties

Chaining animations

Sometimes, we need to run more animation after the previous one. With IBAnimatable, we can easily use promise-like API to chain all animations together to provide a sleek user experience.

// 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))

Delaying animations

We can use delay method to delay the next animation.

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

We can also delay the first animation.

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

Completion handler

We can add a completion handler/closure to execute when all animations are completed.

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

How to contribute

All of us can contribute to this project. Fewer overheads mean less time to build quality Apps and more time to enjoy coffee ☕️.

  • If you are a designer, you can design in Interface Builder with IBAnimatable without a design tool like Sketch, or implement your existing design from Sketch or Photoshop in Interface Builder rapidly. With IBAnimatable, you should be able to do all most of the design work in Interface Builder. If you have any feature request, please create a GitHub Issue and we will put it in the backlog. If you have done any design with IBAnimatable, please let us know via creating Pull Request or GitHub Issue. We will add it to README file.

  • If you are a developer, you can work on features or fix bugs, please check out Vision, Technical Considerations and Roadmap and GitHub Issues to find out the backlogs. If you have used IBAnimatable in your App, please let us know via creating Pull Request or GitHub Issue. We will add it to README file.

  • If you are good at English, please correct my English 😁. If you are good at other languages, please create a README file in those languages.

  • If you like the project, please share it with the other designers and developers, and star 🌟 the project. 🤗

Many thanks to all contributors 🤗 especially to @tbaranes who develops a lot of features and maintains the project.

Roadmap

Vision, Technical Considerations and Roadmap

Inspirations / Credits

  • IBDesignable and IBInspectable - The entire project is based on that.
  • Sketch - Interface Builder should be as easy as Sketch to use.
  • Framer Studio - Design and preview animations in one place.
  • Spring by Meng To - steal a lot of animation parameters from this project.
  • VCTransitionsLibrary by Colin Eberhardt - port all transition animations from this project, and add parameters support and fix bugs.
  • NVActivityIndicatorView by Vinh Nguyen - port all activity indicator animations from this project, and migrate to Swift 3.
  • Invision ToDo App UI Kit, The demo App's original design is from this UI Kit and redone in Interface Builder. We also added interaction, navigation and animations.

Change Log

Please see CHANGELOG.md

License

IBAnimatable is released under the MIT license. See LICENSE for details.

Github

link
Stars: 7379
Help us keep the lights on

Dependencies

Used By

Total: 1

Releases

5.1.0 - Apr 22, 2018

5.1.0

This release adds support for Swift 4.1 as well as multiple enhancements and bug fixes.

Big thanks to @phimage, @tbaranes, @kazyk, @lukas2, @DanielAsher, @JakeLin 👏

API breaking changes

N/A

Enhancements

  • Add new mask types .drop, .plusSign, .moon. #519 by @phimage
  • Add new mask types .heart, .gear, .ring, .superEllipse. #518 by @phimage
  • Add support for radial gradient. Currently not working with startPoint. #527 by @tbaranes
  • Animate TabBarItem image view when clicking on it. #539 by @phimage
  • Add compound animation type to do sequential or parallel animations. #520 by @phimage
  • Add spin animation type. #549 by @phimage
  • Add insetBy mask type. #554 by @phimage
  • Upgrade to Swift 4.1. #557 by @JakeLin
  • Add ib to support IBAnimatable without interface builder. #528 by @tbaranes

Bugfixes

  • Zoom out animation won't override view alpha #545 by @tbaranes
  • Fix presented modal view (over context) frame when device orientation changed. #516 by @phimage
  • Fix dismissal animation type of AnimatableModalViewController when the type is set in Interface Builder. #526 by @kazyk
  • Fix view's borders when using it with corner radius allSides #530 by @tbaranes
  • Fix CACurrentMediaTime usage by calling it on the CALayer object with conversion. #541 by @lukas2

5.0.0 - Sep 21, 2017

Support Swift 4 👏 👏 👏

Big thanks to @phimage and @SD10

5.0.0

API breaking changes

N/A

Enhancements

  • Support for Swift 4.0
  • Add more screen size ratio to present modal view controller. #512 by @phimage

Bugfixes

N/A

View build details and download artifacts on buddybuild: IBAnimatable (iOS, IBAnimatableApp)

4.2.0 - Sep 16, 2017

This is the last version to support Swift 3.* including Swift 3.2 (for Xcode 9). Thanks to all the contributors:
@phimage, @tbaranes and @SD10.

API breaking changes

NO breaking changes 😁

Enhancements

  • Add TimingFunctionType attribute to Animatable to specifies the speed curve of an animation. #478 by @phimage Add new mask type .ellipse. #481 by @phimage
  • Add stickOrMoveUp keyboard translation option when presenting a viewController. #489 by @tbaranes
  • Add scale, scaleTo and scaleFrom animation types. #494 by @phimage
  • PaddingDesignable now applies padding to the underlying text, edit, and placeholder rects -- opposed to using a UIView spacer. #492 by @SD10

Bugfixes

  • PlaceholderDesignable now applies placeholderColor to Placeholder defined in Interface Builder before checking the placeholderText property. #499 by @SD10
  • Fixes bug where Interface Builder doesn't recognize the delegate outlet for UITableView and UICollectionView. #506 by @SD10

4.1.0 - May 10, 2017

Here is 4.1.0! As any releases, it includes things such as new features and bugfixes. This time, it also includes one breaking news for IBAnimatable: our first unit tests ( @SD10 👏 ), wich is the first step in the long road of the 100% code coverage!

Thanks to all the contributors for making this release real 🎉

API breaking changes

  • Designable protocols have been changed to class only protocols. #463 by @SD10

Enhancements

  • Introduce Custom MaskType, you can now use MaskDesignable with custom masks. #465 by @lastmove
  • Add Unit Testing for Project. See #434 for current coverage. by @SD10

Bugfixes

  • AnimatableTextField won't override anymore the default border if no custom one set. #457 by @tbaranes
  • Make placeholderColor working with placeholderText AND placehodler. It will keep the current priorirty: placeholderText > placehodler. #459 by @tbaranes
  • Fix FillDesignable protocol to set fillColor for UICollectionViewCell. #462 by @SD10
  • Fixed AnimatableTextField interface update when using it programatically #458 by @tbaranes
  • Replace CGFloat.pi with CGFloat(Double.pi) for ActivityIndicatorShape, which fixes missing activity indicator animations on 32 bit devices. #470 by @broadwaylamb
  • Fix ignoring the delay property for UIView animations #472 by @broadwaylamb

4.0.0 - Apr 20, 2017

Happy to announce IBAnimatable 4.0! The theme of this major release was animations. By focusing on this, we ended with a nice new APIs which make your daily animations even easier to do. Since it introduces breaking changes, you can take a look at the migration guide what change for you. That's not all! This version is also improving masks, presentations, corners, introducing new features such as designable refresh control, animatable tabbar, and of course a few bug fixes. Just take a look at the full list below, this release is huge!

Thanks to all the contributors who are making IBAnimatable better! Most of credits go to @lastMove and @tbaranes, also thanks to @SD10 and @DanielAsher, @ashchan, @phimage, @mmadjer and @broadwaylamb!

API breaking changes

  • Introducing new promise-like animation APIs. Check out the migration guide. #385 by @lastmove and @tbaranes
  • CornerSide's swift3 migration leftovers: renaming .AllSides to .allSides. If you were setting programmatically a cornerSide to your view, you will just have to lowercase the A. #409 by @tbaranes
  • AnimatableSlider inherit from UISlider. #417 by @phimage
  • Replace all SystemAnimator classes with SystemTransitionAnimator #427 by @SD10
  • PresentationDesignable now supports contextFrameForPresentation which allow you to present a controller with a custom configuration over another instead of being in fullscreen. Imitates UIModalPresentationStyle.currentContext. #385 by @tbaranes
  • Transition Animator classes initializer parameter changed from transitionDuration -> duration. #446 by @SD10

Enhancements

  • Conserve custom layer mask when using Animatable* instead of removing them #407 by @DanielAsher
  • Add support for corner on AnimatableTableViewCell. #403 by @tbaranes
  • Make images of AnimatableSlider designable. #417 by @phimage
  • Add RefreshControlDesignable to make UIRefreshControl customization available in Interface Builder. Currently supported by UITableViewController and UITableView. #418 by @phimage and #429 by @tbaranes
  • Replace all SystemAnimator classes with SystemTransitionAnimator. #427 by @SD10
  • Add GradientDesignable to DesignableNavigationBar. #437 by @phimage
  • Add AnimatableTabBarController to support custom transition animations. #443 by @phimage

Bugfixes

  • Make corner sides case insensitive. #394 by @mmadjer
  • Frame is converted to window coordinate space to fix miscalculations in computed values (used with slideOut, ...). #412 by @redent
  • Reset destination view's transform property to CGAffineTransform.identity after a slide transition completes. #432 by @broadwaylamb
  • Fixed {Flip,Turn,Fold}Animator which was resulting in broken transitions. Thanks to@phimage for the fix. #441 by @tbaranes