| commit | 26d91bf724adec6880cbc83a95d4cb4fb94847b6 | [log] [tgz] |
|---|---|---|
| author | Jeff Verkoeyen <featherless@google.com> | Mon Nov 13 15:15:22 2017 |
| committer | Jeff Verkoeyen <featherless@google.com> | Mon Nov 13 15:15:22 2017 |
| tree | a030ab76ffc1aee3fa0085191fd6602e9dc9afbd | |
| parent | 96c9e111c8aae53e415fceb111bba9f37526a4be [diff] | |
| parent | 1aaa40e07da47626f1d80db6e89dd1d089209c50 [diff] |
Merge branch 'release-candidate' into stable
A standard format for representing motion specifications in Objective-C and Swift.
CocoaPods is a dependency manager for Objective-C and Swift libraries. CocoaPods automates the process of using third-party libraries in your projects. See the Getting Started guide for more information. You can install it with the following command:
gem install cocoapods
Add MotionInterchange to your Podfile:
pod 'MotionInterchange'
Then run the following command:
pod install
Import the framework:
@import MotionInterchange;
You will now have access to all of the APIs.
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
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.
In Objective-C:
MDMMotionTiming timing = (MDMMotionTiming){ .delay = 0.150, .duration = 0.225, .curve = _MDMBezier(0.4f, 0.0f, 0.2f, 1.0f) }
In Objective-C:
MDMMotionTiming timing = (MDMMotionTiming){ .curve = _MDMSpring(1, 100, 10) }
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.
We welcome contributions!
Check out our upcoming milestones.
Learn more about our team, our community, and our contributor essentials.
Licensed under the Apache 2.0 license. See LICENSE for details.