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