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

Merge branch 'anims-change' of ssh://mnml.gg:40022/~/mnml into anims-change

Browse Source
This commit is contained in:
Mashy 2019-07-02 23:14:10 +10:00
commit cd3634a692
4 changed files with 34 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/components/anims/curse.jsx
View File

@ -17,7 +17,7 @@ class Curse extends Component {
return (
<svg
id='curse'
class="skill-animation blue"
class="skill-animation"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 198 200">
@ -30,10 +30,16 @@ class Curse extends Component {
</feMerge>
</filter>
</defs>
<g filter="url(#curseFilter)">
<ellipse cx="100" cy="100" rx="30" ry="30"/>
<ellipse cx="100" cy="100" rx="60" ry="60"/>
<ellipse cx="100" cy="100" rx="90" ry="90"/>
<g filter="url(#curseFilter)" class="blue" >
<circle cx="100" cy="100" r="30" />
<circle cx="100" cy="100" r="60" />
<circle cx="100" cy="100" r="90" />
</g>
<g class="white" style={{ strokeWidth: '2px' }}>
<circle cx="100" cy="100" r="30" />
<circle cx="100" cy="100" r="60" />
<circle cx="100" cy="100" r="90" />
</g>
</svg>
);
@ -50,14 +56,12 @@ class Curse extends Component {
}));
this.animations.push(anime({
targets: ['#curse'],
scale: [0.5, 1],
stroke: [COLOURS.WHITE, COLOURS.BLUE],
strokeWidth: [8, 0],
filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
targets: ['#curse circle'],
r: 0,
easing: 'easeInOutSine',
delay: TIMES.TARGET_DURATION_MS / 2,
duration: TIMES.TARGET_DURATION_MS,
direction: 'reverse',
}));
}

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

@ -1,6 +1,7 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const times = require('lodash/times');
const { TIMES, COLOURS } = require('../../constants');
@ -14,25 +15,17 @@ class Decay extends Component {
return (
<svg
id='decay'
class="skill-animation white"
class="skill-animation"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
<g>
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
{times(15, () => (
<g class="box">
<rect class="blue" x="135" y="135" width="30" height="30" />
<rect class="white" style={{ strokeWidth: '2px' }} x="135" y="135" width="30" height="30" />
</g>
))}
</g>
</svg>
);
@ -42,20 +35,18 @@ class Decay extends Component {
this.animations.push(anime({
targets: ['#decay'],
opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION },
{ value: 0, delay: TIMES.TARGET_DURATION_MS - 1000, duration: TIMES.FADE_OUT_DURATION },
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
targets: ['#decay rect'],
x: () => anime.random(50, 250),
y: () => anime.random(50, 250),
stroke: [COLOURS.WHITE, COLOURS.BLUE],
strokeWidth: [4, 2],
transform: () => `rotate(${anime.random(-15, 15)})`,
filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
targets: ['#decay .box'],
transform: () => `
translate(${anime.random(-120, 120)} ${anime.random(-120, 120)})
rotate(${anime.random(-15, 15)})
`,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,

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

@ -58,16 +58,6 @@ class Heal extends Component {
easing: 'easeInOutSine',
}));
// this.animations.push(anime({
// targets: '.skill-anim',
// translateY: 0,
// translateX: 0,
// loop: false,
// delay: TIMES.TARGET_DELAY_MS,
// duration: (duration * 1 / 2),
// easing: 'easeInQuad',
// }));
this.animations.push(anime({
targets: ['#heal circle'],
cx: 150,

4
client/src/components/anims/parry.jsx
View File

@ -44,7 +44,7 @@ class Parry extends Component {
targets: ['#parry'],
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.3 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
easing: 'easeInOutSine',
}));
@ -52,7 +52,7 @@ class Parry extends Component {
this.animations.push(anime({
targets: ['#parry'],
rotateX: 180,
delay: TIMES.TARGET_DELAY_MS,
delay: TIMES.TARGET_DELAY_MS * 2,
duration: TIMES.TARGET_DURATION_MS / 2,
easing: 'easeOutSine',
}));