64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
const preact = require('preact');
|
|
const { Component } = require('preact');
|
|
const anime = require('animejs').default;
|
|
|
|
const { TIMES } = require('../../constants');
|
|
|
|
const duration = TIMES.START_SKILL;
|
|
|
|
class Attack extends Component {
|
|
constructor(props) {
|
|
super();
|
|
this.props = props;
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<svg
|
|
id={this.props.id}
|
|
class={`attack-anim skill-animation ${this.props.stage}`}
|
|
version="1.1"
|
|
id="Layer_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 300 300">
|
|
<g>
|
|
<polygon class='blue' points={'0,190 100,50 190,190'}/>
|
|
<polygon class='blue' points={'40,170 100,50 160,170'}/>
|
|
<polygon class='blue' points={'70,150 100,50 130,150'}/>
|
|
</g>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
componentDidMount() {
|
|
let value = '';
|
|
if ((!this.props.team && this.props.stage === 'START_SKILL')
|
|
|| (this.props.team && this.props.stage === 'END_SKILL')) {
|
|
anime.set('.attack-anim', {
|
|
translateY: -250,
|
|
});
|
|
value = '+=250px';
|
|
}
|
|
if ((!this.props.team && this.props.stage === 'END_SKILL')
|
|
|| (this.props.team && this.props.stage === 'START_SKILL')) {
|
|
anime.set('.attack-anim', {
|
|
translateY: 0,
|
|
});
|
|
value = '-=250px';
|
|
}
|
|
|
|
anime({
|
|
targets: ['.attack-anim'],
|
|
translateY: {
|
|
value,
|
|
duration,
|
|
},
|
|
loop: false,
|
|
duration,
|
|
easing: 'easeInQuad',
|
|
});
|
|
}
|
|
}
|
|
|
|
module.exports = Attack;
|