Material Design

Animation timing

Like color and typography, motion can play a role in defining your app’s style and brand. The animation timing component provides implementations of the Material Motion easing curve types for iOS.

An animation showing different Material Design animation timings.

Design & API Documentation

Installation

Installation with CocoaPods

To add this component to your Xcode project using CocoaPods, add the following to your Podfile:

pod 'MaterialComponents/AnimationTiming'

Then, run the following command:

pod install

Usage

Importing

Before using animation timing, you’ll need to import it:

Swift

import MaterialComponents

Objective-C

#import "MaterialAnimationTiming.h"

Examples

Using Animation Timing

To use an animation timing curve select an appropriate a predefined MDCAnimationTimingFunction enum value. Use this value to look up an animation curve’s timing function. The timing function can then be used in an animation.

Swift

let materialCurve = MDCAnimationTimingFunction.deceleration
let timingFunction = CAMediaTimingFunction.mdc_function(withType: materialCurve)

let animation = CABasicAnimation(keyPath:"transform.translation.x")
animation.timingFunction = timingFunction

Objc

MDCAnimationTimingFunction materialCurve = MDCAnimationTimingFunctionDeceleration;
CAMediaTimingFunction *timingFunction = [CAMediaTimingFunction mdc_functionWithType:materialCurve];

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
animation.timingFunction = timingFunction;