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

curse and decay changes"

Browse Source 
;
This commit is contained in:
ntr 2019-07-02 22:39:00 +10:00
parent 6070df8bd0
commit ccdfe22854
2 changed files with 18 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,9 +58,10 @@ class Curse extends Component {
this.animations.push(anime({
targets: ['#curse circle'],
r: 0,
easing: 'easeInSine',
delay: TIMES.TARGET_DURATION_MS * 0.4,
easing: 'easeInOutSine',
delay: TIMES.TARGET_DURATION_MS,
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,