ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'core' of ssh://git.mnml.gg:40022/~/mnml into core

Browse Source
This commit is contained in:
Mashy 2019-12-18 17:14:49 +10:00
commit 669de50fb6
3 changed files with 16 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
client/src/components/anims/chaos.jsx
View File

@ -8,8 +8,8 @@ const { randomPoints } = require('../../utils');
function projectile(x, y, radius, colour) {
return (
<circle
cx={x}
cy={y}
cx={anime.random(-400, 400)}
cy={anime.random(-400, 400)}
r={radius}
fill={colour}
stroke={colour === '#a52a2a' ? 'none' : '#f5f5f5'}
@ -23,7 +23,7 @@ class Chaos extends Component {
constructor() {
super();
this.animations = [];
const points = randomPoints(20, 30, { x: 0, y: 0, width: 300, height: 100 });
const points = randomPoints(20, 30, { x: 0, y: 0, width: 1000, height: 1000 });
this.charges = points.map(coord => {
const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
return projectile(coord[0], coord[1], '0.5em', colour);
@ -58,37 +58,12 @@ class Chaos extends Component {
componentDidMount() {
const projectiles = document.querySelectorAll('.skill-anim circle');
anime.set('.skill-anim', {
translateY: -(window.innerHeight) * 0.35 * this.props.direction.y,
translateX: -(window.innerWidth) * 0.15 * this.props.direction.x,
opacity: 0,
});
this.animations.push(anime({
targets: '.skill-anim',
opacity: [
{ value: 1, duration: TIMES.TARGET_DURATION_MS * 0.3 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
],
}));
this.animations.push(anime({
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: ['#chaosRedFilter feTurbulence', '#chaosRedFilter feDisplacementMap'],
baseFrequency: 2,
scale: 5,
numOctaves: 3,
easing: 'easeOutSine',
duration: TIMES.TARGET_DURATION_MS,
}));
@ -96,11 +71,9 @@ class Chaos extends Component {
targets: proj,
cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
// cx: 150,
// cy: 200,
// opacity: 0,
duration: (TIMES.TARGET_DURATION_MS * 2 / 3),
easing: 'easeInQuad',
duration: anime.random(TIMES.TARGET_DURATION_MS * 2 / 3, TIMES.TARGET_DURATION_MS),
opacity: 0,
easing: 'easeInExpo',
})));
}

2
client/src/components/anims/heal.jsx
View File

@ -62,7 +62,7 @@ class Heal extends Component {
targets: ['#heal circle'],
cx: 150,
cy: 200,
duration: TIMES.TARGET_DURATION_MS * 0.9,
duration: TIMES.TARGET_DURATION_MS * 0.6,
easing: 'easeOutCirc',
direction: 'reverse',
}));

21
client/src/components/anims/sustain.jsx
View File

@ -25,17 +25,17 @@ class Sustain extends Component {
</filter>
<polyline
id="stageOne"
points='0 0'
points='128,168 80,240 176,240 128,168'
style={{ filter: 'url("#sustainFilter")' }}
/>
<polyline
id="stageTwo"
points='0 0'
points='176,240 212,216 128,96 44,216 80,240'
style={{ filter: 'url("#sustainFilter")' }}
/>
<polyline
id="stageThree"
points='0 0'
points='212,216 248,192 128,24 8,192 44,216'
style={{ filter: 'url("#sustainFilter")' }}
/>
</svg>
@ -54,13 +54,12 @@ class Sustain extends Component {
this.animations.push(anime({
targets: ['#stageOne'],
points: '128,168 80,240 176,240 128,168',
keyframes: [
{
stroke: [COLOURS.GREEN, COLOURS.RED],
fill: [null, COLOURS.RED],
delay: TIMES.TARGET_DURATION_MS * 0.2,
duration: TIMES.TARGET_DURATION_MS * 0.6,
duration: TIMES.TARGET_DURATION_MS * 0.15,
easing: 'easeInOutSine',
},
],
@ -73,12 +72,11 @@ class Sustain extends Component {
{
stroke: [COLOURS.GREEN, COLOURS.RED],
fill: [null, COLOURS.RED],
delay: TIMES.TARGET_DURATION_MS * 0.5,
duration: TIMES.TARGET_DURATION_MS * 0.6,
delay: TIMES.TARGET_DURATION_MS * 0.35,
duration: TIMES.TARGET_DURATION_MS * 0.15,
easing: 'easeInOutSine',
},
],
points: '176,240 212,216 128,96 44,216 80,240',
duration: TIMES.TARGET_DURATION_MS,
}));
@ -88,12 +86,11 @@ class Sustain extends Component {
{
stroke: [COLOURS.GREEN, COLOURS.RED],
fill: [null, COLOURS.RED],
delay: TIMES.TARGET_DURATION_MS * 0.8,
duration: TIMES.TARGET_DURATION_MS * 0.4,
delay: TIMES.TARGET_DURATION_MS * 0.5,
duration: TIMES.TARGET_DURATION_MS * 0.15,
easing: 'easeInOutSine',
},
],
points: '212,216 248,192 128,24 8,192 44,216',
duration: TIMES.TARGET_DURATION_MS,
}));
@ -103,7 +100,7 @@ class Sustain extends Component {
scale: 10,
numOctaves: 5,
easing: 'easeOutSine',
delay: TIMES.TARGET_DURATION_MS * 0.4,
delay: TIMES.TARGET_DURATION_MS * 0.55,
duration: TIMES.TARGET_DURATION_MS * 0.3 + TIMES.POST_SKILL_DURATION_MS,
}));
}