ibanimatable / ibanimatable Goto Github PK

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

License: MIT License

Swift 99.62% Ruby 0.30% Objective-C 0.07% Shell 0.01%

interface-builder animation transition-animation swift ui-components uikit ios prototyping protocol-oriented

ibanimatable's Introduction

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

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.

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: "6.1.0"))

CocoaPods

Add the following entry in your Podfile:

   pod 'IBAnimatable'

Carthage

Add the following entry in your Cartfile:

   github "IBAnimatable/IBAnimatable"

Accio

Add the following entry in your Package.swift:

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

Next, add IBAnimatable to your App targets dependencies like so:

.target(
    name: "App",
    dependencies: [
        "IBAnimatable",
    ]
),

Please Notice, there is a limitation of a built framework for @IBDesignable and @IBInspectable, that will impact on IBAnimatable when you use Carthage or Accio. There is a workaround to use Carthage, Accio 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 6.1

IBAnimatable 6.1 is the latest major release of IBAnimatable. This version supports Swift 5.1. There are no API breaking changes from migrating from version 5.x and 6.

Version 6

IBAnimatable 6 supports Swift 5. There are no API breaking changes from migrating from version 5.x.

Version 5.2

This version supports Swift 4.2. 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 for more information.

Swift version

Swift 5.1

There are no API breaking changes when migrating from Swift 5 to Swift 5.1 using IBAnimatable.

If you are using Xcode 11 with Swift 5, please use the 6.0.0 release.

Swift 4.2

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

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

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 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 () 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. 😉

Clone the repository

$ git clone https://github.com/IBAnimatable/IBAnimatable.git

Open the workspace in Xcode

$ cd IBAnimatable
$ open IBAnimatable.xcworkspace

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:

Open a Storyboard or Xib file.
Drag and drop a UIKit element e.g. UIView to a UIViewController.
In Identity inspector (), configure the UI element to Animatable custom UI class e.g. AnimatableView, you can find all Animatable classes in APIs.md.
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.

Open IBAnimatable.xcworkspace
Select IBAnimatable Framework scheme and build it with Command + b
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.

ibanimatable's People

Contributors

Stargazers

Watchers

Forkers

wuxu imjerrybao wangchuangchuang ahmedfawzy xiangban ludaye123 swiftdemo artisanguang yippeeapp mitchellporter carabina remembermeliu monkey0803 icodor lazypuppy kerasking ygit p0w34007 chindoo ocollect-ios-swift-apps aiiaji takaaptech insomnia1015 szn0212 drooids woshizilong augmify jamwils omidkh68 ashishnigam tejnikumbh changeyourname yufeiskyer hardikamal tranhieutt reefaq wymany markandrewj andrewmagv sinss leejmb28 abidhussaincom swift-kit jetqin rashikapoonacha ggthedev easonho nipunsharma shafiullakhan htaiwan geasscode haikusw vashrei rather tueran edison9888 sekouperry hanggithub jameswang1015 mrjustin7 jinjian1991 zhoujialei ipraba fengweijp ergunkocak maxchen vaneetmodgill chenyongmac zeveisenberg qitonghu techscientist archerho mingliangfeng 931743010 amannayak0007 marcllahona michaelcranevong gwinds qinxuliang liangwei518 cornerstoneist leoguozichuan rudyx yagamis bill666500 dormitory219 app-basket type440 jposes22 coquer moqyuan kamatchu zhoushijun littledogboy sam5-hub zero-zhou cindy-github vipnetvnn cloudjanak sundarrajan-karya

ibanimatable's Issues

Blog post: how to use IBAnimatble in Swift playground to prototype animations

PieChartDesignable

Support PieChart.

Cannot run included playground

Hello Jake,

A very nice framework you created !!!

Playground execution failed: /var/folders/9y/w9x0q7y56s78qtsn8knw_ns80000gp/T/./lldb/1191/playground15.swift:5:8: error: no such module 'IBAnimatable'
import IBAnimatable

Any suggestions (Xcode 7.2) ?
Thanks
Frank

Replace String with enum for the properties are not using in IB

Because @IBInspectable in Interface Builder only support certain types. eg. CGFloat, UIColor, String and Int. But can not support enum inherited from String. eg. enum AnimationType: String.

@lexrus came up a great idea to use enum in programming API and use String in IB.

#if TARGET_INTERFACE_BUILDER
  /**
    String value of predefined Animation Type, all supported types are in `AnimationType` enum
  */
  var animationType: String? { get set }
#else
  /**
   Predefined Animation Type, all supported types are in `AnimationType` enum
   */
  var animationType: AnimationType? { get set }
  var animationTypeRaw: String? { get set }
#endif

Then when the App runs on simulator (not in IB), the compiler actually uses non TARGET_INTERFACE_BUILDER. We have to convert the String value in Storyboard to AnimationType. Method Swizzling on NSKeyedUnarchiver is one way to do that.

I have tried to use Swift protocol extension.

// Use Method Swizzling to convert `String` to emun when loading runtime attributes from Storybaord.
// http://nshipster.com/swift-objc-runtime/
public extension NSKeyedUnarchiver {
  public override class func initialize() {
    struct Static {
      static var token: dispatch_once_t = 0
    }

    // make sure this isn't a subclass
    if self !== NSKeyedUnarchiver.self {
      return
    }

    dispatch_once(&Static.token) {
      let originalSelector = Selector("setValue:forUndefinedKey:")
      let swizzledSelector = Selector("iba_setValue:forUndefinedKey:")

      let originalMethod = class_getInstanceMethod(self, originalSelector)
      let swizzledMethod = class_getInstanceMethod(self, swizzledSelector)

      let didAddMethod = class_addMethod(self, originalSelector, method_getImplementation(swizzledMethod), method_getTypeEncoding(swizzledMethod))

      if didAddMethod {
        class_replaceMethod(self, swizzledSelector, method_getImplementation(originalMethod), method_getTypeEncoding(originalMethod))
      } else {
        method_exchangeImplementations(originalMethod, swizzledMethod)
      }
    }
  }

