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

attak

Browse Source
This commit is contained in:
ntr
2019-07-23 16:01:07 +10:00
parent 4c6ee01b5d
commit eef880e052
5 changed files with 80 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/anims/attack.jsx
+33 -57
View File
@@ -2,81 +2,57 @@ const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const dagger = require('../svgs/dagger');
const { TIMES } = require('../../constants');
const duration = TIMES.TARGET_DURATION_MS;
const { TIMES, COLOURS } = require('../../constants');
class Attack extends Component {
constructor(props) {
super();
this.props = props;
this.animations = [];
}
render() {
return (
<svg
class={'attack-anim'}
class='attack-anim'
version="1.1"
id="Layer_1"
id="attack"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
{dagger(10, 250, 40, 150)}
{dagger(50, 250, 40, 150)}
{dagger(90, 250, 40, 150)}
{dagger(130, 250, 40, 150)}
{dagger(170, 250, 40, 150)}
{dagger(210, 250, 40, 150)}
{dagger(250, 250, 40, 150)}
viewBox="0 0 400 400">
<g>
<rect x="0" y="400" transform="skewX(45)"
width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
<rect x="200" y="400"
width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
<rect x="400" y="400" transform="skewX(-45)"
width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
</g>
</svg>
);
}
componentDidMount() {
let y = 0;
const daggers = document.querySelectorAll('.attack-anim .dagger');
anime.set(daggers, {
y: 250,
});
y = -150;
if (!this.props.team) {
anime.set('.attack-anim', {
rotate: 180,
});
} else {
anime.set('.attack-anim', {
rotate: 0,
});
}
// if (this.props.stage === 'END_SKILL') {
// anime.set(daggers, {
// y: 400,
// });
// y = -150;
// if (!this.props.team) {
// anime.set('.attack-anim', {
// rotate: 0,
// });
// } else {
// anime.set('.attack-anim', {
// rotate: 180,
// });
// }
// }
anime({
targets: daggers,
delay: anime.stagger(250, {
start: 250,
grid: [1, 7],
from: 'center',
easing: 'linear',
}),
y,
duration,
});
this.animations.push(anime({
targets: ['#attack rect'],
easing: 'easeOutExpo',
y: [400, 200],
height: [100, 10, 0],
width: [12, 5, 0],
delay: () => anime.random(TIMES.TARGET_DELAY_MS, TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS / 2),
duration: TIMES.TARGET_DURATION_MS,
}));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}
module.exports = Attack;