Skip to content

Commit f95fce9

Browse files
SandstedtSandstedt
committed
Added a MojsCurveEditor page and moved the other tools to seperate pages
1 parent be464a8 commit f95fce9

File tree

9 files changed

+390
-62
lines changed

9 files changed

+390
-62
lines changed

‎docs/.vuepress/components/MojsCurveEditorExample.vue‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/**
2+
Usage:
3+
<MojsCurveEditorExample dark />
4+
<MojsCurveEditorExample isPlaying />
5+
*/
6+
<template>
7+
<div class="mojs-interactive demo-mojs-logo-reveal__wrap">
8+
<slot></slot>
9+
<button class="button" v-on:click="openExample()">{{open ? 'Close demo' : 'Open demo'}}</button>
10+
<p v-if="open">Try to make the ball bounce. Click on the curve to add new points. See shortcuts <a href="#shortcuts">below</a>.</p>
11+
<div id="curve-editor-example" :class="(open ? 'curve-example curve-example--open ' : 'curve-example curve-example--closed ') + 'mojs-interactive__result ' + (dark ? 'mojs-interactive__result--dark' : 'mojs-interactive__result--transparent')">
12+
<div id="curve-controller" class="mojs-interactive__controller"></div>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
20+
data: function () {
21+
return {
22+
open: false,
23+
// myCurve: undefined,
24+
}
25+
},
26+
27+
props: {
28+
isPlaying: { type: Boolean, default: false },
29+
dark: {type: Boolean, default: false },
30+
},
31+
32+
methods: {
33+
openExample: function(c) {
34+
this.open = !this.open;
35+
this.open ? this.myCurve.maximize() : this.myCurve.minimize();
36+
}
37+
},
38+
39+
mounted: function () {
40+
import('@mojs/core').then(module => {
41+
import('@mojs/player').then(module => {
42+
import('@mojs/curve-editor').then(module => {
43+
44+
// const startPath = 'M0, 100 C21, 100 25, 38 25, 38 C25, 38 37, 60 50, 60 C63, 60 65, 15 75, 15 C85, 15 87.71428571428571, 100 100, 100';
45+
46+
this.myCurve = new MojsCurveEditor({
47+
name: 'myCurve',
48+
// startPath: startPath, // doesn't work properly in v1.5.0
49+
isHiddenOnMin: true,
50+
});
51+
52+
this.myCurve.minimize();
53+
54+
const shape = new mojs.Shape({
55+
parent: '#curve-editor-example',
56+
y: {'-100': 100},
57+
58+
duration: 2000,
59+
easing: this.myCurve.getEasing()
60+
});
61+
62+
const timeline = new mojs.Timeline();
63+
timeline.add(
64+
shape
65+
);
66+
67+
68+
const controllerDOM = document.getElementById('curve-controller');
69+
new MojsPlayer({
70+
add: timeline,
71+
isPlaying: this.isPlaying,
72+
isRepeat: true,
73+
parent: controllerDOM,
74+
name: "curve-controller",
75+
className: 'controller',
76+
isSaveState: false,
77+
});
78+
79+
})
80+
81+
});
82+
83+
});
84+
85+
}
86+
87+
}
88+
</script>
89+
90+
<style>
91+
.curve-example {
92+
margin-top: 20px;
93+
}
94+
.curve-example--open {
95+
height: 300px
96+
}
97+
.curve-example--closed {
98+
height: 1px
99+
}
100+
</style>

