Animation timing easing curves create smooth and consistent motion. Easing curves allow elements to move between positions or states. These easing curves affect an object's speed, opacity, and scale. These animation curves allow acceleration and deceleration changes to be smooth across the duration of an animation so that movement doesn't appear mechanical.

Design & API Documentation

Material Design guidelines: Duration & easing

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;