MotionInterchange 1.6.0

MotionInterchange 1.6.0

TestsTested
LangLanguage Obj-CObjective C
License Apache 2
ReleasedLast Release Dec 2017

Maintained by Jeff Verkoeyen, Adrian Secord, Ian Gordon.


Downloads

Total202,180
Week0
Month0

Installs

Apps3,875
Pod Tries2,402
Test Targets191
powered by Segment

GitHub

Stars0
Watchers8
Forks2
Issues4
Contributors1
Pull Requests0

Code

Files5
LOCLines of Code 96


  • By
  • The Material Motion Authors

Motion Interchange

A standard format for representing motion specifications in Objective-C and Swift.





Installation

Usage

Import the framework:

@import MotionInterchange;

You will now have access to all of the APIs.

Example apps/unit tests

Check out a local copy of the repo to access the Catalog application by running the following
commands:

git clone https://github.com/material-motion/motion-interchange-objc.git
cd motion-interchange-objc
pod install
open MotionInterchange.xcworkspace

Guides

  1. Architecture
  2. How to define a cubic bezier animation
  3. How to define a spring animation
  4. How to define a motion spec

Architecture

This library defines a format for representing motion in Objective-C and Swift applications. The
primary data type, MotionTiming, allows you to describe the duration, delay, timing curve, and
repetition for an animation.

How to define a cubic bezier animation

In Objective-C:

MDMMotionTiming timing = (MDMMotionTiming){
  .delay = 0.150,
  .duration = 0.225,
  .curve = _MDMBezier(0.4f, 0.0f, 0.2f, 1.0f)
}

How to define a spring animation

In Objective-C:

MDMMotionTiming timing = (MDMMotionTiming){
  .curve = _MDMSpring(1, 100, 10)
}

How to define a motion spec

Motion timing structs can be used to represent complex multi-element and multi-property motion
specifications. An example of a common complex motion spec is a transition which has both an
expansion and a collapse variant. If we wanted to represent such a transition we might create a
set of structures like this:

struct MDCMaskedTransitionMotionTiming {
  MDMMotionTiming contentFade;
  MDMMotionTiming floodBackgroundColor;
  MDMMotionTiming maskTransformation;
  MDMMotionTiming horizontalMovement;
  MDMMotionTiming verticalMovement;
  MDMMotionTiming scrimFade;
};
typedef struct MDCMaskedTransitionMotionTiming MDCMaskedTransitionMotionTiming;

struct MDCMaskedTransitionMotionSpec {
  MDCMaskedTransitionMotionTiming expansion;
  MDCMaskedTransitionMotionTiming collapse;
  BOOL shouldSlideWhenCollapsed;
  BOOL isCentered;
};
typedef struct MDCMaskedTransitionMotionSpec MDCMaskedTransitionMotionSpec;

We can then implement a spec like so:

#define MDMEightyForty _MDMBezier(0.4f, 0.0f, 0.2f, 1.0f)
#define MDMFortyOut _MDMBezier(0.4f, 0.0f, 1.0f, 1.0f)

struct MDCMaskedTransitionMotionSpec fullscreen = {
  .expansion = {
    .contentFade = {
      .delay = 0.150, .duration = 0.225, .curve = MDMEightyForty,
    },
    .floodBackgroundColor = {
      .delay = 0.000, .duration = 0.075, .curve = MDMEightyForty,
    },
    .maskTransformation = {
      .delay = 0.000, .duration = 0.105, .curve = MDMFortyOut,
    },
    .horizontalMovement = {.curve = { .type = MDMMotionCurveTypeInstant }},
    .verticalMovement = {
      .delay = 0.045, .duration = 0.330, .curve = MDMEightyForty,
    },
    .scrimFade = {
      .delay = 0.000, .duration = 0.150, .curve = MDMEightyForty,
    }
  },
  .shouldSlideWhenCollapsed = true,
  .isCentered = false
};

We can then use this motion spec to implement our animations in a transition like so:

MDCMaskedTransitionMotionTiming timing = isExpanding ? fullscreen.expansion : fullscreen.collapse;

// Can now use timing's properties to associate animations with views.

Contributing

We welcome contributions!

Check out our upcoming milestones.

Learn more about our team,
our community, and
our contributor essentials.

License

Licensed under the Apache 2.0 license. See LICENSE for details.