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

buff debuff

Browse Source
This commit is contained in:
ntr
2019-06-30 12:28:35 +10:00
parent 74b250439b
commit 2f9c1aeda3
3 changed files with 108 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/anims/buff.jsx
+51
View File
@@ -0,0 +1,51 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Buff extends Component {
render() {
return (
<svg
id='buff'
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
<g>
<polygon class='buff-one' points='0,190 100,300 190,190'/>
<polygon class='buff-two' points='40,170 100,300 160,170'/>
<polygon class='buff-three' points='70,150 100,300 130,150'/>
</g>
</svg>
);
}
componentDidMount() {
anime({
targets: ['#buff .buff-one'],
points: '0,190 100,10 190,190',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
anime({
targets: ['#buff .buff-two'],
points: '40,170 100,50 160,170',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
anime({
targets: ['#buff .buff-three'],
points: '70,150 100,90 130,150',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
}
}
module.exports = Buff;
client/src/components/anims/debuff.jsx
+53
View File
@@ -0,0 +1,53 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Buff extends Component {
render() {
return (
<svg
id='buff'
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300"
style={{ transform: 'rotate(180deg)' }}
>
<g>
<polygon class='buff-one' points='0,190 100,300 190,190'/>
<polygon class='buff-two' points='40,170 100,300 160,170'/>
<polygon class='buff-three' points='70,150 100,300 130,150'/>
</g>
</svg>
);
}
componentDidMount() {
anime({
targets: ['#buff .buff-one'],
points: '0,190 100,10 190,190',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
anime({
targets: ['#buff .buff-two'],
points: '40,170 100,50 160,170',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
anime({
targets: ['#buff .buff-three'],
points: '70,150 100,90 130,150',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
}
}
module.exports = Buff;