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.

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;