Skip to content

Latest commit

 

History

History
246 lines (205 loc) · 8.26 KB

Roadmap.md

File metadata and controls

246 lines (205 loc) · 8.26 KB
Raw

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

  • Version 1: Designable and animatable elements
  • 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

  • Bar Button Item:

    • roundedImage

  • Blur:

    • blurEffectStyle
    • blurOpacity
    • Motion Blur - #65

  • Border:

    • borderColor
    • borderWidth
    • borderSide
    • Border with more than one side and less than 4 sides

  • Checkbox:

    • checked
    • checkedImage
    • uncheckedImage
    • Animations for state changes - #67
    • Default checked and unchecked icon (Using path to avoid image assets?) - #68
    • Checked color - #69

  • Corner:

    • cornerRadius

  • Fill:

    • fillColor
    • opacity

  • Gradient:

    • startColor
    • endColor
    • startPoint
    • Default gradient colors

  • Navigation Bar:

    • solidColor

  • Mask:

    • Circle
    • Star
    • Polygon
    • Triangle
    • Wave
    • Parallelogram

  • Padding:

    • paddingLeft
    • paddingRight
    • paddingSide

  • Placeholder:

    • placeholderColor

  • Root Window:

    • rootWindowBackgroundColor

  • Rotation:

    • rotate

  • Shadow:

    • shadowColor
    • shadowRadius
    • shadowOpacity
    • shadowOffset

  • SideImage:

    • leftImage
    • leftImageLeftPadding
    • leftImageRightPadding
    • leftImageTopPadding
    • rightImage
    • RightImageLeftPadding
    • RightImageRightPadding
    • RightImageTopPadding

  • Status Bar:

    • lightStatusBar

  • Table View Cell:

    • removeSeparatorMargins

  • Tint:

    • tintOpacity
    • shadeOpacity
    • toneColor
    • toneOpacity

  • View Controller:

    • hideNavigationBar

  • Collection View and Collection View Cell - #53

  • Animatable Slider - #70

  • Material Design elements - and #16 and #55

  • Flat colors

  • Motion effect, parallax effect - #18

  • Segmented Control - #72

  • Custom dynamic type (text style) - #73

Animatable elements

  • Animations types:

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

  • Animation properties:

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

Interaction elements

Navigation, transitioning animators and custom Segues

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.