Skip to content

Commit 10e6ed4

Browse files
xavierfoucrierxavierfoucrier
authored
Merge pull request #20 from mojs/mojs-next
Angle to rotate API changes.
2 parents 4c111e1 + 2f6239a commit 10e6ed4

File tree

15 files changed

+919
-884
lines changed

15 files changed

+919
-884
lines changed

‎docs/.vuepress/components/DemoElegantTriangles.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
shape: 'polygon',
3333
duration: 1160,
3434
radius: { 60: 65 },
35-
angle: -60,
35+
rotate: -60,
3636
fill: 'none',
3737
stroke: COLORS.white,
3838
strokeWidth: { 30 : 5 },
@@ -52,7 +52,7 @@
5252
shape: 'polygon',
5353
duration: 1160,
5454
radius: 14,
55-
angle: -60,
55+
rotate: -60,
5656
fill: 'none',
5757
stroke: COLORS.white,
5858
strokeWidth: { 14 : 4 },
@@ -84,7 +84,7 @@
8484
shape: 'polygon',
8585
duration: 1000,
8686
radius: { 40: 20 },
87-
angle: -60,
87+
rotate: -60,
8888
fill: 'white',
8989
fillOpacity: { 0: 1 },
9090
stroke: COLORS.white,

‎docs/.vuepress/components/DemoExpandingCircles.vue

Lines changed: 147 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -2,156 +2,167 @@
22
<template>
33
<div class="mojs-interactive">
44
<slot></slot>
5-
<div class="mojs-interactive__result" id="demo-expanding-circle" style="background: rgb(241, 226, 215); height: 600px">
6-
<div id="demo-expanding-circle_controller" class="mojs-interactive__controller"></div>
5+
<div
6+
class="mojs-interactive__result"
7+
id="demo-expanding-circle"
8+
style="background: rgb(241, 226, 215); height: 600px"
9+
>
10+
<div
11+
id="demo-expanding-circle_controller"
12+
class="mojs-interactive__controller"
13+
></div>
714
</div>
815
</div>
916
</template>
1017

