# 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 - https://github.com/IBAnimatable/IBAnimatable/issues/65
* Border:
* borderColor
* borderWidth
* borderSide
* Border with more than one side and less than 4 sides
* Checkbox:
* checked
* checkedImage
* uncheckedImage
* Animations for state changes - https://github.com/IBAnimatable/IBAnimatable/issues/67
* Default checked and unchecked icon (Using path to avoid image assets?) - https://github.com/IBAnimatable/IBAnimatable/issues/68
* Checked color - https://github.com/IBAnimatable/IBAnimatable/issues/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 - https://github.com/IBAnimatable/IBAnimatable/issues/53
* Animatable Slider - https://github.com/IBAnimatable/IBAnimatable/issues/70
* Material Design elements - and https://github.com/IBAnimatable/IBAnimatable/issues/16 and https://github.com/IBAnimatable/IBAnimatable/issues/55
* Flat colors
* Motion effect, parallax effect - https://github.com/IBAnimatable/IBAnimatable/issues/18
* Segmented Control - https://github.com/IBAnimatable/IBAnimatable/issues/72
* Custom dynamic type (text style) - https://github.com/IBAnimatable/IBAnimatable/issues/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 - https://github.com/IBAnimatable/IBAnimatable/issues/121
* Jump - https://github.com/IBAnimatable/IBAnimatable/issues/75
* Animation properties:
* animationType
* autoRun
* duration
* delay
* damping
* velocity
* force
* repeatCount
* Animating forever? `repeatCount = Float.Infinit`
* timing: linear and easing
### Interaction elements
* Unwind Segue
* Dismiss current ViewController Segue
* Pop to root ViewController Segue
* `AnimatablePresentationController`: [#198](https://github.com/IBAnimatable/IBAnimatable/issues/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.
### Navigation, transitioning animators and custom Segues
* Configurable custom transition animations for Push and Pop.
* Configurable custom transition animations for Present and Dismiss.
* Configurable gesture interactions for Dismiss and Pop.
* Meaningful transition like https://www.google.com/design/spec/animation/meaningful-transitions.html
* More transition like https://github.com/ColinEberhardt/VCTransitionsLibrary and http://transitiontreasury.com/
### 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.