11# Motion Animator
22
3- [ ![ Build Status] ( https://travis-ci.org/material-motion/motionanimator-objc.svg?branch=develop )] ( https://travis-ci.org/material-motion/motionanimator-objc )
4- [ ![ codecov] ( https://codecov.io/gh/material-motion/motionanimator-objc/branch/develop/graph/badge.svg )] ( https://codecov.io/gh/material-motion/motionanimator-objc )
5- [ ![ CocoaPods Compatible] ( https://img.shields.io/cocoapods/v/MaterialMotionAnimator.svg )] ( https://cocoapods.org/pods/MaterialMotionAnimator )
6- [ ![ Platform] ( https://img.shields.io/cocoapods/p/MaterialMotionAnimator.svg )] ( http://cocoadocs.org/docsets/MaterialMotionAnimator )
7- [ ![ Docs] ( https://img.shields.io/cocoapods/metrics/doc-percent/MaterialMotionAnimator.svg )] ( http://cocoadocs.org/docsets/MaterialMotionAnimator )
3+ > A Motion Animator creates performant, interruptible animations from motion specs.
4+
5+ [ ![ Build Status] ( https://travis-ci.org/material-motion/motion-animator-objc.svg?branch=develop )] ( https://travis-ci.org/material-motion/motion-animator-objc )
6+ [ ![ codecov] ( https://codecov.io/gh/material-motion/motion-animator-objc/branch/develop/graph/badge.svg )] ( https://codecov.io/gh/material-motion/motion-animator-objc )
7+ [ ![ CocoaPods Compatible] ( https://img.shields.io/cocoapods/v/MotionAnimator.svg )] ( https://cocoapods.org/pods/MotionAnimator )
8+ [ ![ Platform] ( https://img.shields.io/cocoapods/p/MotionAnimator.svg )] ( http://cocoadocs.org/docsets/MotionAnimator )
9+ [ ![ Docs] ( https://img.shields.io/cocoapods/metrics/doc-percent/MotionAnimator.svg )] ( http://cocoadocs.org/docsets/MotionAnimator )
10+
11+ This library turns [ Motion Interchange] ( https://github.com/material-motion/motion-interchange-objc )
12+ data structures into performant Core Animation animations using a lightweight animator object.
13+
14+ <img src =" assets/chip.gif " />
15+
16+ In the above example we're animating the expansion and collapse of a calendar event using the
17+ following motion specification:
18+
19+ ``` objc
20+ struct CalendarChipTiming {
21+ MDMMotionTiming chipWidth;
22+ MDMMotionTiming chipHeight;
23+ MDMMotionTiming chipY;
24+
25+ MDMMotionTiming chipContentOpacity;
26+ MDMMotionTiming headerContentOpacity;
27+
28+ MDMMotionTiming navigationBarY;
29+ };
30+ typedef struct CalendarChipTiming CalendarChipTiming;
31+
32+ struct CalendarChipMotionSpec {
33+ CalendarChipTiming expansion;
34+ CalendarChipTiming collapse;
35+ };
36+ typedef struct CalendarChipMotionSpec CalendarChipMotionSpec;
37+
38+ FOUNDATION_EXTERN struct CalendarChipMotionSpec CalendarChipSpec;
39+ ```
40+
41+ In our application logic, we first determine which motion timing to use and then we create an
42+ instance of ` MDMMotionAnimator ` . The animator allows us to create animations with the given
43+ motion timing.
44+
45+ ``` objc
46+ CalendarChipTiming timing = _expanded ? CalendarChipSpec.expansion : CalendarChipSpec.collapse;
47+
48+ MDMMotionAnimator *animator = [[MDMMotionAnimator alloc ] init ];
49+ animator.shouldReverseValues = !_expanded;
50+
51+ [animator animateWithTiming: timing.chipHeight
52+ toLayer: chipView .layer
53+ withValues:@[ @(chipFrame.size.height), @(headerFrame.size.height) ]
54+ keyPath: MDMKeyPathHeight ] ;
55+ ...
56+ ```
857
958## Installation
1059
1766>
1867> gem install cocoapods
1968
20- Add ` MaterialMotionAnimator ` to your ` Podfile ` :
69+ Add `motion-animator ` to your `Podfile`:
2170
22- pod 'MaterialMotionAnimator '
71+ pod 'MotionAnimator '
2372
2473Then run the following command:
2574
@@ -29,7 +78,7 @@ Then run the following command:
2978
3079Import the framework:
3180
32- @import MaterialMotionAnimator ;
81+ @import MotionAnimator ;
3382
3483You will now have access to all of the APIs.
3584
@@ -38,25 +87,65 @@ You will now have access to all of the APIs.
3887Check out a local copy of the repo to access the Catalog application by running the following
3988commands:
4089
41- git clone https://github.com/material-motion/motionanimator -objc.git
42- cd motionanimator -objc
90+ git clone https://github.com/material-motion/motion-animator -objc.git
91+ cd motion-animator -objc
4392 pod install
44- open MaterialMotionAnimator .xcworkspace
93+ open MotionAnimator .xcworkspace
4594
4695## Guides
4796
48971. [Architecture](#architecture)
49- 2 . [ How to ...] ( #how-to-... )
98+ 2. [How to animate a transition](#how-to-animate-a-transition)
99+ 3. [How to animate an interruptible transition](#how-to-animate-an-interruptible-transition)
50100
51101### Architecture
52102
53- ### How to ...
103+ `MDMMotionAnimator` is the primary API provided by this library. You can configure the animations
104+ that an animator creates by modifying its configuration properties. When you're ready to add an
105+ animation to a CALayer instance, call one of the `animate` method variants and an animation will
106+ be added to the layer.
107+
108+ This library depends on [MotionInterchange](https://github.com/material-motion/motion-interchange-objc)
109+ in order to represent motion timing in a consistent fashion.
110+
111+ ### How to animate a transition
112+
113+ > This guide assumes that you are animating a two state bi-directional transition.
114+
115+ Start by creating an `MDMMotionAnimator` instance.
116+
117+ ```objc
118+ MDMMotionAnimator *animator = [[MDMMotionAnimator alloc] init];
119+ ```
120+
121+ When we describe our transition we'll describe it as though we're moving forward and take advantage
122+ of the ` shouldReverseValues ` property on our animator to handle the reverse direction.
123+
124+ ``` objc
125+ animator.shouldReverseValues = isTransitionReversed;
126+ ```
127+
128+ To animate a property on a view, we invoke the ` animate ` method. We must provide a timing, values,
129+ and a key path:
130+
131+ ``` objc
132+ [animator animateWithTiming: timing
133+ toLayer: view .layer
134+ withValues:@[ @(collapsedHeight), @(expandedHeight) ]
135+ keyPath: MDMKeyPathHeight ] ;
136+ ```
137+
138+ ### How to animate an interruptible transition
139+
140+ `MDMMotionAnimator` is configured by default to generate interruptible animations using Core
141+ Animation's additive animation APIs. You can simply re-execute the `animate` calls when your
142+ transition's direction changes and the animator will add new animations for the updated direction.
54143
55144## Contributing
56145
57146We welcome contributions!
58147
59- Check out our [ upcoming milestones] ( https://github.com/material-motion/motionanimator -objc/milestones ) .
148+ Check out our [upcoming milestones](https://github.com/material-motion/motion-animator -objc/milestones).
60149
61150Learn more about [our team](https://material-motion.github.io/material-motion/team/),
62151[our community](https://material-motion.github.io/material-motion/team/community/), and
0 commit comments