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

fixed slay

Browse Source
This commit is contained in:
Mashy 2019-07-02 21:55:10 +10:00
parent 191c61fa3b
commit 3eb55463e6
2 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/anims/chaos.jsx
View File

@ -23,7 +23,7 @@ function projectile(x, y, radius, colour) {
} }
class AttackCharge extends Component { class AttackCharge extends Component {
constructor(props) { constructor() {
super(); super();
this.animations = []; this.animations = [];
const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 }); const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 });

47
client/src/components/anims/slay.jsx
View File

@ -35,8 +35,7 @@ function sword(colour) {
class AttackCharge extends Component { class AttackCharge extends Component {
constructor(props) { constructor(props) {
super(); super();
this.team = props.team; this.animations = [];
// this.colour = props.colour;
this.colour = '#a52a2a'; this.colour = '#a52a2a';
const points = new Array(30).fill(0); const points = new Array(30).fill(0);
this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F')); this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
@ -81,6 +80,7 @@ class AttackCharge extends Component {
anime.set('.skill-anim', { anime.set('.skill-anim', {
translateY: -400, translateY: -400,
translateX: 0, translateX: 0,
opacity: 0,
}); });
anime.set('#explosion feDisplacementMap', { anime.set('#explosion feDisplacementMap', {
scale: 100, scale: 100,
@ -91,47 +91,56 @@ class AttackCharge extends Component {
stroke: this.colour, stroke: this.colour,
}); });
anime.set('#projectile', { this.animations.push(anime({
cx: 150,
cy: 420,
});
anime({
targets: '.skill-anim', targets: '.skill-anim',
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
{
value: 0,
delay: TIMES.TARGET_DURATION_MS * 0.7 + TIMES.POST_SKILL_DURATION_MS * 0.8,
duration: TIMES.POST_SKILL_DURATION_MS * 0.2,
}],
translateY: 0, translateY: 0,
translateX: 0, translateX: 0,
loop: false, loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2), duration: (duration * 1 / 2),
easing: 'easeInQuad', easing: 'easeInQuad',
}); }));
anime({ this.animations.push(anime({
targets: '#explosion feDisplacementMap', targets: '#explosion feDisplacementMap',
scale: 10000, scale: 10000,
loop: false, loop: false,
delay: (duration * 1 / 2), delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
duration: (duration * 1 / 2), duration: (duration * 1 / 2),
easing: 'easeInQuad', easing: 'easeInQuad',
}); }));
anime({ this.animations.push(anime({
targets: '#sword', targets: '#sword',
fill: '#1FF01F', fill: '#1FF01F',
stroke: '#1FF01F', stroke: '#1FF01F',
delay: (duration * 3 / 4), delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
}); }));
const projectiles = document.querySelectorAll('#projectile'); const projectiles = document.querySelectorAll('#projectile');
projectiles.forEach(proj => { projectiles.forEach(proj => {
anime({ this.animations.push(anime({
targets: proj, targets: proj,
cx: Math.random() * 250 + 25, cx: Math.random() * 250 + 25,
cy: Math.random() * 200 - 100, cy: Math.random() * 200 - 100,
delay: (duration * 2 / 3), delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
duration: (duration * 1 / 3), duration: (TIMES.POST_SKILL_DURATION_MS * 0.3),
easing: 'easeInQuad', easing: 'easeInQuad',
}); }));
}); });
} }
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
} }
module.exports = AttackCharge; module.exports = AttackCharge;