1
- # Material Motion streams for Apple devices
2
-
3
- [ ![ Build Status] ( https://travis-ci.org/material-motion/streams-swift.svg?branch=develop )] ( https://travis-ci.org/material-motion/streams-swift )
4
- [ ![ codecov] ( https://codecov.io/gh/material-motion/streams-swift/branch/develop/graph/badge.svg )] ( https://codecov.io/gh/material-motion/streams-swift )
5
- [ ![ CocoaPods Compatible] ( https://img.shields.io/cocoapods/v/MaterialMotionStreams.svg )] ( https://cocoapods.org/pods/MaterialMotionStreams )
6
- [ ![ Platform] ( https://img.shields.io/cocoapods/p/MaterialMotionStreams.svg )] ( http://cocoadocs.org/docsets/MaterialMotionStreams )
7
- [ ![ Docs] ( https://img.shields.io/cocoapods/metrics/doc-percent/MaterialMotionStreams.svg )] ( http://cocoadocs.org/docsets/MaterialMotionStreams )
1
+ # Material Motion
2
+
3
+ > Reactive motion driven by Core Animation.
4
+
5
+ ![ Swift 3.1.x] ( https://img.shields.io/badge/Swift-3.1.x-orange.svg )
6
+ ![ iOS 9.0+] ( https://img.shields.io/badge/iOS-9.0+-orange.svg )
7
+ [ ![ Build Status] ( https://travis-ci.org/material-motion/material-motion-swift.svg?branch=develop )] ( https://travis-ci.org/material-motion/material-motion-swift )
8
+ [ ![ codecov] ( https://codecov.io/gh/material-motion/material-motion-swift/branch/develop/graph/badge.svg )] ( https://codecov.io/gh/material-motion/material-motion-swift )
9
+ [ ![ CocoaPods Compatible] ( https://img.shields.io/cocoapods/v/MaterialMotion.svg )] ( https://cocoapods.org/pods/MaterialMotion )
10
+ [ ![ Platform] ( https://img.shields.io/cocoapods/p/MaterialMotion.svg )] ( http://cocoadocs.org/docsets/MaterialMotion )
11
+ [ ![ Docs] ( https://img.shields.io/cocoapods/metrics/doc-percent/MaterialMotion.svg )] ( http://cocoadocs.org/docsets/MaterialMotion )
12
+
13
+ This library includes a variety of ready-to-use ** interactions** . Interactions are registered to an
14
+ instance of ` MotionRuntime ` :
15
+
16
+ ``` swift
17
+ // Store me for as long as the interactions should take effect.
18
+ let runtime = MotionRuntime (containerView : < #view #> )
19
+ ```
20
+
21
+ <table >
22
+ <thead ><tr ><th ></th ><th >Interaction</th ><th >Snippet</th ></tr ></thead >
23
+ <tbody >
24
+ <tr>
25
+ <td align="center"><img src="assets/arcmove.gif" /></td>
26
+ <td><pre><code class="language-swift">ArcMove</code></pre></td>
27
+ <td><pre><code class="language-swift">let arcMove = ArcMove()
28
+ arcMove.from.value = <#from#>
29
+ arcMove.to.value = <#to#>
30
+ runtime.add(arcMove, to: <#view#>)</code ></pre ></td >
31
+ </tr >
32
+ <tr >
33
+ <td align =" center " ><img src =" assets/directlymanipulable.gif " /></td >
34
+ <td ><pre ><code class =" language-swift " >DirectlyManipulable</code ></pre ></td >
35
+ <td ><pre ><code class =" language-swift " >runtime.add(DirectlyManipulable(), to: <#view#>)</code ></pre ></td >
36
+ </tr >
37
+ <tr >
38
+ <td align =" center " ><img src =" assets/draggable.gif " /></td >
39
+ <td ><pre ><code class =" language-swift " >Draggable</code ></pre ></td >
40
+ <td ><pre ><code class =" language-swift " >runtime.add(Draggable(), to: <#view#>)</code ></pre ></td >
41
+ </tr >
42
+ <tr >
43
+ <td align =" center " ><img src =" assets/rotatable.gif " /></td >
44
+ <td ><pre ><code class =" language-swift " >Rotatable</code ></pre ></td >
45
+ <td ><pre ><code class =" language-swift " >runtime.add(Rotatable(), to: <#view#>)</code ></pre ></td >
46
+ </tr >
47
+ <tr >
48
+ <td align =" center " ><img src =" assets/scalable.gif " /></td >
49
+ <td ><pre ><code class =" language-swift " >Scalable</code ></pre ></td >
50
+ <td ><pre ><code class =" language-swift " >runtime.add(Scalable(), to: <#view#>)</code ></pre ></td >
51
+ </tr >
52
+ <tr >
53
+ <td align =" center " ><img src =" assets/setpositionontap.gif " /></td >
54
+ <td ><pre ><code class =" language-swift " >SetPositionOnTap</code ></pre ></td >
55
+ <td ><pre ><code class =" language-swift " >runtime.add(SetPositionOnTap(),
56
+ to: runtime.get(<#view#>.layer).position)</code ></pre ></td >
57
+ </tr >
58
+ <tr >
59
+ <td align =" center " ><img src =" assets/spring.gif " /></td >
60
+ <td ><pre ><code class =" language-swift " >Spring</code ></pre ></td >
61
+ <td ><pre ><code class =" language-swift " >let spring = Spring()
62
+ spring.destination.value = <#initial destination#>
63
+ runtime.add(spring, to: <#view#>)</code ></pre ></td >
64
+ </tr >
65
+ <tr >
66
+ <td align =" center " ><img src =" assets/tossable.gif " /></td >
67
+ <td ><pre ><code class =" language-swift " >Tossable</code ></pre ></td >
68
+ <td ><pre ><code class =" language-swift " >let tossable = Tossable()
69
+ tossable.spring.destination.value = <#initial destination#>
70
+ runtime.add(tossable, to: <#view#>)</code ></pre ></td >
71
+ </tr >
72
+ <tr >
73
+ <td align =" center " ><img src =" assets/tween.gif " /></td >
74
+ <td ><pre ><code class =" language-swift " >Tween</code ></pre ></td >
75
+ <td ><pre ><code class =" language-swift " >runtime.add(Tween(duration: 0.5, values: [ 1, 0] ),
76
+ to: runtime.get(<#view#>.layer).opacity)</code ></pre ></td >
77
+ </tr >
78
+ </tbody >
79
+ </table >
8
80
9
81
## Installation
10
82
17
89
>
18
90
> gem install cocoapods
19
91
20
- Add ` MaterialMotionStreams ` to your ` Podfile ` :
92
+ Add ` MaterialMotion ` to your ` Podfile ` :
21
93
22
- pod 'MaterialMotionStreams '
94
+ pod 'MaterialMotion '
23
95
24
96
Then run the following command:
25
97
@@ -29,7 +101,7 @@ Then run the following command:
29
101
30
102
Import the framework:
31
103
32
- @ import MaterialMotionStreams;
104
+ import MaterialMotion
33
105
34
106
You will now have access to all of the APIs.
35
107
@@ -38,25 +110,80 @@ You will now have access to all of the APIs.
38
110
Check out a local copy of the repo to access the Catalog application by running the following
39
111
commands:
40
112
41
- git clone https://github.com/material-motion/streams -swift.git
42
- cd streams -swift
113
+ git clone https://github.com/material-motion/material-motion -swift.git
114
+ cd material-motion -swift
43
115
pod install
44
- open MaterialMotionStreams.xcworkspace
116
+ open MaterialMotion.xcworkspace
117
+
118
+ ## Case studies
119
+
120
+ ### Carousel
121
+
122
+ <img src =" assets/carousel.gif " />
123
+
124
+ A carousel with pages that scale in and fade out in reaction to their scroll position.
125
+
126
+ [ View the source] ( examples/CarouselExample.swift ) .
127
+
128
+ ### Contextual transition
129
+
130
+ <img src =" assets/contextualtransition.gif " />
131
+
132
+ A contextual view can be used to create continuity during transitions between view controllers. In
133
+ this case study the selected photo is the contextual view. It's possible to flick the view to
134
+ dismiss it using the tossable interaction.
135
+
136
+ Makes use of: ` Draggable ` , ` Tossable ` , ` Transition ` , ` TransitionSpring ` , ` Tween ` .
137
+
138
+ [ View the source] ( examples/ContextualTransitionExample.swift ) .
139
+
140
+ ### Floating action button transition
141
+
142
+ <img src =" assets/fabtransition.gif " />
143
+
144
+ A floating action button transition is a type of contextual transition that animates a mask outward
145
+ from a floating button.
146
+
147
+ Makes use of: ` Transition ` and ` Tween ` .
148
+
149
+ [ View the source] ( examples/FabTransitionExample.swift ) .
150
+
151
+ ### Material expansion
152
+
153
+ <img src =" assets/materialexpansion.gif " />
154
+
155
+ A Material Design transition using assymetric transformations.
156
+
157
+ Makes use of: ` Tween ` .
158
+
159
+ [ View the source] ( examples/MaterialExpansionExample.swift ) .
160
+
161
+ ### Modal dialog
162
+
163
+ <img src =" assets/modaldialog.gif " />
164
+
165
+ A modal dialog that's presented over the existing context and is dismissable using gestures.
166
+
167
+ Makes use of: ` Tossable ` and ` TransitionSpring ` .
168
+
169
+ [ View the source] ( examples/ModalDialogExample.swift ) .
170
+
171
+ ### Sticker picker
45
172
46
- ## Guides
173
+ < img src = " assets/stickerpicker.gif " />
47
174
48
- 1 . [ Architecture ] ( #architecture )
49
- 2 . [ How to ... ] ( #how-to-... )
175
+ Each sticker is individually ** directly manipulable ** , meaning they can be dragged, rotated, and
176
+ scaled using multitouch gestures.
50
177
51
- ### Architecture
178
+ Makes use of: ` DirectlyManipulable ` .
52
179
53
- ### How to .. .
180
+ [ View the source ] ( examples/StickerPickerExample.swift ) .
54
181
55
182
## Contributing
56
183
57
184
We welcome contributions!
58
185
59
- Check out our [ upcoming milestones] ( https://github.com/material-motion/streams -swift/milestones ) .
186
+ Check out our [ upcoming milestones] ( https://github.com/material-motion/material-motion -swift/milestones ) .
60
187
61
188
Learn more about [ our team] ( https://material-motion.github.io/material-motion/team/ ) ,
62
189
[ our community] ( https://material-motion.github.io/material-motion/team/community/ ) , and
0 commit comments