  // MARK: - Method Swizzling
  func iba_setValue(value: AnyObject?, forUndefinedKey key: String) {
    if (key == "animationType") {
      setValue(value, forKey: "animationTypeRaw")
    }
  }
}

But initialize never gets called.

Then I tried to do it in didFinishLaunchingWithOptions

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.

    let originalSelector = Selector("setValue:forUndefinedKey:")
    let swizzledSelector = Selector("iba_setValue:forUndefinedKey:")

    let originalMethod = class_getInstanceMethod(NSKeyedUnarchiver.self, originalSelector)
    let swizzledMethod = class_getInstanceMethod(NSKeyedUnarchiver.self, swizzledSelector)

    let didAddMethod = class_addMethod(NSKeyedUnarchiver.self, originalSelector, method_getImplementation(swizzledMethod), method_getTypeEncoding(swizzledMethod))

    if didAddMethod {
      class_replaceMethod(NSKeyedUnarchiver.self, swizzledSelector, method_getImplementation(originalMethod), method_getTypeEncoding(originalMethod))
    } else {
      method_exchangeImplementations(originalMethod, swizzledMethod)
    }

    return true
  }

but iba_setValue never gets called.

Then back to @lexrus 's solution to do the Method Swizzling in Objective C.

@implementation NSKeyedUnarchiver (IBAnimatable)

- (void)iba_setValue:(id)value forUndefinedKey:(NSString *)key {
  if ([key isEqualToString:@"animationType"]) {
    [self setValue:value forKey:@"animationTypeRaw"];
  }
}

+ (void) load
{
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    SEL originalMethod = @selector( setValue:forUndefinedKey: );
    SEL swizzledMethod = @selector( iba_setValue:forUndefinedKey: );
    method_exchangeImplementations(
                                   class_getInstanceMethod( self, originalMethod ),
                                   class_getInstanceMethod( self, swizzledMethod )
                                   );
  });
}
@end

It is working now. And the storyboard is OK.

But once I add NSKeyedUnarchiver+IBAnimatable.m file to IBAnimatable framework target. Then the iba_setValue (in NSKeyedUnarchiver+IBAnimatable.m) will not get called anymore.

Here is the changes
4a5e081...feature/support-enum-for-non-ib-api

Animations: MoveTo and MoveBy

Method slideOut won't slide out everytime

Following the code, the slideOut methods are always 300 * force, but if we are running this example on an iPad with a force to 1, it will never get the outside screen.

Is there a reason to have hardcoding that constant?

RingDesignable

Can design something like Apple Watch health progress ring.

Finish Dribbble animated gif

Swift package manager support

Support Swift package manager to install IBAnimatable.

DesignableGradientView should conform to GradientDesignable

DesignableGradientView was a temporary view to wrap a layer. need to conform to GradientDesignable protocol.

Chain-able animations

Better syntax for chaining animations.

Just an idea

Animation(view).pop(repeatCount: 2).then.shake(repeatCount:1).and.rotate(.cw, repeatCount:2)

Predefined flat colors

Flat colors like https://flatuicolors.com/ or more predefined colors.

Animatable checkbox: Animations for state changes

Pop animation when check or uncheck? somthing like

But can be better transition.

Designable and Animatable badge in `BarButtonItemDesignable`

Support Designable and Animatable badge in BarButtonItemDesignable

Carthage support

Support Carthage to install IBAnimatable

Material design components

Material design components like MaterialButton

Please see https://github.com/JakeLin/IBAnimatable-Material

Motion effect, parallax effect

Parallax effect support, useful for background images.

Design transition animations in Interface Builder

Not only system built-in transitions, more custom transitions support.

AnimatableNavigationController to support custom transition animations for Push and Pop
AnimatableViewController to support custom transition animations for Present and Dismiss
~~AnimatableTableViewController to support custom transition animations for Present and Dismiss~~
Present***Segue to support custom transition animations for Present and Dismiss
***InteractiveAnimator to support gesture to Pop or Dismiss VC. e.g. Pan, ScreenEdgePan and Pinch.
~~More custom animations.~~

Fix geometryFlipped

Random data generator

Random name, random address, random title, random text?

Depends on Plugin for prototyping only

UIKit Dynamics

UIKit Dynamics support

Any thoughts on how to use this great module with custom views which are derived from UIKit views

I am using this library https://github.com/CosmicMind/Material, and want to have these components integrated with animatable feature in Interface Builder. I think moving forward I also want to have such kind of thing for any other great UI libraries. Do you have any ideas on how to get this done in the generic way.

Exit animation

When working with IBAnimatable, I am thinking of whether I can add an Exit animation when the controller is being dismissed. Actually with this library in place, I have an ambition to design all my apps following animations, effects demonstrated in Presentation softwares such as MS Powerpoint, Apple Keynote.

A better usage of labels to differentiate the issues, at least the basic ones if we don't create custom labels
Using milestones to determinate which features should be implemented in the next version
Something more?

Make this will definitely helps us to priorities and ease the development process.

Any thought?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.