IBM iOS Animation

• Code License
• Getting Started
• Requirements
• Installation
• Find your way around
• Example
• Library
• Use in your own project

As you pull the code from this repository, get inspired by the IBM Design Language animation guidelines. Remember: thoughtfully applied animation should be straightforward, limited to the most important interactions on the screen and helping users in delightful ways as they interact.

— IBM Design Language: Animation

This repository serves as a codebase for developers who want to use, prototype with, or get inspired by the machine motion style from the IBM Design Language. It contains six unique examples, each demonstrating the movement of a single component. The source code and full working example for each component are available.

Code License

Apache License 2.0

Getting Started

Requirements

• Xcode version 6.3.2
• Mac OS X 10.10 or later

Installation

git clone https://github.com/IBM-Design/ios-animations.git

Find your way around

Source files for each example can be found in their respective folder in the Animation folder in Project Navigator within Xcode. Each example contains a .storyboard and .swift files.

The .storyboard file at the top contains the visual aspect of the component. The .swift file below the storyboard is the view controller for the page that displays the component. The .swift file below the view controller for the page is the view controller for the component.

Example

The files for the Modal component can be found here:

Animation
|__ Modal/
   |__ Modal.storyboard
   |__ ModalExampleViewController.swift
   |__ ModalViewController.swift
   |__ ModalAppearTransitioning.swift
   |__ ModalDismissTransitioning.swift
   |__ ModalTransitioningDelegate.swift

ModalExampleViewController.swift is the view controller for the page that displays the Modal. ModalViewController.swift is the view controller for the actual Modal.

Use in your own project

Do you need Search functionality in your project? See how the example works within the Search folder. TabBar? Check out the TabBar folder. All example components are in their respective folders. Make sure to follow the requirement set forth by our license.