1118
<script>
12-
export default {
13-
14-
mounted: function () {
15-
import('@mojs/core').then(module => {
16-
import('@mojs/player').then(module => {
17-
18-
19-
const COLORS = {
20-
bg: 'rgb(241, 226, 215)',
21-
accent: '#3A0839',
19+
export default {
20+
mounted: function () {
21+
import("@mojs/core").then((module) => {
22+
import("@mojs/player").then((module) => {
23+
const COLORS = {
24+
bg: "rgb(241, 226, 215)",
25+
accent: "#3A0839",
26+
};
27+
28+
const _getWindowSize = () => {
29+
const w = window;
30+
return Math.max(
31+
w.innerHeight || e.clientHeight || g.clientHeight,
32+
w.innerWidth || e.clientWidth || g.clientWidth
33+
);
34+
};
35+
36+
const _calcScale = (radius) => {
37+
return 1.4 * (_getWindowSize() / radius / 2);
38+
};
39+
40+
let circleSize = 500,
41+
scale = _calcScale(circleSize),
42+
opts = {
43+
parent: "#demo-expanding-circle",
44+
radius: circleSize,
45+
fill: COLORS.accent,
46+
scale: { 0.05: 0.2 },
47+
duration: 465,
48+
easing: "cubic.out",
49+
isShowEnd: false,
50+
isForce3d: true,
2251
};
2352
24-
const _getWindowSize = () => {
25-
const w = window;
26-
return Math.max( (w.innerHeight || e.clientHeight || g.clientHeight), (w.innerWidth || e.clientWidth || g.clientWidth) )
27-
}
28-
29-
const _calcScale = (radius) => {
30-
return 1.4 * (_getWindowSize() / radius / 2);
31-
}
32-
33-
let circleSize = 500,
34-
scale = _calcScale( circleSize ),
35-
opts = {
36-
parent: '#demo-expanding-circle',
37-
radius: circleSize,
38-
fill: COLORS.accent,
39-
scale: { 0.05 : 0.2 },
40-
duration: 465,
41-
easing: 'cubic.out',
42-
isShowEnd: false,
43-
isForce3d: true,
44-
};
45-
46-
const circle1 = new mojs.Shape(opts)
47-
.then({
48-
easing: 'cubic.inout',
49-
scale: .125,
50-
duration: 350
51-
}).then({
52-
easing: 'cubic.inout',
53-
scale: scale,
54-
duration: 465
55-
});
56-
57-
const circle2 = new mojs.Shape({
58-
...opts,
59-
fill: COLORS.bg,
60-
scale: { 0 : .1125 },
61-
duration: 407,
62-
delay: 580
63-
}).then({
64-
easing: 'cubic.inout',
65-
scale: scale,
66-
duration: 350
67-
});
68-
69-
const circle3 = new mojs.Shape({
70-
...opts,
71-
scale: { 0: scale },
72-
duration: 580,
73-
delay: 1160,
74-
isShowStart: false,
75-
isShowEnd: true
76-
});
77-
78-
const smallCircle = new mojs.Shape({
79-
parent: '#demo-expanding-circle',
80-
radius: { 5: 25 },
81-
fill: 'none',
82-
stroke: COLORS.accent,
83-
strokeWidth: { 20: 0 },
84-
isShowEnd: false,
85-
delay: 700,
86-
duration: 290,
53+
const circle1 = new mojs.Shape(opts)
54+
.then({
55+
easing: "cubic.inout",
56+
scale: 0.125,
57+
duration: 350,
58+
})
59+
.then({
60+
easing: "cubic.inout",
61+
scale: scale,
62+
duration: 465,
8763
});
8864
89-
const triangleOpts = {
90-
parent: '#demo-expanding-circle',
91-
shape: 'polygon',
92-
radius: 15,
93-
duration: 407,
94-
fill: COLORS.bg,
95-
y: { 80 : -15 },
96-
scale: { 1 : 0 },
97-
delay: 495,
98-
isForce3d: true,
99-
easing: 'cubic.out'
100-
}
101-
const triangle1 = new mojs.Shape( triangleOpts );
102-
103-
const triangle2 = new mojs.Shape({
104-
...triangleOpts,
105-
y: { [-80] : 15 },
106-
angle: 180
107-
});
108-
109-
const lineOpts = {
110-
parent: '#demo-expanding-circle',
111-
shape: 'line',
112-
x: -180,
113-
radius: 50,
114-
radiusY: 0,
115-
stroke: COLORS.accent,
116-
strokeWidth: {15 : 0},
117-
duration: 580,
118-
isShowEnd: false,
119-
strokeDasharray: '100% 100%',
120-
strokeDashoffset: { '-100%': '100%' },
121-
easing: 'cubic.out',
122-
}
123-
const line1 = new mojs.Shape(lineOpts);
65+
const circle2 = new mojs.Shape({
66+
...opts,
67+
fill: COLORS.bg,
68+
scale: { 0: 0.1125 },
69+
duration: 407,
70+
delay: 580,
71+
}).then({
72+
easing: "cubic.inout",
73+
scale: scale,
74+
duration: 350,
75+
});
12476
125-
const line2 = new mojs.Shape({
126-
...lineOpts,
127-
angle: 180,
128-
x: -lineOpts.x
129-
});
77+
const circle3 = new mojs.Shape({
78+
...opts,
79+
scale: { 0: scale },
80+
duration: 580,
81+
delay: 1160,
82+
isShowStart: false,
83+
isShowEnd: true,
84+
});
13085
131-
this.timeline = new mojs.Timeline();
132-
this.timeline
133-
.add(
134-
circle1, circle2, circle3, smallCircle,
135-
triangle1, triangle2,
136-
line1, line2
137-
);
86+
const smallCircle = new mojs.Shape({
87+
parent: "#demo-expanding-circle",
88+
radius: { 5: 25 },
89+
fill: "none",
90+
stroke: COLORS.accent,
91+
strokeWidth: { 20: 0 },
92+
isShowEnd: false,
93+
delay: 700,
94+
duration: 290,
95+
});
13896
139-
const parentDOM = document.getElementById('demo-expanding-circle_controller');
140-
new MojsPlayer({
141-
add: this.timeline,
142-
isPlaying: false,
143-
isRepeat: false,
144-
parent: parentDOM,
145-
name: "demo-expanding-circle_controller",
146-
className: 'controller',
147-
isSaveState: false,
148-
isHidden: false,
149-
});
97+
const triangleOpts = {
98+
parent: "#demo-expanding-circle",
99+
shape: "polygon",
100+
radius: 15,
101+
duration: 407,
102+
fill: COLORS.bg,
103+
y: { 80: -15 },
104+
scale: { 1: 0 },
105+
delay: 495,
106+
isForce3d: true,
107+
easing: "cubic.out",
108+
};
109+
const triangle1 = new mojs.Shape(triangleOpts);
110+
111+
const triangle2 = new mojs.Shape({
112+
...triangleOpts,
113+
y: { [-80]: 15 },
114+
rotate: 180,
115+
});
150116
117+
const lineOpts = {
118+
parent: "#demo-expanding-circle",
119+
shape: "line",
120+
x: -180,
121+
radius: 50,
122+
radiusY: 0,
123+
stroke: COLORS.accent,
124+
strokeWidth: { 15: 0 },
125+
duration: 580,
126+
isShowEnd: false,
127+
strokeDasharray: "100% 100%",
128+
strokeDashoffset: { "-100%": "100%" },
129+
easing: "cubic.out",
130+
};
131+
const line1 = new mojs.Shape(lineOpts);
132+
133+
const line2 = new mojs.Shape({
134+
...lineOpts,
135+
rotate: 180,
136+
x: -lineOpts.x,
151137
});
152138
139+
this.timeline = new mojs.Timeline();
140+
this.timeline.add(
141+
circle1,
142+
circle2,
143+
circle3,
144+
smallCircle,
145+
triangle1,
146+
triangle2,
147+
line1,
148+
line2
149+
);
150+
151+
const parentDOM = document.getElementById(
152+
"demo-expanding-circle_controller"
153+
);
154+
new MojsPlayer({
155+
add: this.timeline,
156+
isPlaying: false,
157+
isRepeat: false,
158+
parent: parentDOM,
159+
name: "demo-expanding-circle_controller",
160+
className: "controller",
161+
isSaveState: false,
162+
isHidden: false,
163+
});
153164
});
154-
155-
},
156-
}
165+
});
166+
},
167+
};
157168
</script>

0 commit comments

Comments
 (0)