‎docs/.vuepress/config.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,15 @@ module.exports = {
4141
'/tutorials/shape-swirl/',
4242
]
4343
},
44-
'/tools/',
44+
{
45+
title: 'Tools',
46+
children: [
47+
'/tools/',
48+
'/tools/player/',
49+
'/tools/curve-editor/',
50+
'/tools/timeline-editor/',
51+
]
52+
},
4553
{
4654
title: 'API',
4755
sidebarDepth: 2,

‎docs/.vuepress/public/assets/img/mojs-player-icons.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎docs/tools/README.md‎

Lines changed: 9 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,14 @@
1+
---
2+
title: Tools overview
3+
sidebarDepth: 0
4+
---
5+
16
# Tools
27

38
**mo.js developer tools helps you when you are building and debugging your animations.**
49

10+
---
511

6-
## [Player](https://github.com/mojs/mojs-player)
7-
GUI player to control your animations-
8-
9-
### Usage
10-
- Install it: `npm i @mojs/player`
11-
- Import it: `import MojsPlayer from '@mojs/player';` or <br>
12-
`var MojsPlayer = require('mojs-player');`
13-
- Use it:
14-
1. Create a [tween](/api/tweens/tween.md) or a [timeline](/api/tweens/timeline.md)
15-
2. Create a player and mass the tween/timeline as the `add` option:
16-
```js
17-
const mojsPlayer = new MojsPlayer({ add: mainTimeline });
18-
```
19-
20-
::: tip
21-
For shotcuts and more options, [read more here](https://github.com/mojs/mojs-player)
22-
:::
23-
24-
25-
## [Curve Editor](https://github.com/mojs/mojs-curve-editor)
26-
GUI for live easing/property curves editing
27-
28-
### Usage
29-
- Install it: `npm i @mojs/curve-editor`
30-
- Import it: `import MojsCurveEditor from '@mojs/curve-editor';`
31-
- Use it:
32-
```js
33-
const mojsCurve = new MojsCurveEditor();
34-
35-
const tween = new mojs.Tween({
36-
easing: mojsCurve.getEasing()
37-
});
38-
```
39-
40-
::: tip
41-
You can also use multiple curve editors in the same page, [read more here](https://github.com/mojs/mojs-curve-editor)
42-
:::
43-
44-
45-
## [Timeline Editor](https://github.com/mojs/mojs-timeline-editor)
46-
MojsTimelineEditor is a GUI plugin for interactive `html`/`custom points`/`timeline` editing while crafting your animations.
47-
48-
### Usage
49-
::: warning
50-
This tool is a work in progress. The description below may not be correct.
51-
:::
52-
- Install it: `npm i @mojs/timeline-editor` (Note: this is currently not on NPM)
53-
- Import it: `import MojsTimelineEditor from '@mojs/timeline-editor';`
54-
- Use it:
55-
```js
56-
const mojsTimelineEditor = new MojsTimelineEditor();
57-
```
58-
59-
::: tip
60-
[Read more here](https://github.com/mojs/mojs-timeline-editor)
61-
:::
12+
- [Player](/tools/player) - Player to control your animations
13+
- [Curve Editor](/tools/curve-editor) - Helps you create custom easing / property curves
14+
- [Timeline Editor](/tools/timeline-editor) - Interactive html / custom points / timeline editing

‎docs/tools/curve-editor/README.md‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
# [Mojs Curve Editor](https://github.com/mojs/mojs-curve-editor)
2+
[![npm](https://img.shields.io/npm/v/@mojs/curve-editor.svg)](https://www.npmjs.com/package/@mojs/curve-editor)
3+
4+
> `MojsCurveEditor` is a GUI plugin for interactive **custom easings / property curves** editing while crafting your animations. Part of mojs tools.
5+
6+
## TLDR;
7+
* Install it: `npm i @mojs/curve-editor`
8+
* Import it: `import MojsCurveEditor from '@mojs/curve-editor';`'
9+
* Use it:
10+
```js
11+
const mojsCurve = new MojsCurveEditor();
12+
13+
const tween = new mojs.Tween({
14+
easing: mojsCurve.getEasing()
15+
});
16+
```
17+
18+
![mojs-curve-editor](https://raw.githubusercontent.com/mojs/mojs-curve-editor/master/logo.png)
19+
20+
<MojsCurveEditorExample dark />
21+
22+
## Installation
23+
24+
The `MojsCurveEditor` depends on `mojs >= 0.225.2`, tween autoupdates available for `mojs >= 0.276.2`. Please make sure you've imported [mojs](https://github.com/mojs/mojs) library first.
25+
26+
### cdn
27+
```html
28+
<script src="https://cdn.jsdelivr.net/npm/@mojs/curve-editor"></script>
29+
```
30+
### npm
31+
```bash
32+
npm i @mojs/curve-editor
33+
```
34+
35+
Import `MojsCurveEditor` into your code:
36+
37+
```js
38+
import MojsCurveEditor from '@mojs/curve-editor';
39+
```
40+
41+
::: tip
42+
If you installed it with the CDN option - you should have `MojsCurveEditor` globally.
43+
:::
44+
45+
## Usage
46+
47+
Construct `MojsCurveEditor` and provide a name of the curve you're working on:
48+
49+
```js{2}
50+
const mojsCurve = new MojsCurveEditor({
51+
name: 'bounce curve'
52+
});
53+
```
54+
::: tip
55+
The name is used to
56+
identify record in `localStorage` to restore the state from
57+
when page gets reloaded, so please specify unique names if
58+
you use more than one editor on the same page.
59+
:::
60+
61+
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:
62+
63+
```js
64+
const myCurve = new MojsCurveEditor({name: 'myCurve'});
65+
66+
const tween = new mojs.Tween({
67+
easing: myCurve.getEasing()
68+
});
69+
70+
// or
71+
72+
const shape = new mojs.Shape({
73+
easing: myCurve.getEasing()
74+
});
75+
76+
// or as `property curve`
77+
78+
const html = new mojs.Html({
79+
el: '#js-el',
80+
x: { 0: 100, curve: myCurve.getEasing() }
81+
});
82+
83+
```
84+
85+
Each `tween`/`module` should have it's out sample of the curve, this means you need to call `myCurve.getEasing()` send the `sample` of the curve to the `easing` property of modules.
86+
87+
If you use `mojs>0.276.5` the state of the modules with the curve `sample` will be updated automatically.
88+
89+
The `getEasing` function receives options hash:
90+
91+
```js
92+
easing: myCurve.getEasing({
93+
// `transform` function that pipes through the current value
94+
// of the curve so you can transform it
95+
transform: (k) => { return k; }
96+
});
97+
98+
```
99+
100+
After you are happy with the curve you made, you need to change the **sample** (the `myCurve.getEasing()` call) with the actual path data which you can get by clicking on the `code` button ( <svg width="32" style="position: relative; top: 0.4em; width: 24px; height: 24px; display: inline-block; background: #fff; border-radius: 3px; box-shadow: 1px 1px 0 rgba(0,0,0,.15);" viewBox="0 0 32 32"><use xlink:href="#maximize-shape"></use></svg> ):
101+
102+
```js
103+
const html = new mojs.Html({
104+
el: '#js-el',
105+
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 ' }
106+
});
107+
```
108+
109+
## Options
110+
111+
```js
112+
const curveEditor = new MojsCurveEditor({
113+
// name of the curve editor
114+
name: 'bounce curve',
115+
116+
// if should preserve state on page reloads
117+
isSaveState: true,
118+
119+
// start path - will be loaded on initialization of the curve,
120+
// e.g. before any user modifications were made. Path of 'M0, 100 L100, 0' is set by default.
121+
startPath: 'M0, 100 L100, 0',
122+
123+
// callback on path change, accepts path string
124+
onChange: function (path) {},
125+
126+
// if should hide when minimized - useful when you try to embed
127+
isHiddenOnMin: false
128+
});
129+
```
130+
131+
## Public Methods
132+
133+
```js
134+
curveEditor
135+
136+
// get `easing function` of the curve
137+
.getEasing()
138+
139+
// maximize the curve editor
140+
.maximize()
141+
142+
// minimize the curve editor
143+
.minimize()
144+
145+
// toggle `maximize/minimize` methods regarding editor's state
146+
.toggleSize();
147+
```
148+
149+
## Shortcuts
150+
151+
- `alt + z` - **undo** curve action
152+
- `alt + x` - **redo** curve action
153+
- `alt + d` - **delete** selected point(s)
154+
- [3 times] `alt + \` - **reset** curve
155+
156+
::: tip
157+
The shortcuts works only in the active editor - it should have **orange mojs logo indicator** at the bottom left.
158+
:::

‎docs/tools/player/README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# [Mojs Player](https://github.com/mojs/mojs-player)
2+
[![npm](https://img.shields.io/npm/v/@mojs/player.svg)](https://www.npmjs.com/package/@mojs/player)
3+
4+
GUI player to control your animations
5+
6+
### Usage
7+
- Install it: `npm i @mojs/player`
8+
- Import it: `import MojsPlayer from '@mojs/player';` or <br>
9+
`var MojsPlayer = require('mojs-player');`
10+
- Use it:
11+
1. Create a [tween](/api/tweens/tween.md) or a [timeline](/api/tweens/timeline.md)
12+
2. Create a player and mass the tween/timeline as the `add` option:
13+
```js
14+
const mojsPlayer = new MojsPlayer({ add: mainTimeline });
15+
```
16+
17+
::: tip
18+
For shotcuts and more options, [read more here](https://github.com/mojs/mojs-player)
19+
:::

0 commit comments

Comments
 (0)