Skip to content

Commit cda6e10

Browse files
Markdown review
1 parent 69be9dd commit cda6e10

File tree

1 file changed

+36
-49
lines changed

1 file changed

+36
-49
lines changed

README.md

Lines changed: 36 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,50 @@
11
# mojs curve editor
22

3+
GUI for live easing/property curves editing.
4+
35
![mojs-curve-editor](logo.png "mojs-curve-editor")
46

57
`MojsCurveEditor` is a GUI plugin for interactive `custom easings`/`property curves` editing while crafting your animations. Part of `mojs` tools.
68

79
## Installation
810

9-
The `MojsCurveEditor` depends on `mojs >= 0.225.2`, tween autoupdates available for `mojs >= 0.276.2`. Please make sure you've linked [mojs](https://github.com/legomushroom/mojs) library first.
10-
11-
[CDN](https://www.jsdelivr.com/)(pending approval):
11+
The `MojsCurveEditor` depends on `mojs >= 0.225.2`, tween autoupdates available for `mojs >= 0.276.2`. Please make sure you've linked [mojs](https://github.com/mojs/mojs) library first.
1212

13-
```
13+
```console
14+
# cdn
1415
<script src="//cdn.jsdelivr.net/mojs-curve-editor/latest/mojs-curve-editor.min.js"></script>
15-
```
1616

17-
[NPM](https://www.npmjs.com/):
18-
19-
```
17+
# npm
2018
[sudo] npm install mojs-curve-editor
2119
```
2220

23-
[Bower](http://bower.io/):
24-
25-
```
26-
bower install mojs-curve-editor
27-
```
28-
29-
Import `MojsCurveEditor` constructor to your code (depends on your environment) :
21+
Import `MojsCurveEditor` constructor to your code, depending on your environment:
3022

3123
```javascript
3224
const MojsCurveEditor = require('mojs-curve-editor').default;
25+
3326
// or
3427
import MojsCurveEditor from 'mojs-curve-editor';
3528
```
3629

37-
If you installed it with script link - you should have `MojsCurveEditor` global.
30+
> If you installed it with script link - you should have `MojsCurveEditor` global
3831
3932
## Usage
4033

4134
Construct `MojsCurveEditor` with the next options:
4235

4336
```javascript
4437
const mojsCurve = new MojsCurveEditor({
45-
// Name of the Curve you are working on. The name is used to
38+
39+
// name of the Curve you are working on. The name is used to
4640
// identify record in `localStorage` to restore the state from
4741
// when page gets reloaded, so please specify unique names if
4842
// you use more than one editor on the same page.
49-
name: 'bounce curve'
43+
name: 'bounce curve'
5044
});
5145
```
5246

53-
After that you can "connect" the curve with your `mojs` modules by passing a "sample" of the curve to the `easing` property of the modules like this:
47+
After that you can "connect" the curve with your `mojs` modules by passing a "sample" of the curve to the `easing` property of the module, like this:
5448

5549
```javascript
5650
const mojsCurve = new MojsCurveEditor();
@@ -68,8 +62,8 @@ After that you can "connect" the curve with your `mojs` modules by passing a "sa
6862
// or as `property curve`
6963

7064
const html = new mojs.Html({
71-
el: '#js-el',
72-
x: { 100: 100, curve: mojsCurve.getEasing() }
65+
el: '#js-el',
66+
x: { 0: 100, curve: mojsCurve.getEasing() }
7367
});
7468

7569
```
@@ -81,23 +75,20 @@ If you use `mojs>0.276.5` the state of the modules with the curve `sample` will
8175
The `getEasing` function receives options hash:
8276

8377
```javascript
84-
// ...
8578
easing: mojsCurve.getEasing({
86-
// `transform` function that pipes thru the current value
79+
// `transform` function that pipes through the current value
8780
// of the curve so you can transform it
8881
transform: (k) => { return k; }
8982
});
90-
// ...
9183

9284
```
9385

9486
After you are happy with the curve you made, you need to change the `sample`(`mojsCurve.getEasing()` calls) with actual path data which you can get by clicking on the `code` button (<img width="32" style="margin-bottom: -10px" src="https://github.com/legomushroom/mojs-curve-editor/blob/master/mockups/code-button.png?raw=true" alt="code button" />):
9587

9688
```javascript
9789
const html = new mojs.Html({
98-
el: '#js-el',
99-
// after the change
100-
x: { 0: 100, easing: 'M0, 100 C0, 100 19.8984745544779, 40.10152544552211 30, 30 C40.1015254455221, 19.89847455447789 80, 45 80, 45 C80, 45 100, 0 100, 0 ' }
90+
el: '#js-el',
91+
x: { 0: 100, easing: 'M0, 100 C0, 100 19.8984745544779, 40.10152544552211 30, 30 C40.1015254455221, 19.89847455447789 80, 45 80, 45 C80, 45 100, 0 100, 0 ' }
10192
});
10293
```
10394

@@ -108,15 +99,19 @@ Constructor accepts the next options:
10899
```javascript
109100
const curveEditor = new MojsCurveEditor({
110101
// name of the curve editor
111-
name: 'bounce curve'
102+
name: 'bounce curve'
103+
112104
// if should preserve state on page reloads
113-
isSaveState: true,
105+
isSaveState: true,
106+
114107
// start path - will be loaded on initialization of the curve,
115108
// e.g. before any user modifications were made. Path of 'M0, 100 L100, 0' is set by default.
116-
startPath: 'M0, 100 L100, 0',
109+
startPath: 'M0, 100 L100, 0',
110+
117111
// callback on path change, accepts path string
118-
onChange: function (path) {}
119-
// if should hide when minimized - useful when you try to embed the
112+
onChange: function (path) {},
113+
114+
// if should hide when minimized - useful when you try to embed
120115
isHiddenOnMin: false
121116
});
122117
```
@@ -125,13 +120,17 @@ const curveEditor = new MojsCurveEditor({
125120

126121
```javascript
127122
curveEditor
128-
// gets `easing function` of the curve
123+
124+
// get `easing function` of the curve
129125
.getEasing()
130-
// maximizes the curve editor
126+
127+
// maximize the curve editor
131128
.maximize()
132-
// minimizes the curve editor
129+
130+
// minimize the curve editor
133131
.minimize()
134-
// toggles `maximize/minimize` methods regarding editor's state
132+
133+
// toggle `maximize/minimize` methods regarding editor's state
135134
.toggleSize();
136135
```
137136

@@ -142,7 +141,7 @@ curveEditor
142141
- `alt + d` - `delete` selected point(s)
143142
- [3 times] `alt + \` - `reset` curve
144143

145-
`Please note:` all shortcuts work only for active editor - it should have `orange mojs logo indicator` at bottom left.
144+
> All shortcuts work only for active editor - it should have **orange mojs logo indicator** at bottom left.
146145
147146
## Development
148147

@@ -165,15 +164,3 @@ webpack
165164
```
166165

167166
Please make sure you started a `feature branch` with the `feature name` (better from the `dev` branch) before making changes.
168-
169-
## License
170-
171-
(The MIT License)
172-
173-
Copyright (c) Oleg Solomka [@LegoMushroom](https://twitter.com/legomushroom) [[email protected]](mailto:[email protected])
174-
175-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
176-
177-
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
178-
179-
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

0 commit comments

Comments
 (0)