ContextQMD
Back to Ibanimatable

Vision, Technical Considerations and Roadmap

Documentation/Roadmap.md

6.1.08.3 KB
Original Source

Vision, Technical Considerations and Roadmap

Vision

IBAnimatable is an open source library to help designers and developers design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder.

Approaches

  • Adding convenient @IBInspectable properties to reduce numerous amount of code. e.g.fillColor, cornerRadius, shadowColor and shadowOffset.
  • Providing predefined UI elements and animations. e.g. Flat UI colors, Gradient colors, and animations.
  • Extending existing behaviors, e.g. More transition animations like "Fade", "Explode", "Fold" and "Portal".

Technical Considerations

  • UIKit - All IBAnimatable UI elements are based on UIKit.

    • Dos
      • All UI elements should support Auto Layout.
      • Support existing navigation pattern like present/dismiss, push/pop.
    • Don'ts
      • Creating another layout system. e.g. CSS Flexbox.
      • Creating new custom navigation pattern.

  • @IBDesginable and @IBInspectable - To design in Interface Builder, all properties should be @IBDesginable. Some properties cannot render properly in Interface Builder, e.g. rotate. Moreover, animations are not able to preview in Interface Builder. However, once Interface Builder supports, those features works properly in Interface Builder.

  • Platform - iOS - Currently, we focus on iOS. Once iOS support is mature, we can implement more protocol extensions to support other platforms like MacOS, WatchOS, and tvOS.

  • iOS version - Currently, IBAnimatable supports iOS 8 and above. * Dos * Supporting latest version first and disabling them in the previous version if required. * Don'ts * Sacrificing features for backward compatibilities.

  • Swift - Currently, IBAnimatable supports Swift only.

    • Dos
      • Using Swift features and best practice like protocol extensions, enum and optional.
    • Don'ts
      • Avoiding Swift features to support Objective-C.

Roadmap

Versions

  • <del>Version 1: Designable and animatable elements</del>
  • Version 2: Custom transition animations and more animatable elements
  • Version 3: Swift 3
  • Version 4: More designable and animatable elements
  • Version 5: More animations
  • Version 6: Sketch plugin & Xcode plugin

You can find more details in https://github.com/IBAnimatable/IBAnimatable/milestones

Designable elements

Animatable elements

  • Animations types:

    • <del>SlideInLeft</del>
    • <del>SlideInRight</del>
    • <del>SlideInDown</del>
    • <del>SlideInUp</del>
    • <del>SlideOutLeft</del>
    • <del>SlideOutRight</del>
    • <del>SlideOutDown</del>
    • <del>SlideOutUp</del>
    • <del>SqueezeInLeft</del>
    • <del>SqueezeInRight</del>
    • <del>SqueezeInDown</del>
    • <del>SqueezeInUp</del>
    • <del>SqueezeOutLeft</del>
    • <del>SqueezeOutRight</del>
    • <del>SqueezeOutDown</del>
    • <del>SqueezeOutUp</del>
    • <del>FadeIn</del>
    • <del>FadeOut</del>
    • <del>FadeOutIn</del>
    • <del>FadeInOut</del>
    • <del>FadeInLeft</del>
    • <del>FadeInRight</del>
    • <del>FadeInDown</del>
    • <del>FadeInUp</del>
    • <del>FadeOutLeft</del>
    • <del>FadeOutRight</del>
    • <del>FadeOutDown</del>
    • <del>FadeOutUp</del>
    • <del>SqueezeFadeInLeft</del>
    • <del>SqueezeFadeInRight</del>
    • <del>SqueezeFadeInDown</del>
    • <del>SqueezeFadeInUp</del>
    • <del>SqueezeFadeOutLeft</del>
    • <del>SqueezeFadeOutRight</del>
    • <del>SqueezeFadeOutDown</del>
    • <del>SqueezeFadeOutUp</del>
    • <del>ZoomIn</del>
    • <del>ZoomOut</del>
    • <del>Shake</del>
    • <del>Pop</del>
    • <del>FlipX</del>
    • <del>FlipY</del>
    • <del>Morph</del>
    • <del>Squeeze</del>
    • <del>Flash</del>
    • <del>Wobble</del>
    • <del>Swing</del>
    • <del>Rotate</del>
    • <del>MoveTo</del>
    • <del>MoveBy</del>
    • <del>scale</del> - https://github.com/IBAnimatable/IBAnimatable/issues/121
    • Jump - https://github.com/IBAnimatable/IBAnimatable/issues/75

  • Animation properties:

    • <del>animationType</del>
    • <del>autoRun</del>
    • <del>duration</del>
    • <del>delay</del>
    • <del>damping</del>
    • <del>velocity</del>
    • <del>force</del>
    • <del>repeatCount</del>
    • Animating forever? repeatCount = Float.Infinit
    • <del>timing: linear and easing</del>

Interaction elements

  • <del>Unwind Segue</del>

  • <del>Dismiss current ViewController Segue</del>

  • <del>Pop to root ViewController Segue</del>

  • AnimatablePresentationController: #198

    • gestureToDismiss (UIDynamics)

  • AnimatableAlertController for UIAlertController

    • Standard Alert
    • Action Sheet

  • Ripple effect for user interaction like https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input

  • Dismissing keyboard automatically when tap outside of the AnimatableTextField.

  • Automatically scrolling the view to follow the keyboard's focus.

Misc.

  • Mock data generator
  • Importing Sketch to Swift playground
  • Importing Sketch to Storyboard? Maybe too hard.
  • Sketch plugin to export IBAnimatable styles from Sketch, e.g. generating Opacity=0.5; fillColor=#336699; from Sketch and easily apply in Interface Builder.

Any suggestions for the vision are welcome, please modify the Roadmap.md file and create a PR. BTW: you can edit it on Github online and create a PR without manually forking the project now.